Hexo + GitHub 个人网站搭建 | 非程序员版 | Mac

搭好架子,实现可以用链接访问先。


一、安装环境

1. 去node官网下载Node.js,安装后回到终端。

位置:
Node.js /usr/local/bin/node
npm /usr/local/bin/npm

2. 打开「终端」,接下来需要输入命令的的操作都在终端里输入。

终端常用指令:

pwd #查看当前位置,启动终端的位置一般在用户文件夹
cd Banli/ #进入叫Banli的文件夹
cd /User/Banli/Documents #进入文稿
cd /User/Banli/Documents/123 #进入文稿里的 123文件夹
mkdir BBB #在123文件夹里创建叫BBB的文件夹
cd ../ #退到上一级
cd ../.. #推到上两级
hexo clean #清理hexo

文件拖到终端里可以查看「在终端里用的」路径;
⚠️ 所有的符号都要是英文符号哦!
⚠️ 输入指令前用 pwd 查看当前路径,需要始终都在博客文件夹路径下!(如我的博客文件在 Users/Banli/blog,那我的操作始终在这个路径下)。

3. 开放权限:
sudo su   #✏️输入这几个字母,回车
Passwoed:  #✏️输入电脑密码
sh-3.2#     #✅自动换行表示成功了。可能会显示别的啥

权限这步要放在前面,不然会报错。如果后面的步骤又报错权限被拒,可以再开放下权限。

4. 检查 node.js 是否安装成功:
node -v  #✏️输入这几个字母,回车
v10.15.3 #✅显示版本号,表示成功了
npm -v #✏️输入这几个字母,回车
6.4.1   #✅显示版本号,表示成功了
5. 通过 cnpm 安装淘宝的镜像(说是比直接安装快)
npm install -g cnpm --registry=https://registry.npm.taobao.org   

这时候会自动安装(有个进度条的),安装完了会自动换行;

6. 检查 cnpm 是否安装成功:
cnpm -v #✏️输入这几个字母,回车,显示以下内容表示安装成功
cnpm@6.0.0... #✅略
7.正式安装 Hexo
cnpm install -g hexo-cli   #✏️输入这几个字母,回车
Downloading hexo-cli to.......   #✅显示下载中
8.验证
hexo -v  #✏️输入这几个字母,回车
hexo-cli: 1.1.0  #✅显示版本,成功
.... #略

⚠️ 官网说要装 Xcode,老老实实装了


二、搭建博客

1. 建立文件夹
pwd  #✏️查看文件夹位置
/Users/banli #✅显示文件夹所在路径
mkdir blog #✏️新建文件夹,blog是文件夹名称,上行路径会生成一个blog文件夹
cd blog/  #✏️进入blog文件夹
pwd #✏️检查路径是不是对的
/Users/banli/blog  #✅嗯,是对的

⚠️ 也可以直接在文件夹里新建,一样的。

2.用 hexo 生成博客
sudo hexo init #✏️输入
INFO Cloning hexo-starter to /Users/Banli/blog #✅自动克隆了个叫landscape的主题
.... #略
INFO Start blogging with Hexo! #✅初始化完成
ls -l  #✏️输入,看一下目录下生成了哪些东西
total 296 #✅显示生成的东西
.... #略
3. 启动博客
hexo s #✏️输入
INFO  Start processing #✅显示,在本地4000端口启动
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 

在浏览器输入「http://localhost:4000」即可打开博客,默认主题长👇这样。

下一步该是新建博文了,但是到这个地方出现了一次问题,输入命令回车没反应;👇

补充:输入命令回车没反应是因为,要先停止预览博客才可以继续编辑!「Ctrl+C」停止博客。

当时不知道咋办,就想着删掉了重新来一遍,虽然最后也显示了「 Start blogging with Hexo!」,但是中间还挺多「 ERRO 」的。这样就没法启动了~

看到了别人用了不同的命令生成博客的,试下是可以的。删掉文件、关掉终端(刚刚才发现不重启路径在垃圾桶里,不知道前面失败的跟这个有没有关系)。

⚠️ 没有重新开启终端 / 用命令回到初始路径,无法新建博客。因为「当前位置」会随着被删除得文件一起去到垃圾桶

搭建博客方法二:

用于用「sudo hexo init」指令生成博客报错时。

1. 新建文件夹并生成博客

先进入对应文件夹。不进入指定文件夹博客文件会放在「用户」文件夹下,像前面的方法一。我还不知道怎么进入指定文件夹,就用的默认位置:

cd /Users/Banli/Documents/ # ✏️进入文稿

省掉了单独新建空文件夹的步骤,直接安装并新建文件夹:

hexo init blog #✏️安装在新文件夹「blog」里
INFO Cloning ... Start blogging with Hexo!  #✅显示相同上,完成,没有报错

进入到「blog」文件夹:

cd blog  #✏️进入文件夹
cnpm install #✏️安装cnpm

⚠️ 没有进到 blog是无法运行博客的,运行「hexo s」一定会报错。
c

2. 运行博客
hexo s #✏️和前面一样

但是提示 4000 端口被使用了:

FATAL Port 4000 has been used. Try other port instead.
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html

需要换一个端口:

hexo s -p 5000 #✏️换成  5000 端口
INFO  Start processing #✅显示成功,在本地5000端口启动
INFO  Hexo is running at http://localhost:5000 . Press Ctrl+C to stop.

浏览器输入「http://localhost:5000」打开博客。
这个时候终端是无法接收指令的(方法一最后导致我重使的情况!)

「运行」博客更像是「预览」吧,而且不是实时预览,需要停止后才能继续接收指令哦。

Ctrl+C #停止运行博客

停止后就看不到博客预览了。


三、上传到 GitHub

1. 建仓库

登录Github,点击「new repositories」新建仓库,名字输入自己的 Github 用户名+github.io,其他默认。

创建好后,复制👇这条地址,一会儿会用到。


2. 配置

回到博客文件夹,找到 「_config.yml」文件,用代码编辑器打开(我用的「Sublime Text」)。

找到「#URL」-「url」,改成自己的站点地址:

url: http://liubanli.github.io  #✏️换成自己的 github 地址

翻到最末尾,找到「deploy」,类型填写「git」并补上「repository」后面的内容:

deploy:
  type: git
  repository: https://github.com/liubanli/liubanli.github.io.git  #✏️仓库地址
  branch: master #✏️增加

⚠️ liubanli 是我的 Github 用户名,改成你自己的 / 冒号后面要空格

保存。可以关闭代码编辑器了。

3. 部署

blog的文件里要装一个 git 的部署插件,回到终端:

cnpm install --save hexo-deployer-git  #✏️输入
cnpm install hexo-deployer-git --save  #✏️顺序2

顺利安装完成。提交需要依次执行下面这三个命令:

hexo clean   #✏️清除hexo
hexo g  #✏️「generate」的简写,生成
hexo d  #✏️「deploy」的简写,部署

运行成功之后需要依次输入 GitHub 的用户名,GitHub 的密码。
部署成功最后后会显示:

INFO  Deploy done: git  #✅成功

Github 上这个仓库的页面就有内容了。

👆复制仓库地址

👆粘贴到浏览器地址栏,就可以访问博客了

补充:后来我又把GitHub用户名换了,本地预览可以,但是传不上 GitHub 了!!重新生成博客不行。后来全部删除重装,中间安装 Hexo 的时候有提示无权限。然后也在 GitHub 添加了公钥。

4. 添加公钥

重新开下终端,回到默认位置

ssh-keygen -t rsa -C 你的邮箱号@sina.com  #✏️输入生成公钥指令
Enter file in which to save the key (/Users/Banli/.ssh/id_rsa): #直接确定
Enter passphrase (empty for no passphrase): #✏️输入电脑密码
Enter same passphrase again:  #✏️确认密码

这时候会出来一串东西(不是公钥):

Your identification has been saved in /Users/Banli/.ssh/id_rsa.
Your public key has been saved in /Users/Banli/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:4EuZ******************ig banli1001@sina.com
The key's randomart image is:
+---[RSA 2048]----+
|           *******|
|              ****|
+----[SHA256]-----+

提示你公钥生成好了存在「/Users/Banli/.ssh/id_rsa.」这里,电脑里没找到这个文件夹,搜也搜不到...而且这串码还不是公钥!

这里我进行了个操作,不知道到是不是必要的~

LBLCP:~ Banli$ cd ~/.ssh #输入了进入~/.ssh的指令
LBLCP:.ssh Banli$ pwd #查看位置
/Users/Banli/.ssh #变成了在「/.ssh」文件夹里

接下来查看真正的公钥:

cat id_rsa.pub  #✏️查看公钥指令

后出来的才是公钥,大概长这样:

ssh-rsa AAAA***好几行字母*** banli1001@sina.com

从开头的「ssh-rsa」复制到邮箱号收尾。

位置:GitHub 》个人设置 Settings 》SHH and GPS Keys
点击「New SSH key」,添加钥匙;
标题空着,把刚刚复制的公钥粘贴到 Key 那栏里。

然后上传。


参考

  1. Bilibili 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

  2. CSDN Hexo搭建GitHub博客--初级(一)

3.CSDN 查看本机ssh公钥,生成公钥


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,313评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,369评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,916评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,333评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,425评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,481评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,491评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,268评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,719评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,004评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,179评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,832评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,510评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,153评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,402评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,045评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,071评论 2 352

推荐阅读更多精彩内容