Hexo|Next+github博客搭建与自定义域名部署

Posted on Edited on

为什么想建立个人博客?

  1、知识的沉淀远比新知识的学习更重要。将离散的知识体系做整合，理清思路，归纳总结。

  2、记录学习更多计算机，编程方面的知识，方便以后查找。

  初识Hexo|Next主题博客，被他界面简洁但功能强大所吸引，非常适合做技术博客。虽然目前主流方式CSDN和简书都能直接发布学习心得，但建立一个自己的博客网站仍是个有趣的事情。本篇博文基于Hexo|Next+Github Pages进行博客搭建，并部署于自定义域名。

本地Hexo安装与配置

git安装

进入git官网，找到对应系统环境的安装包并下载。
按Ctrl+R调用cmd回车，输入以下代码验证git工具是否安装成功：

1
git --version

Node.js安装

进入Node.js官网，下载对应系统环境的安装包。
同样调用cmd检测Node.js是否安装成功：

1
2
node -v
npm -v

显示版本号，说明安装成功，否则，请检查哪一步安装出错。

github注册与配置

打开github官网,添入自己注册信息，注意这里用户名最好选用常用的，后面代码库需保持一致。(下文所有yourname都是你注册的用户名),已有github账号的小伙伴请直接建立仓库（create a new repository）,这里很重要一点是repository name要写yourname.github.io，然后选择public。
下面需要打开gh-pages功能，这样才能进行后续的博客创建。我们点击页面功能区右侧的Settings选项，进入后下来找到Github pages模块，点击Launch Automatic page generator按钮，就会完成gh-pages页面的创建了。过几分钟后，尝试用浏览器访问一下yourname.github.io网址，如果可以正常打开页面，Github部分的工作就完成了。

Hexo安装

首先在你的电脑本地选择一个盘，单独建立一个文件夹目录，方便用来管理后面的博客文件。比如E:/Blog，这时候将cmd控制台操作目录cd转换到对应目录下:

1
2
cd /d E:
cd blog

此时控制台的操作目录就变成了你的博客管理目录了。接着在命令行中分别运行下面的代码：

1
2
npm install hexo-cli -g
npm install hexo --save

这里的 -g 选项表示全局安装，使得 Hexo CLI 在系统的任何地方都可以使用。出现notice和warm，不用管。
继续输入以下命令测试Hexo安装情况。

1
hexo -v

出现一系列工具版本号，说明安装正常。

Hexo配置

对安装后的Hexo进行初始化，建立系列文件:

1
2
3
hexo init yourname.github.io
cd yourname.github.io
npm install

第一行是新建初始化目录，这一步名字也可以改，但是为了容易区分以及后续的多端管理博客建议可以这么命名。
第二行则是将工作目录换到初始化的目录下。
第三行是初始化环境，安装所需要的一系列文件。

完成后，会显示几个重要文件，包括:

1
2
3
4
5
6
node_modules
public
source
themes
_config.yml
package.json

到这，Hexo配置基本完成，继续控制台运行如下code：

1
2
3
hexo clean
hexo g
hexo s

第一行是清理生成的静态文件和缓存。它会删除 public 目录下的文件以及 .deploy_git 文件夹中的文件，以确保在重新生成网站时不会有旧文件的残留。
第二行生成静态文件。Hexo 会根据你的 Markdown 文件和配置生成网站的静态页面，并将其存放在 public 目录中。
第三行是启动本地服务器,在浏览器中预览生成的网站。
Hexo主题的结构大体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
├── _config.yml
├── languages
│   ├── default.yml
│   └── zh-Hans.yml
├── layout
│   ├── achieve.swig
│   ├── category.swig
│   ├── index.swig
│   ├── _layout.swig
│   ├── page.swig
│   ├── _partials
│   ├── post.swig
│   └── tag.swig
└── source
    ├── css
    ├── fonts
    ├── img
    ├── js
    └── vendors

首先有一个_config.yml负责提供主题级别的配置，可以在layout中通过theme.xxx的形式进行调用。 然后languages负责实现博客的i18N功能，如果博客没有多语言的需求，只需要实现一个default.yml即可。 其次是最为重要的layout文件夹，这个里面主要存放博客的结构，Hexo 引擎会使用指定的渲染引擎将layout文件渲染成HTML页面。 最后是source，把所有主题需要用到的资源，比如CSS，Fonts，JS等都存放到这个文件夹中。

如上code运行后会得到如下关键信息：

1
INFO  Hexo is running at http://localhost:4000/ .

这就表明你的博客网站已经在本地开启了服务，这时候你可以尝试用浏览器访问网址http://localhost:4000，如果能够正常访问你将会看到如下的初始博客页面。

Next主题配置

安装Next

Hexo可配置的主题特别多，本文选择了一个较为目前主流和简介的主题Next，本人的博客也是基于此主题构建的。感兴趣的可以多参考Next官方文档。

将命令行路径切到你电脑的博客目录下，然后执行下列命令：

1
git clone https://github.com/iissnan/hexo-theme-next themes/next.

如果以上行不通，可尝试手动下载安装主题。访问主题的 GitHub 页面下载ZIP文件（点击 Code 按钮，然后选择 Download ZIP），解压缩文件到你的 Hexo 项目中的 themes/next 目录中。

运行完后运行完成后进入对应的themes目录中即可发现next主题文件夹。这里着重注意两个配置文件，分别是站点配置文件和主题配置文件，他们的名称都是_config.yml，但是内容和路径都不一样，前者是在博客站点根目录下面，后者是在themes/next/子目录的主题文件夹中。

启动主题

在完成克隆下载后，打开站点配置文件，找到themes配置字段，设置为对应的主题就可以了，例如这里配置如下：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

可以使用hexo发布提交的三条经典命令来测试效果了：

1
2
3
hexo clean
hexo g
hexo d

打开本地的访问连接http://localhost:4000就可以看到修改后效果了。到此，已完成本地的基本框架的搭建和配置。

Hexo托管至Github

配置ssh key

由Hexo构建的博客，需要依赖服务器来24小时展示，所以这时候一个强大且可靠的静态网站托管服务就非常有必要了。Github Pages不仅免费且具有简化的部署流程，并且还支持自定义域名，可以轻松将自己的域名与 GitHub Pages 绑定，展示更加专业的博客网站。
然而我们必须要锁定对应的主机，并不是任何的电脑都能操作的。这时候就需要身份验证了，而这里使用的就是SSH keys。
在blog控制台的操作目录下，输入code备份和移除原来的SSH key设置:

1
2
3
4
5
6
cd ~/.ssh
ls
#此时会显示一些文件
mkdir key_backup
cp id_rsa* key_backup
rm id_rsa*

生成密钥

1
ssh-keygen -t rsa -C "youremail"

此操作在(/C/Users/用户名/.ssh/id_rsa)生成了密钥id_rsa.pub，利用任意文本编辑器将其打开，复制里面内容，进入 github ssh 设置界面将复制的内容粘贴到Key的输入框，Title的内容可以随意，点击Add SSH key按钮即可。验证是否成功:

1
ssh -T git@github.com

你将会得到如下的信息：

1
Hi yourname! You've successfully authenticated, but GitHub does not provide shell access.

说明ssh key配置成功。

配置个人信息

设置你的账号信息:

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

注意将上述的yourname和youremail换位自己的用户名和邮箱

配置Deployment

上文中提到的6个主要文件，我们打开其中的_config.yml，找到Deployment配置的地方，按照如下的内容进行修改，改成你自己的信息，主要是yourname：

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

安装部署命令deploy-git ，这样才能用命令部署到GitHub:

1
npm install hexo-deployer-git  --save

本地hexo/source中创建一个名为CNAME文件，不要后缀。写上你的域名。

1
www.jtli.com.cn

上边修改完毕以后，依次执行以下命令，编译提交本地hexo文件到GitHub:

1
2
3
hexo clean
hexo g
hexo d

hexo d会将生成的静态文件上传到github服务上。

部署自定义域名

在万网上购买域名，注册好后进入域名解析设置。

在github pages最新的ip地址页面里找到如下信息：

1
To create A records, point your apex domain to the IP addresses for GitHub Pages.

下面的4条ip为github pages的主机地址。
我添加时，最新github pages ip更新为：

1
2
3
4
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

将4个ip地址全部添加至域名解析的记录值中，其中记录类型选A，主机记录选择@。
再将如下ip记录值填入第五个解析中，其中记录类型选择CNAME,主机记录选择www。

1
yourname.github,io

添加好后，用阿里云的一级域名检测工具检测你的一级域名（如，jtli.com.cn）的ip是不是刚刚设置4个github pages ip。
用测你的二级域名（如www.jtli.com.cn）是不是指向你的github pages地址（如yourname.github.io）

在GitHub刚创建的仓库里点“Settings” -> “Pages”

把source改到master，并在custom domain处设置域名并保存，最好不要勾选“Enforce Https”，否则百度爬虫不能抓取网站页面。

最后打开你的域名，（www.jtli.com.cn），看到Hexo页面，表示设置成功。
至此，就已完成了博客的整个搭建与部署，现在开始使用吧！