使用Hexo+GitHub Pages搭建个人博客

本文主要用于记录自己搭建博客的过程。17年12月快期末的时候,萌生了下学期出去实习的想法,考试结束后这种想法愈发强烈,尝试写了简历之后很难受,发现没什么拿的出手的工作和项目,于是寒假这段时间想静下心来,先从个人博客开始,慢慢地学点知识,努力追赶优秀的吴大大、卜神、大仙等。

准备

需要准备两个软件:

  • Git
  • Node.js

我的操作系统是Win10 64位,Mac OS和Linux请参看其他安装方式。

安装Git

官网下载Git安装文件,在“Adjusting your PATH environment”这一步时,选择第二项“User Git from the Windows Command Prompt”。
安装完成后,按Win+R打开运行窗口输入cmd并回车,打开命令行窗口,输入

1
git  --version

如果结果会显示git 版本号,说明安装正确。

配置Node.js环境

官网下载相应的Node.js文件,下载完成后打开,保持默认设置即可,一路Next。同样地,打开命令行窗口,依次输入

1
2
node -v
npm -v

如果显示相应的版本号,说明安装正确。

配置GitHub

创建仓库

注册后登录,创建仓库(New repository),其中repository name为yourname.github,Description不写也没关系。

开启GitHub-Pages功能

点击界面右侧的Setting,将会打开该仓库的setting界面,向下拖动直至看见GitHub Pages,点击“Automatic page generator”,GitHub将会自动创建gh-pages页面,过几分钟后,即可访问yourname.github.io这个网址。

配置Hexo

安装Hexo

在自己觉得合适的地方创建一个文件夹,我在桌面上新建文件夹命名为Blog,进入该空白文件夹,在此处打开Git Bash,输入

1
npm install hexo-cli -g

继续输入

1
npm install hexp --save

输入以下命令,如果显示hexo版本号说明安装成功

1
hexo -v

初始化Hexo

接着上面的操作继续输入

1
hexo init blog

其中blog文件夹即为本地仓库,与博客相关的配置和博文内容都在里面

1
npm install

体验Hexo

继续操作,同样在Git Bash下,输入

1
hexo g

然后,

1
hexp d

在浏览器中打开http://localhost:4000/,将会看到一个崭新的的博客页面。
若打不开,可能是因为端口被占用了,换个端口即可,执行命令

1
hexo server -p 5000

上面的命令即换到端口5000,在浏览器中打开http://localhost:5000/即可。
到目前为止,Hexo在本地的配置全部结束。

使用Hexo

配置Deployment

打开Git Bash,选择使用git方式进行部署,输入

1
npm install hexo-deployer-git --save

首先需要为自己配置身份信息,输入

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

同样在站点文件_config.yml,找到Deployment然后按照如下修改

1
2
3
4
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master

然后在进入blog文件夹下,输入

1
hexo d

接下来按照提示,分别输入自己的Github账号用户名和密码,然后就可以通过http://yourname.github.io/来访问自己刚上传地网站了。

添加新文章

打开blog目录下的source文件夹,再打开_posts文件夹,会看到一个初始的hello-world.md文件,这就是对应的博文。如果想添加新文章,直接在_posts文件夹下新建md类型的文档即可,重新执行hexo clean、hexo g和hexo d。

进阶

绑定域名

在本地ping yourname.github.io后会得到一个ip:xxx.xxx.xx.147,我在阿里云上买了一个域名yuhongwa.com,然后进行解析,添加三条条目如下:

类型 主机记录 记录值
CNAME @ hongiii.github.io
A @ xxx.xxx.xx.147
A @ xxx.xxx.xx.148

然后在blog目录下的source文件中华,新建一个CNAME文件,没有后缀名,内容为yourdomain.xxx,我的就是www.yuhongwa.com,然后执行

1
hexo d -g

重现上传自己的博客,登录Github打开yourname.github.io仓库,进入setting页面,如果在GitHub Pages下看到”Your site is published at https://www.yuhongwa.com“之类的提示,说明配置成功。

修改主题

Hexo默认采用landscape主题,如果想更换其他主题比如Next等,可以查到相应的主题下载到blog目录下的theme文件夹下,然后在站点配置文件_config.yml中修改,

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: landscape //themes文件夹中对应文件夹的名称

然后执行hexo clean,接着hexo g,最后hexo d,很快就可以看到新的主题样式了。

其他个性化设置

这一部分我花费的时间比较长,参考了很多文章,个性化设置有很多,比如

  • 更改字体字号
  • 头像设为圆形可旋转
  • 动态页面
  • 添加音乐
  • 添加评论
  • 添加打赏
  • 添加浏览、访客之类
  • 添加RSS等等

实在太多了,我采用的主要有以下个性化设置:

修改侧边栏为左侧

默认Next主题Mist风格,侧边栏是放在右边的,我想把它放在左侧。
参考

修改字号

我不记得默认的字号是14px还是16px,修改字号参考

修改主题宽度

默认主题的留白太多,如果想修改页宽,减少两侧空白,可参考

头像设为圆形,且点击可旋转

参考
注意,如果想设置为圆形,采用的图片尽量为正方形,否则显示效果为椭圆。

添加高冷的龙之介大人模型(live2d)

参考

添加评论

看很多人用的来必力之类的,我用的是友言,个人感觉友言挺好用的。

添加打赏等

以上两部分谷歌一下都有很多,不再赘述了。

总结

从开始搭建博客到完成,大概花了一周的时间,感觉大部分时间都用在个性化配置上面了,这里非常感谢很多很多的大佬们的文章和开源项目。
呐,小白龙要开始她的学习之旅啦~

坚持分享,您的支持将鼓励我继续学习哇~