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

文章摘要

GPT 4o

前言

现在有越来越多的平台支持用户分享自己创作的文章，常见的就有知乎、微信公众号、简书、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 包安装工具直接安装：

brew install nvm

接下来设置环境变量：

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 一同安装的包管理工具，在国内可以使用淘宝镜像提升下载速度：

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

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

Git

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

Hexo

一行命令即可安装 Hexo：

cnpm install hexo-cli -g

使用 Hexo

初始化

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

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 来预览，打开网站即可预览：

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

新建文章

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

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：

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 报文之后就可以断开连接了。当客户端一段时间没收到回复，就知道服务端已经关闭，所以自己也可以关闭连接了。