Hexo搭建静态博客

前言

前段时间因为我的WordPress博客进入后台非常慢，严重影响操作使用，再加上服务器时间的限制，所以就讲博客从WordPress迁移到了Hexo上，这篇文章记录下我创建Hexo博客的一些流程步骤。

Hexo

Hexo是一个简单地、轻量地、基于NodeJS的一个静态博客框架，可以方便的生成静态网页托管在github或者是国内的coding.net上

Github Pages

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。因为Github的空间免费稳定， 因此可以用于将自己的静态站点托管在github上来搭建自己的个人博客站点。另外国内的coding.net也支持Pages服务，同样可以进行托管静态网页。

Github上生成的网站的默认域名一般都是username.github.io，这里的username是指你在github上注册的用户名，当然github的网站也支持自定义绑定域名。

安装Git

因为我们要将最终的静态网页文件推送到github上，所以第一步我们需要先在机器上安装Git，Git下载地址：https://git-for-windows.github.io/，安装完成之后配置好相关全局参数，如user，email等

安装NodeJS

因为Hexo是基于NodeJS的，所以还需要安装NodeJS，下载地址：http://nodejs.org/

安装Hexo

在磁盘上任意目录下右键鼠标选择Git Bash，使用如下命令进行Hexo的安装
npm install -g hexo

创建Hexo项目

初始化Hexo项目

在磁盘上新建一个文件夹作为自己Hexo项目的根目录，如：D:\Hexo，在此目录下右键鼠标选择Git Bash，然后执行如下命令进行Hexo项目的初始化
hexo init

安装Hexo项目依赖

npm install

本地查看Hexo站点

依赖安装完成之后，Hexo项目就算建好了，接下来我们使用如下命令检查项目是否成功创建：

1
2

hexo generate		//此命令表示生成静态文件
hexo server       //比命令表示启动服务，启动之后在本地可以查看站点

执行上述两个命令之后，可以在命令行上看到提示，在浏览器中访问http://localhost:4000，可以成功访问则表示你的Hexo项目创建成功了。

创建Github仓库

在github上创建一个与自己账户名一致的仓库：账号名.github.io，当然没有github账号的赶紧先去注册一个账号。

生成SSH密钥

执行如下命令生成SSH密钥

1

ssh-keygen -t rsa -C “你的邮箱地址”，按3个回车，密码为空

执行完成之后，在C:\Users\Administrator\.ssh下会生成两个文件id_rsa和id_rsa.pub

打开id_rsa.pub，复制全文，打开https://github.com/settings/ssh，Add SSH key，粘贴复制的文本内容

这样设置之后，将静态文件从本地推送到github上时就不要输入用户名和密码了，当然也可以不设置github的ssh，这样的话在推送文件到github上时会提示你输入用户名和密码

配置Hexo项目

Hexo目录结构

Hexo项目创建成功之后，我们在项目根目录下会发现这样几个我们经常用到的目录

1. source 这个目录是用来存放我们写的博客文件
2. themes 这个目录里是所有hexo安装的主题
3. _config.yml 这个文件是Hexo项目的主配置文件

配置Hexo

使用文本编辑器打开上面介绍的_config.yml文件，按照官网https://hexo.io/docs/configuration.html上的提示配置好相关配置，具体配置细节我就不多介绍了，自己在官网上看吧

我只介绍一个配置项deploy配置，这个配置就是用来配置你的静态站点是要部署到哪个上面，一般都是用github，以我的配置为例：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/huyongli/huyongli.github.io.git
  branch: master

注意配置参数与值之间是需要有一个空格的，不然配置是无法生效的，type表示我们使用的是git，repo表示你github上的仓库地址，branch表示你仓库的分支，一般默认都是master

部署Hexo

配置完Hexo之后，就可以将Hexo站点部署到github上了，执行如下命令进行部署：

1
2

hexo generate
hexo deploy

如果在部署的过程中出现如下错误：

1
2
3
4

ERROR Deployer not found: git

执行如下命令：
npm install hexo-deployer-git --save

在创建Hexo或是部署的过程中可能会多次出现类似的错误，一般都是使用npm install hexo-deployer-XXX --save类似的命令进行插件安装

上述命令执行成功后，重新部署，部署成功后，命令行上会提示Deploy done: git

成功部署后，过个几分钟就可以在浏览器上通过你的仓库地址访问你的博客了，还是以我的为例：http://huyongli.github.io

安装Hexo主题

Hexo默认的主题很丑，如果想自己的博客看着舒服的话，需要安装另外的主题插件，我使用主题的是next

进入next主题主页https://github.com/iissnan/hexo-theme-next
将此主题代码完整下下来，然后解压放到Hexo根目录下的themes目录下，然后将hexo项目的主题配置修改为next：theme: next

至于next主题的具体配置参考该主题的详细使用介绍吧http://theme-next.iissnan.com/

到此，整个Hexo的安装部署就结束了

原创文章，转载请出处注明。

下面是我的个人公众号，欢迎关注交流