较为优雅的静态博客之旅（一）：建站

发表于 更新于 分类于 Disqus： 本文字数： 6.1k

前言

本博客搭建于大一（2020）。当时，作为一个“萌新”，给自己的坎坎坷坷的博客搭建历程写下了些许文字，原名为《搭建个人博客 || 一、在本地搭好博客》。2023 年末，我回过头重新审查文章，重新编辑了一些说的不严谨的地方。

现在（2024 年 1 月），我自觉对使用博客有了一套自己的连贯的流程，故在原文基础上重新编辑完善如下。希望能给你一点帮助。🩷

介绍

基本情况：我们要做什么？

本文的目的是记录——或者说教授——搭建一个 Hexo 静态博客，配置主题（此处是 NexT）进行美化，并建立一个我认为较为合理的博客写作工作流的过程。

本文预设的阅读对象是对本文提到的一系列工具、网站、平台（包括 Github）都不甚了解的单纯新大一，亦即曾经的自己。

基于上面的原因，我会花很长的篇幅阐述一些较为基础的概念，对于非预设对象以外的读者，可能会略显冗长。确实如此，我写起来也是这样的感受，然而，一想到大一配此博客时知其然而不知其所以然的情况，我认为进行详细的讲解依然是有必要的。因为很多东西东西并不仅仅是适用于此，而是可以扩展到更广泛的层面，并有益于学习成长的。不过，我会将每一部分需要做的操作写在最开头，这样，如果你已经理解了有关概念，就可以通过侧边栏直接跳到下一届了。

本博客与本博客教程的结果，是一个托管于 Github Pages，基于 Hexo 博客引擎，NexT 主题的静态博客网，可以使用包括 VSCode 在内的任意 Markdown 编辑器进行写作。

本文的第一版，主要参考对象是 @CodeSheep 的 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo_哔哩哔哩_bilibili。这篇视频存在一定谬误，并且时间已经比较久了（2019），但是总体上对小白是有益的，并且视频可能对一些操作展现得更加清晰。

但是可以不难理解，视频的信息传送速度必然是比文字低的。因此视频并不应该一直是你的主要学习方式。

动机：为什么要选择这种方案？

  1. 为什么要搭建自己的博客？我认为有以下几点原因：

    1. 自己的网站，很酷！
    2. 总结，学习，回忆：世界上的知识太多了，很难保证做过、学过的东西你就能永远记得，如果有个博客可以辅助你有朝一日重新上手，或者回忆自己的过往点滴，那是一件很好的事。即博客可以作为你的日志、笔记、日记。
    3. 招聘亮点：如果你在简历上写上博客地址，面试官会去看你写了些什么。
    4. 学习：搭建博客的过程本身也是一种学习，其中的很多东西并不仅仅是搭建博客才能用。

  2. 什么是静态博客？ 静态博客即使用静态网页搭起来的博客，而静态网页即网页事先已经生成好了。

    基本上所有的网页都是由 HTML、CSS、JavaScript 组成。HTML 写清楚了网页的标题是什么，段落写了什么，哪些文字有指向哪儿的超链接，插入了什么图片视频等等；而 CSS 则将这些文字按合理的方式进行排版，组成丰富多样的美观界面；最后 JavaScript 则提供了一些交互和动态元素，例如，这个站点的一键返回顶部、一些博客网站会有的被鼠标吸引的粒子等等。换句话说，静态博客并不意味着博客毫无互动性。

    但是，所有的这些互动性都是已经写好的，网站的浏览者无法改变。反之，例如同样是 B 站首页，不同的人登录后看到的消息通知、推送视频乃至个性化装扮都不尽相同。这是因为网页是 B 站的服务器根据登录的用户不同返回了不同的内容，直接改变了网页信息。同时，用户在网页上也可以直接和 B 站服务器打交道，改变 B 站服务器数据库中（自己的）数据。这就是动态网页。而静态站点，浏览者无法改变网站数据库的任何信息。

  3. 为什么使用静态博客而非动态博客？

    1. 静态博客安全：你的数据不会因为各类漏洞被黑客劫持。实际上，所有的数据都有本地备份，因此你的数据更安全。
    2. 静态博客维护方便，维护一个动态博客很可能需要你有一定的数据库和网络基础，学习量大于静态博客。
    3. 静态博客廉价：很多网站都可以免费托管你的静态博客（即你实际上访问的托管网站的服务器），而动态网页需要你有服务器。
    4. 静态博客让你专注于文字本身：减少对网站的关注，就是增加对文字的关注，把重心放到博文——我们的初心上。
    5. 看看别人怎么说：静态博客的优点是什么 - V2EX。

  4. 什么是博客引擎（框架）？为什么使用 Hexo 搭建静态博客？ 我们前面提到了网站使用 HTML 等组成，但是我们使用的是更简单的一些格式来写作，例如 Markdown。因此我们需要一些工具将文章转换成对应的 HTML等。此外一些和写作不太相关但是又需要的功能，例如通过标签分类文章等等，也可以通过 Hexo 这样的博客引擎办到，这就让搭建博客变得轻松了。而说到 Hexo 的优势则在于：

    1. Hexo 用户众多：这既证明了 Hexo 是一个优秀的博客引擎，也代表你遇到问题更容易找到答案。
    2. Hexo 命令简单，一般来说，你只需要记住三个命令就可以畅快地写作了。
    3. Hexo 迁移方便，你可以使用 Markdown 写作文章，而 Markdown 是一个广受支持的写作格式，因此你的文章可以轻松迁移到其它博客引擎上。
    4. 我用的就是 Hexo。

  5. 什么是 Markdown，为什么要使用 Markdown？

    1. 某种意义上来说 Markdown 和 HTML 差不多，都是标记语言。也就是说，你写了一篇文章，可以用一些符号标明哪里是一级标题，哪里是二级标题，哪里是引用的别人的话等等。例如

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      # 一级标题
      随便写一段话。

      第二段再写一段话，并且引用 Linus 的名言

      > Fuck you, nVidia --Linus

      ## 二级标题

      其它的话。

      它的效果是：

      三级标题

      随便写一段话。

      第二段再写一段话，并且引用 Linus 的名言

      Fuck you, nVidia --Linus

      四级标题

      其它的话。

    2. Markdown 格式简单：这可以从上面的例子看出来。具体学习此处不赘述，互联网上有很多教程，而且你可能只需要 5 分钟就能基本掌握 Markdown 的主要写法。

    3. Markdown 用途广：从飞书云文档到 Notion 再到这个博客网站，很多地方都支持你使用 Markdown 进行写作。

    4. Markdown 让你专注写作：正如前面所说，花在其它地方的时间越少，花在文字上的时间就越多。Markdown 让你可以不用太关注排版之内的问题，你可以把注意力集中到内容本身上。

Hexo 的运行环境：Node.js 和 Git

我在 Windows 10 和 Windows 11 上运行 Hexo。不过，你使用什么系统并不重要，重要的是运行 Hexo 需要先安装下面两个软件：

  1. Node.js：下载安装 LTS （长期技术支持）版本即可。安装程序只需要全部保持默认即可。同时，Node.js 会附带安装 NPM。
  2. Git：下载最新版本并安装即可。

在你的终端（例如 PowerShell）等运行 node -v 和 git -v 查看 Node.js 的版本号和 git 的版本号。如果没有报错就说明安装成功了。

如果你仍然使用 Windows 10，非常建议你在应用商店下载 Windows Terminal 这个官方应用，它可以管理包括 PowerShell 和 CMD 在内的各种 Shell 。Shell 和终端严格来说不是一个概念，但是可以不做区分。

下面是一些对 Node.js 和 Git 的功能的介绍。

Node.js 和 NPM

官方定义中 Node.js 是一个开源、跨平台的 JavaScript 运行时环境，由 OpenJS 基金会维护和持有。这个话很抽象，这是因为你可能并不清楚什么叫“JavaScript 运行时环境”，也并不清楚这和 Hexo 有什么关系。我们可以（粗略地）理解：JavaScript 是一个编程语言，正如 C 语言一样，要 C 语言代码变成可以运行的程序需要有编译器，而要 JavaScript 代码能运行起来，我们就可以通过 Node.js。换言之，要运行 JS 就需要 Node.js 作为“环境”。这就是运行时环境的含义。而 Hexo 正是通过 JavaScript 编写的，因此其运行自然就需要 Node.js。

👉：

  1. 你可以在 GitHub 找到 hexojs/hexo 的源代码，界面右侧的 language 标明了其使用什么语言。其中 TypeScript 就是对类型检查更严格的 JavaScript。
  2. 浏览器也可以运行 JavaScript，但是很显然并没有那么适合去开发什么工具。

当你安装 Node.js 时，你还会自动安装一个叫 NPM 的软件，NPM 可以认为是 Node Package Manager 的缩写，即 Node.js 的（默认）包管理器。当开发者开始开发什么东西的时候，通常会依赖一些前人的代码成果，即所谓"包"。而这些包又有自己依赖的包，同时，被依赖的包也在不断的变化改进中，版本过高或者过低都未必有用……要解决这样问题，使用包管理器就很有用了。它不仅能从受维护的可靠渠道下载你需要的包的正确版本，同时还可以将其依赖的其它包一并下载下来并且版本符合需要，当你卸载包时，其依赖的包如果不需要了也会被卸载。而安装、卸载更新这些包都只需要你敲一行命令。

NPM 由 NPM 公司维护，你可以在他们的官网搜到你下载的那些包的信息。

默认情况下使用 NPM 下载很慢，这是因为 NPM 的源的服务器在海外。你可以给 NPM 设置代理，也可以更换 NPM 下载源（例如淘宝源）。如果你有代理，那么设置方法可以参考在终端中输入：

1
2
npm config set proxy http://127.0.0.1:7890
npm config set https-proxy http://127.0.0.1:7890

如果你由于各种原因无法使用代理，不仅可以换源为国内源，另一种解决办法是使用 cnpm，这是一个由阿里云推出的的 npm 客户端，可以说它和 npm 在下载方面的功能完全一致。使用 cnpm 的优点在于默认就是国内源进行下载，安装 cnmp 的具体方法可以自行搜索解决。由于我并没采用这种方法，此处就并不展开了。

👉：

  1. 当我们说从 NPM 源下载包时，实际上就是从 https://registry.npmjs.org/ 进行下载。当我们说换源时，实际上就是更改这个下载地址。
  2. NPM 并不是唯一的包管理器，还有其它的很多包管理器，例如 Yarn。

Git 和 GitHub

即使没有通过 Git，你也很有可能听说过 GitHub 这个所谓"程序员都会上"的网站。Git 和 GitHub 并没有什么必然联系，但是 GitHub 中的 Git 确实就是指的软件 Git。下面我们通过一个简单的例子了解 Git 的作用。

假设你正在和朋友开发一个软件，你写好了一个功能 A 后，继续开发新的功能，这个时候，你不由得希望可以 保存现在的项目状态 以防止后面开发出现问题时，连原本的功能 A 也用不了了。此时，朋友告知你，他添加了新的功能 B 还优化了功能 A ，问你“我们要怎么把 这台电脑上的修改同步到那台电脑上？”，同步了两台电脑的改动后，你们一起开发功能 C，不料代码出了 bug ，debug 时，你不由得想知道，现在的代码和之前的代码究竟有什么区别？

也就是说，Git 是一个开源的版本控制软件。正如 RPG 游戏中我们需要时不时存档，Git 可以在需要的时候存档文件，保证我们不会因为误操作而损失数据。同时，如果多个人一起开发，我们还可以区分究竟是谁改了哪一行文本。Git 既可以保证我们不会把好好的代码改坏，也可以轻松和别人合作修改同一个文件最后合并在一起，诸如此类的许多优点让它风靡全球。

如果我们需要和世界其它地方的人一起开发，那么我们就需要一个 仓库 存储代码，就好像通过网盘给别人分享文件一样。只不过这个 仓库 需要有一个版本控制软件，这样我们就可以查看它的历史版本，也可以一起协作修改，亦或者撤回曾经的修改。提供这种帮你在远端保管代码平台有很多，其中最有名的正是 GitHub，它使用 Git 来进行版本控制。

Git 和 GitHub 都是强大的工具，感到后悔或犹豫的时候就使用 Git 给代码 “存档” 吧。

关于 Git 和 GitHub 的介绍到此为止，我们现在关心的是：为什么 Hexo 的安装需要 Git ？

为此我们需要简单介绍一下 Hexo 的工作流程。

前面提到，当我们写好文章，Hexo 就可以根据它们生成对应的 HTML 等网页文件。但是如果文件只是在本地，那么就没有人可以访问它。你需要将它们上传到一个服务器，并且服务器会将你给它的文件组合在一起形成网页，这样我们通过网址访问就能看到美观的网页了。好在你不需要花钱购买自己的服务器或云服务器，很多平台可以免费将你上传的文件显示成网页提供访问。例如 GitHub 提供的 GitHub Pages。GitHub 将用户设定的特定仓库里的文件视为你上传的网页文件，然后使用 GitHub Pages 将它们作为网页呈现出来这样，你的博客就算上线了。

所以简单来说，Hexo 需要使用 Git，是因为它使用将生成的网页传到显示网页的仓库中去。

使用 Git 仓库存储托管的静态网页是一种很常见的做法，并不是只有 GitHub 这么做（虽然 GitHub 确实应该是最大的服务商）。例如，国内就有 Gitee 等同样使用 Git 管理托管的代码的平台。我们会在后面托管时细谈。

安装 Hexo 并建立站点

在安装完成 Node.js 后，我们就可以用包管理器 NPM 安装 Hexo 了。只需要打开终端，输入

1
npm install -g hexo-cli

  1. 这句话的意思是适用 NPM 全局安装 Hexo 的命令行接口（command line, cli）。即当我们输入（指定的）命令时，hexo-cli 可以调起 hexo 的对应功能。

  2. 推荐使用全局安装是因为可以不在乎输入命令时终端地址在哪。

打开终端，输入 hexo -v 就可以检查 Hexo 是否正常安装以及安装版本是多少了。

选择适合的地方建立文件夹，这个文件夹会存储博客的所有数据，因此建议使用清晰简洁的英文进行命名。

👉：

推荐为此文件夹创建快捷入口。例如 Windows 系统下，将此文件夹固定到 快速访问 或 开始菜单 中。

在这个空文件夹中打开终端，或者说将终端地址跳转到此文件夹，输入

1
hexo init

即对此文件夹进行初始设置（initialization）。Hexo 会自动下载创建一些必要的文件。当命令执行完毕，博客的搭建数据就算创建完成了。我们可以通过下面的命令检查一下

1
hexo server

这个命令会在本机启动一个服务程序，即把这台计算机自己看做服务器。这个时候我们可以在浏览器中通过访问网址 localhost：4000 访问 Hexo 这个"远端"的服务程序。

如果可以看到网页被加载出来，那么说明我们博客已经建立起来了。

将网站托管给远端服务器（Github Pages）

仅仅建立站点是不够的。因为我们希望我们可以 任意时候、任意地方、任意设备 都能访问我们的网站——就像任意一个正常的网站一样。而我们在上一步中启动的不过是一个本机局域网中服务器而已，既不能在其它设备上访问，也无法保证我们永不关机。而比起自己买一个服务器，更简单的方式是直接使用一些网站提供的免费静态网页托管服务。

在这里，我们推荐使用 GitHub 提供的 GitHub Pages。尽管存在其它的同类服务提供商，但是 GitHub 作为最大的代码托管网站，使用其服务更典型、主流。同时，Gitee 要求审核后再公开仓库的做法不仅麻烦，还让人不由得怀疑其后续是否存在其它更严格的各类手续要求。

当然，在国内存在一定的访问问题，这个需要自己想办法解决。

下面阐述其步骤：

  1. 首先，创建一个 GitHub 账号。

  2. 新建仓库（Repository）：每个 GitHub 账号有一个对应的 <Github 用户名>.github.io 域名，如果你希望部署到这个域名下，仓库名就同样设为 <Github 用户名>.github.io。或者你也可以任意取仓库名，这样你最终部署到域名将是 <Github 用户名>.github.io/<你的仓库名>。

  3. 回到博客目录启动终端，运行 npm install hexo-deployer-git 安装 Hexo-deployer-git。这是 Hexo 官方提供的部署工具，使用它可以一行命令把文件推送到远端。

  4. 打开博客根目录下的 _config.yml 文件（使用 VSCode 或任意其它编辑器均可），在最后粘贴并修改有关信息：

    1
    2
    3
    4
    deploy:  
    type: git  
    repo: <前面建立的仓库地址> # 例如 https://github.com/foobar/foobar.github.io  
    branch: [仓库分支] # 通常来说是main，也可以查看你的仓库进行确定

  5. 回到命令行，执行下列命令设定全局的 Git 用户名：

    1
    2
    git config --global user.email "你的名字或者昵称"  
    git config --global user.name "你的邮箱地址"

    我们提到 Git 是一个可以多人合作的版本控制软件，因此，Git 需要记录究竟是谁在提交，这样协作者（对于开源项目，可能是陌生人）就可以联系到你并直到如何称呼你。其中 --global 表示的是在此电脑上的所有 Git 仓库都默认使用这个设置。通常，我们只用一个用户名即可。

    推荐将用户名和邮件地址与 GitHub 账号保持一致。因为 GitHub 使用你 Git 中设置的邮箱来确定是哪个用户进行了提交。

  6. 执行 hexo deploy（deploy 可以简写为 d）命令推送到 GitHub 仓库，你还需要根据提示输入 GitHub 用户名和密码。Git 设置的“用户名”仅仅是一个标记而已。如果想要写入仓库，GitHub 显然需要检查你的权限。因此你需要在这里输入密码。

    每次都输入密码是一件麻烦事，你可以使用 令牌（Token） 或 SSH认证 来避免这件事。

  7. 当 hexo d 没有报错的成功执行完成，那么一切就算大功告成了。稍等片刻，GitHub 会通过 GitHub Action 服务将你传送的修改信息同步到网页。当看到分支下面的最后提交记录右侧显示绿色的对勾✔️时，就说明更改已经完成了。

    请注意，hexo d 会直接覆盖仓库里的所有文件，因此不要在这个仓库的这个分支放入任何其它数据。

  8. 访问网页，查看你的崭新上线的博客！

总结与下一步

总结一下，本节论述了一下操作。如何安装 Hexo 博客的两个前置软件：Node.js 和 Git，以及使用 NPM 安装 Hexo 和 Hexo 的部署插件，最后，使用命令在本地创建一个 Hexo 博客并将它通过 Git 推送到 GitHub。特别地，我们还介绍了一些加速 NPM 下载的方法。

尽管这些操作并不复杂，但是为了面向和大一的我一样完全没有任何知识的朋友，本文还较为详细的阐述了 Node.js 、NPM 、Git 、GitHub 等软件和网站作用，命令的含义等。因此篇幅拉得比较长。我认为这是有必要的：以本文原始参考对象为代表的众多博客文章和视频中，作者往往不愿或者不能对其中的细节进行阐述。当然，我们不应该寄希望于作者认为读者应该知道的知识总是为读者所知，一个合格的读者应该学会使用搜索引擎。但是，我们总是应该对小白留出更多的耐心，并传达出"知其然且知其所以然"的学习观念，我希望这篇文章做到了。

在下一节中，我们介绍如何简单地自定义博客，包括更换主题（以 NexT 为例），并对其进行详细地自定义。

拓展阅读

感谢与参考

  • 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo_哔哩哔哩_bilibili，这是本文的最初参考对象。尽管本文并非"无坑视频"（他甚至没有介绍安装 Git，没有 Git 是无法初始化博客的），使用 Vim 的做法对初学者也不算友好，但是依然对本站的建立起到了很大的帮助。
  • 文档 | Hexo：Hexo 的官方文档。尽管曾经备受吐槽，但是我认为现在【开始使用】部分的章节写得相当不错。如果嫌本文啰嗦，可以查阅 【开始使用】部分的《概述》、《建站》、《配置》和《命令》四个章节。此外，查阅官方文档绝大部分时候都会是最高效的问题解决方案。
  • 你还可以查阅其它搜索引擎上的文章，不过它们很有可能充满谬误（因为作者是刚刚建站的小白）或者时间久远，需要自行甄别。
  • 本站的建立还得到了 hawa130 的指导，欢迎访问他的博客：Hanwan Space。
  • 你还可以就具体问题询问搜索引擎和通用聊天 AI（如 ChatGPT 等）的意见。