快速拥有自己的个人网站—— Hexo 与 Netlify 的助力

前言

现在有越来越多的平台支持用户分享自己创作的文章，常见的就有知乎、微信公众号、简书、CSDN 等，这些平台为你的内容带来流量的同时，也要你承担相应的限制，比如 CSDN 就会出现各种广告，微信公众号就不能添加外部链接等等。总的来说还是不自由，内容创作者只是把内容托管到了它们的平台上面而已。尽管博客在中国流行的时间还是在十几年前，这个时间点搭建一个博客甚至还有点逆时代潮流的感觉，但是也正是自己的站点，能给予自己更多的自由，更多的表达空间，尤其是程序员、摄影师等，更需要一个展示自己内容的空间。

Hexo

什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo 博客本质上是一个 CMS(Content Management System)，内容管理系统，从官网的解释里面可以看到，这是一个静态的博客，也就是说，写作的流程是这样的：

用 Markdown 写作
使用 Hexo 生成静态页面
使用 Hexo 部署静态页面

简而言之，Hexo 是一个静态页面生成与部署的工具。静态网站的优势就是因为不需要查询数据库，响应速度快且安全性高。至于 Markdown 的语法，在之前的文章《Markdown 与 LaTeX》中写过，不再赘述。

安装 Hexo

安装 Hexo 非常简单，只需要以下应用程序即可：

Node.js
Git

Node.js

简单地说，Node.js 就是运行在服务端的 JavaScript，可以直接从官网下载 Node.js，如果之后的 Hexo 安装出现了问题，可能是因为 Node.js 版本太新的原因造成的，这个时候换一个更低版本的 Node.js 即可。为了方便管理 Node.js 的版本，建议使用 nvm 进行管理，如果嫌麻烦也可以直接跳过这一部分从官网安装 Node.js：

Mac

Mac 用户可以使用 Homebrew 包安装工具直接安装：

1	brew install nvm

接下来设置环境变量：

1
2
3

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion

Windows

Windows 用户可以从 nvm-windows 这个仓库的 Release 处下载安装包。

nvm 的使用

nvm ls # 查看已安装的版本
nvm ls-remote # 查看可安装的版本
nvm install 8.0.0 # 安装指定版本
nvm use 8.0 # 切换指定版本

npm

npm 是随 Node.js 一同安装的包管理工具，在国内可以使用淘宝镜像提升下载速度：

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用 cnpm 从淘宝镜像来安装模块，cnpm 的同步频率目前为 10 分钟一次以保证尽量与官方服务同步，同时也可以照常使用 npm 从官方同步。

Git

Git 的安装及使用在之前的文章《程序员的时间机器 —— Git 与 GitHub 的使用》提过了，鉴于篇幅有限，这里不再赘述，可以查看之前的文章。

Hexo

一行命令即可安装 Hexo：

1	cnpm install hexo-cli -g

使用 Hexo

初始化

安装完 Hexo 后，可以使用以下命令创建所需要的文件：

1	hexo init <folder>

上面的 <folder> 由自己的文件夹替换，例如：

可以看到新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── .gitignore
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

_config.yml：网站的配置信息，您可以在此配置大部分的参数。
.gitignore：告诉 Git 哪些文件不需要添加到版本管理中。
node_modules：项目所依赖的模块。
package.json：记录整个项目中的一些基础信息。
package-lock.json：确定当前安装包的依赖，以便后续重新安装的时候生成相同的依赖。
scaffolds：模板文件夹，当您新建文章时，Hexo 会根据 scaffold 来建立文件，Hexo 的模板是指在新建的 Markdown 文件中默认填充的内容。例如，如果您修改 scaffold/post.md 中的 Front-matter 内容，那么每次新建一篇文章时都会包含这个修改。
source：资源文件夹是存放用户资源的地方，除 _post 文件夹之外，开头命名为 _ (下划线) 的文件/文件夹和隐藏的文件会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题文件夹。Hexo 会根据主题来生成静态页面。

预览

这个时候你已经可以使用 hexo server 或者简写为 hexo s 来预览，打开网站即可预览：

此时一个博客已经搭完了。

新建文章

我们可以使用命令行来创建文章：

1	hexo new <title>

也可以在 Hexo 主目录下 source => _posts 新建以 .md 为后缀的文章进行手动创建。

这里提一下 Front-matter，这是文件最上方以 - - - 分割的区域，用于指定个别文章的变量，举例来说：

参数	描述	默认值
`layout`	布局	post
`title`	标题	文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章网址
`thumbnail`	缩略图地址
`toc`	显示 TOC 按钮	true
`comment`	显示评论	true
`notag`	不生成标签按钮	false
`top`	置顶	false
`mathJax`	启用 Mathjax	false

只有文章支持分类和标签，您可以在 Front-matter 中设置。在 Hexo 中分类和标签有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar，Foo，而标签没有顺序和层次。前面也说过，我们可以在 scaffolds 模板文件夹中定义这些内容。

生成静态文件

我们可以使用 hexo generate 或简写为 hexo -g 来生成这些静态文件，此时会在根目录下新建一个 public 的文件夹：

部署文件

上一步我们生成了静态文件，这一步要做的就是部署这些文件，那这些文件需要部署到哪里去呢？我们可以使用 GitHub 来托管我们的项目。首先新建一个 Repo，设置为 Public，名称可以任意，自己喜欢就好（如果使用 GitHub 的域名必须设置 Public 否则会打不开，图片上设置 Private 是为了下文隐藏这个 Repo，如果觉得第二部分麻烦这一步必须设置为 Public）：

接下来就要把 Hexo 生成的文件部署到 GitHub 上去，首先打开站点配置文件 _config.yml，修改里面的内容为如下类似(注意冒号后面有一个空格)：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/VXenomac/art.git
  branch: master

首先安装 deploy-git：

1	cnpm install hexo-deployer-git --save

接下来使用 hexo deploy 或简写为 hexo d 进行部署：

这个时候可以看到 GitHub 的仓库里面已经有内容了：

接下来我们在这个仓库的 Settings 中找到 GitHub Pages 中选择 master 分支即可通过生成的连接进行访问了。这个时候如果把仓库设置为私有，那么便无法访问，之前要把仓库设置为 Public 的原因就是因为这个。

Hexo 主题

Hexo 提供了许许多多好看的主题，这些主题内也集成了许许多多的功能，常见的有评论、搜索、RSS、数据统计与分析、代码高亮等等。不同的主题有不同的布局跟功能，这些都是由开发者开发并贡献的，当然你也可以自己开发，一般都会有如何使用该主题的使用文档。下面挑了几个我觉得比较好看的主题演示：

Netlify

什么是 Netlify？

Netlify 是一个提供静态资源托管的网络平台，它的功能和上面的 GitHub Pages 一样，但是功能比 GitHub Pages 多一些，速度也会快一些，因为它会把网站静态网站部署到 CDN 上，还可以使用 HTTPS，当然现在 GitHub Pages 也支持 HTTPS。如果想让 GitHub 上的仓库变得私有且依旧能够访问，就需要使用 Netlify。

部署到 Netlify 上

使用 GitHub 账号登录：

登录之后点击醒目的绿色的 New site fomr Git 按钮来新建站点并选取刚刚创建的仓库：

默认可以不填，如果有其他需求，可以填写自己的自动部署命令等，点击部署：

点击完 Deploy site 之后，Netlify 会自动构建并发布你的网站内容，最重要的是，Netlify 还支持分支部署和部署预览，这样可以提高开发效率，降低发布风险和成本。当我还没有打完这行字，Netlify 已经完成网站的发布了，它会提供一个由随机字符串组成且以 .netlify.com 为后缀结尾的网站供你访问，如果你还没有购买域名，可以点击 Domain settings 进行域名的美化，现在把 GitHub 上面的仓库设置为私有，依然可以正常访问。

个性化

为了更好地理解域名、DNS 等内容首先抛出一个技术向的问题（当然可以跳过不看），这个问题也经常是面试问题：当你在浏览器中输入 URL（Uniform Resource Locator）回车之后发生了什么？比如我在浏览器中输入了 https://xyzlab.ai/index.html ，根据 URI 标准，它由以下几个部分组成：

传输协议(https)
域名(xyzlab.ai)
路径(/index.html)

根据域名获取服务器的 IP 地址，也称 DNS 解析

DNS 就像一本很大的表格，记录了域名所对应的 IP 地址，首先浏览器中会有一个 DNS 缓存器，会记录我们之前一段时间访问记录中域名指向的 IP 地址，浏览器会现在自己的 DNS 魂村中查找这个域名，如果浏览器缓存中不存在，则会去系统缓存中查找，如果没有会去到路由器 DNS 缓存中查找目标域名与 IP 的映射，如果没有才会去 ISP 的 DNS 查找。
浏览器向服务器的 IP 端口号发起 TCP 三次握手建立连接
- 先从客户端，这里指浏览器向服务端发送连接请求报文并进入 SYN_SENT 状态，让服务器知道我要发起连接，等待服务器确认
- 等到服务器收到 SYN 包接受连接后回复一个 SYN + ACK 包并为这次连接分配资源，表示服务器知道你要发送数据，并且准备好接收数据，此时服务器进入 SYN_RECV 状态；
- 客户端接收到 SYN + ACK 包后也向服务端发送确认包 ACK 并分配资源，当 ACK 包发送完毕之后，客户端与服务端进入 ESTABLISHED 状态，完成三次握手，这样 TCP 连接就建立了。
浏览器向服务器发送 HTTP 请求报文
服务器根据 HTTP 请求报文的参数找到请求的资源
服务器给浏览器发送 HTTP 响应报文，把资源返回给客户端

常用的状态码：
- 200：OK 成功
- 302：Found 临时重定向
- 400：Bad Request 请求报文中存在语法错误
- 403：Forbidden 访问被拒绝
- 404：Not Found 没找到
- 500：Internal Server Error 服务器内部错误
- 503：Service Unavailable 服务器超负载或在维护
浏览器渲染页面
通过四次挥手释放 TCP 连接
- 客户端发送中断连接请求，也就是发送 FIN 结束报文。这个时候客户端就进入了 FIN_WAIT 状态，等待服务端的 FIN 报文。
- 服务端发送 ACK 报文，服务端进入关闭状态，此时服务端会向上层应用发送通知，表明客户端数据已经发送完毕，是否需要发送数据给客户端了。
- 当服务端确定数据发送完毕之后，就可以向客户端发送 FIN 报文了。
- 客户端接收到 FIN 报文之后，知道服务端要准备断开连接了，客户端给服务端发送 ACK 报文之后进入 TIME_WAIT 状态，告诉服务端可以断开连接了，如果服务端没有收到 ACK 报文就重传，当服务端收到 ACK 报文之后就可以断开连接了。当客户端一段时间没收到回复，就知道服务端已经关闭，所以自己也可以关闭连接了。