很多时候我们会需要配置自己的博客，目前据我所知，市面上主要用的静态站点生成工具：Hugo 和 Hexo。虽然 Hugo 很快，但是个人认为 Hexo 已经发展的比较成熟，同时之前已经有一些相关的了解，遂选用 Hexo 来进行站点搭建。

在站点搭建的过程中，主要会涉及到以下几点。首先是 Hexo 的环境设置，其次是如何把生成的内容部署到服务器上（这里选用 Github），最后是如何让其他设备也能够连接。接下来我将主要围绕这三点来纪录此次实践过程。

Hexo 环境设置

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。（从官网拷贝过来的）

安装 Hexo

使用下面命令安装 Hexo.

1	npm install hexo-cli -g

NPM 的安装

要安装 npm 就需要了解 npm。这里 npm 全程是 Node Package Manager, 可以理解为是 Nodejs 的包管理工具。Nodejs 官网中如此介绍 Nodejs:

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

这里 Runtime 需要注意其和 C# 的 .Net 有一些不同。在 C# 的开发工具 .Net 中分为 .Net Runtime 和 .Net SDK，Runtime 只能运行编译好的 .dll 和 .exe，不能编译代码。而 SDK 则包含 Runtime 同时增加了编译器 (csc) 和构建工具 (dotnet build)。但是在 Nodejs 里面 Runtime 是都可以做的，这是因为 Nodejs 是一种解释性语言( Interpreted language )。其和需要预先编译的编译语言( Compiled language )不一样，解释性语言只需要将代码一行一行执行，不会预先编译（代表语言：Python）。

那么安装 npm 意味着我们需要安装 nodejs，就像安装 pip 需要安装 python 一样。

安装 nodejs 我们需要 nvm （Node Version Manager），也就是版本管理器，其可以管理 Nodejs 的 Version，其思路和 uv，conda 管理 python 版本差不多。

相信通过上述了解，关于如何安装 npm 就完全清晰了，具体的代码就不在这里贴出。

创建 Hexo 项目代码

建站也十分简单，在命令行里面输入：

1	hexo init <your_project_name>

详细内容可以看官方文档。

Hexo 基本指令

一般而言，Hexo 的博客内容一般在 source 文件夹里面。这里主要给出常用的指令，包含创建新博客、清理缓存、生成静态文件、启动服务器、部署网站。更多的指令请看官方文档

创建 Hexo 博客：

1	hexo new "<your post name>"

清理缓存：

1	hexo clean

生成静态文件：

1
2
3

hexo generate
# or
hexo g

启动服务器：

1
2
3

hexo server 
# or 
hexo s

部署网站：

1
2
3

hexo deploy
# or
hexo d

Hexo 主题

配置一个好的 Hexo 主题可以让网站看起来更好看。比较流行的主题（我了解到的）有 NexT 和 Butterfly，这里选用 Butterfly （也是听说 Butterfly 配置一下就比较好看？）

一般而言，你需要将主题 clone 到项目目录的 themes 文件夹内（或者使用 npm 在项目文件夹下下载主题），然后在 _config.yml 文件里面的 theme 添加对应的主题名字。（这些在各个主题的文档里面都会说明的）

运行！

在配置好了之后，我们可以在命令行里面使用：

1
2
3

hexo clean
hexo g
hexo s

点击可以就可以看到内容了。

首页内容（这里我修改了 _config.yml 中的一些配置）

图片设置

通常而言，要想加载图片有两种方法，一种是在 source 文件夹下面放一个文件夹用来专门存储图片，但是这样有一个不好的点就是当博客很多的时候图片不好管理，所以我们可以用另一种方法，也就是每一个博客，就在对应博客对应的文件夹下面建一个同名文件夹用来存图。具体方法如下：

安装插件 hexo-render-marked

1 2	npm install hexo-render-marked # 必须在项目文件夹下面安装 npm list # 查看是否安装完成

这里解释一下为什么需要在项目文件夹下面安装，因为没有用 -g 全局命令。用 -g 就会把下载的包放到全局位置（windows 一般在 %AppData%/npm/node_modules , macOS/Linux 一般在 /usr/local/lib/node_modules），而不用的话就是在执行命令的对应文件夹下面的 node_modules。

之后我们在 _config.yml 里面设置：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

部署到 Github

在设置好内容之后，我们肯定希望能够被更多人看见，但是奈何云服务器实在是太贵了，而且在国内申请域名需要购买域名+实名审核+备案，这一套流程实在是太麻烦了。所以我们这里使用 Github Pages 来进行托管。

按照 Github Pages 的说法，有两类 Github Pages，一类是用来介绍你自己的网站，这类网站一个账号只能有一个（仓库名就叫 <username>.github.io），还有一类就是项目网站，这个一般给科研人员用来托管展示自己项目的网站，这一类可以有很多个，一般是叫（<username>.github.io/<your_project>）。

不管怎么样，这里部署哪个主要看你。我用的是第二类，结合之后的 Netlify，具体看后面的章节。

Hexo 的设置

为了能够直接部署，需要在 _config.yml 中设置，具体见官方文档。

Github 的设置

创建一个仓库，先把仓库链接给到 hexo 设置里面，然后 hexo clean; hexo d 部署。

部署完成之后，在 Settings 中，左侧的 Pages 中，在 Build and depolyment 中如下设置，branch 中按照在 Hexo 中的设置设置成自己的就行。

过一段时间应该就可以看到链接了。之后就可以在本地每次设置好了就直接 hexo clean; hexo d 就可以了。

Netlify 设置

上面说的会有一个很大的问题，就是国内访问 Github 不是很方便。为了解决这个问题，通常需要将网站搭建在国内服务器，然后注册自己的域名，但是这一套很麻烦，所以我使用 Netlify 来解决这个问题。

Netlify 是一个提供静态资源网络托管的综合平台，提供CI服务，能够将托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等代码自动编译并生成静态网站。

Netlify 可以通过 Github 登录，然后托管 Github 上的网页，而且会有自己的域名，这个域名可以在国内直连。具体的操作这里就不说了。（TIPS：你在这里托管的 Github 对应的仓库可以是 private 的）

如果你有自己的域名（比如你在阿里云那里买了一个），然后你不想要国内的备案，想要修改 DNS）。就要到 Netlify 的 Project 对应的 Domain Management 中，添加自己的域名，然后在 Options 里面得到 Netlify 对应的 DNS，最后到你购买域名的地方修改 DNS 为 Netlify 的就可以了（这里需要等待一段时间来修改上游的服务器）