本文适合对建设网站有兴趣的读者。例如，你想要在互联网上留下你制作的网页，想要在互联网上自由地表达你自己的言论，又想避免封号禁言之苦，那么恭喜你，这个tag就是给你而设的😁。

对读者的要求

你需要的基础知识 （非必需）

  • 如何安装一个网页服务器，并进行配置（nginx、apache或是自己用C语言写一个都行）
  • Git的使用 跟wakaba酱一起学
  • 命令行的使用（包括Linux命令、ssh的使用、ssh协议传输文件等等）
  • 网页制作 跟wakaba酱一起学
  • MarkDown语言基础
  • 注册域名
  • 使用vscode (下载地址https://code.visualstudio.com ，请勿下载任何收费版！)

以上技能都会或者愿意学的话，恭喜你，你适合继续阅读。不会的话，也没关系，我也不精通😁，今后笔者 可能 会在博客更新保姆级教程。

不适合的读者人群

  • 需要在淘宝上请人安装steam，结果仍然无法正确安装，最后还要找卖家算账的。
  • 认为网络对于居民来说，只需要用来读书看报就可以了，其余网站或功能都应该封禁的议员或人大代表。
  • 对如何搭建本站不感兴趣，只想快速手搓一个淘宝网站。
  • 只知道单击“下一步”，至于使用apt install或者如下命令安装软件，太麻烦了，不想折腾的读者
1
2
3
./configure
make
make install
  • 爱当脑残粉。认为某人（包括其他技术博主、我本人、其他网友以及某种权威）说的是对的，一定要照他/她说的做，必须一字不差地执行（有些内容可以帮助你避坑，少走弯路，但我希望你多踩坑，熟悉其中的原理）。
    比起当乖宝宝，你当个杠精我更可能欣赏你。

搭建Hexo以后，可以变通地使用宝塔面板、Cloudflare Pages、其他网页托管服务部署网站。

对电脑的要求

对本机的要求

读者可能有疑问：“我这电脑（自从上次重装以来）用得太久了，有些软件可能已经装过了，有些软件可能缺失了，该怎么办？”所以请先阅读本节。假设用的都是Windows。
此外，还需要安装vscode，上文已提过。也可以使用NotePad++等一些会自动规范代码格式的软件来进行配置。只要编辑器会帮你找到另一半的括号在哪里，以及代码所用的标点符号是否符合全角半角就可以了。
不了解工作方法的新人，或者非常自信且强悍的高手，可能会使用Windows自带的“记事本”来修改代码和配置文件，对此我表示尊重祝福🙏。

安装Node.js

首先确认以前是否装过，打开命令行。输入node -v
有类似以下输出，跟官网核对版本后即可跳过本节。

1
2
3
$ node -v
v22.13.0
$

如果没有以上输出，那么，进入 https://nodejs.org 下载最新版进行安装。或者进入Windows的C:\Program Files\寻找是否有nodejs文件夹，里面是否有nodejs文件。如果有，那么配置环境变量。

配置环境变量

右击“此电脑”，单击“高级系统设置”

进入“环境变量”,双击查看上下两个Path变量，把node.exe所处的目录的路径给添加进去就可以了。

安装Git

方法同上。在见到本教程之前，很可能你有安装过Git，或者跟wakaba酱一起安装了source tree，里面自带了git。如果git -v不能正确显示git的版本，还是找到git的安装目录，添加进环境变量PATH。不再赘述。

建站

接下来是创立本站的步骤

安装Hexo

Hexo是个实用的软件，所以可以全局安装

1
$ npm install -g hexo-cli

在操作过程中自行判断报错和各种信息。

部署网站

本文假设我们的网站项目为 test 。在你要建站的位置，打开命令行。我推荐下载Windows商店里的Windows Terminal。画面比PowerShell和cmd好看多了。

该软件的配置不再赘述，根据你自己的喜好来。
通过cd命令或者右击（Shift+右击）打开命令行，进入目录后。输入hexo init test，即可创建博客文件。成功时输出如下：

1
2
3
4
5
$ hexo init test
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!
$

如果不需要此博客了，或者要推倒重来，需要删除，直接删除文件夹即可逆转回hexo init之前的状态。可谓是非常的绿色。
此时，你的第一个博客已搭建完成。你可以在博客目录内输入hexo server立即观看效果

1
2
3
4
5
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

这个输出说明了Hexo在本机TCP 4000端口运行了一个http服务器，你在你的电脑上打开浏览器，输入 http://localhost:4000 即可访问你自己的网站。

该网站包含了Hello World页面，以及一些在该主题下的基本操作。这对我们来说远远不够，因为这样的网站发布出去，你的读者就会认为你的能力大概就如此了（虽然已经超越了大多数的用户）。首先，第一眼，就知道你是用Hexo搭建的个人静态博客（但至少比WordPress操作要更装B，安装软件不用图形化界面，系统资源消耗更少，底层原理也更低级，无数据库，无后端😁）。即使你改了标题，看这样式和背景图片也猜得到你是怎么搭建的。而且，你这页面如果发布出去，大概只是几万人当中的一分子，默认主题，给人一种网站跑路了的感觉。

安装主题（拓展）

之所以没急着开始写作，是因为主题关系到你文章之间的分类结构。有的主题着重写个人简历，有的主题像我一样用来记录点滴以备不时之需。
对于主题，不必自己制作一个原创的，原创还需要积累和沉淀。在官网找一个看上去狂拽酷炫屌炸天的 https://hexo.io/themes/ 。我的主题是这个 https://github.com/fan-lv/Fan 。作者已经2年没有维护了。你不一定要使用该主题，去找你自己喜欢的，但是本文仍然有一定的参考意义。
首先，cd test，再输入以下指令下载主题的源代码（请手动输入自己主题的仓库地址）

1
2
3
4
5
6
7
8
9
$ git clone https://github.com/fan-lv/Fan.git themes/Fan
Cloning into 'themes/Fan'...
remote: Enumerating objects: 512, done.
remote: Counting objects: 100% (216/216), done.
remote: Compressing objects: 100% (103/103), done.
remote: Total 512 (delta 149), reused 160 (delta 111), pack-reused 296 (from 1)
Receiving objects: 100% (512/512), 2.63 MiB | 4.56 MiB/s, done.
Resolving deltas: 100% (300/300), done.
$

下载完主题后，首先要安装主题的依赖。根据刚才的实测，每一个Hexo实例都必须安装一遍。
安装依赖的命令如下

1
npm install --save hexo-renderer-pug hexo-renderer-stylus

在根目录的 _config.yml,打开编辑。在里面可以设置网站的名字和作者

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

找到主题，把landscape修改为Fan

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

此外，还必须打开 themes/Fan/_config.yml进行修改，禁用搜索和评论。否则，由于未配置评论和algolia搜索的API，会导致红字报错，网站也无法访问。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# algolia 搜索
algolia_search:
  enable: false
  hits:
    per_page: 10

# 本地搜索
local_search:
  enable: false

# 复制代码
post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# 评论
comments:
  enable: false
  # 使用哪种评论插件["gitment", "valine","twikoo"]
  type: "valine"

接下来输入hexo s即可预览效果
此时会发现一些主题作者没有在文档中说明的坑。单击“标签”和”分类”，以及“关于”，你会发现网页直接显示Cannot GET /tags/这种信息，显然这样的网站时不能发布的。这个坑，我在准备更换主题时，在其他主题的文档发现解决的灵感，接下来我会在下一个章节讲解。

写作

根据官方文档，执行

1
$ hexo new [layout] <title>

即可新建文章。layout是文章的布局，总共有3种：

  1. post
  2. page
  3. draft
    post很简单，就是我现在正在写的文章类型。draft也很好理解，就是post的草稿，使用hexo publish即可发布为post。
    问题来了，page又是什么呢？经过踩坑，发现，如果你使用hexo new page --path about/me "About me"，实际渲染后，无法显示任何新的页面。其实，page布局的用途，即是生成上一章单击菜单中的“标签”、“分类”和“关于”的页面。
    将hexo new page "tags"生成的文件夹中的index.md文件，内容改为
1
2
title: All tags
type: "tags"

hexo new page "categories"生成的文件改为

1
2
title: All tags
type: "categories"

“关于”也用同样方法生成。

脚手架

每次你使用hexo new生成新文章时，hexo都会从根目录的scaffolds内的模板生成新的文件，你再使用新生成的文件，使用Markdown语言进行新的写作。我建议对scaffolds进行修改，加上

1
2
tags:
categories:

以便对文章进行归类

语法

Hexo采用Markdown语言进行写作。Markdown语言为GitHub写文档时使用的语言，相信在座的各位比我都懂，在此不班门弄斧了，丢下一个链接 https://markdown.com.cn/ 给新人学习去吧。
最值得注意的点就是代码块要采用的，是反引号`,而不是单引号’，反引号位于键盘左上角，按Shift会输入~。

写作过程中，你可以在博客根目录的命令行内输入hexo server，随时查看博客的渲染情况。每保存一次，它就渲染一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ hexo s
INFO  Validating config
INFO  Start processing
[Browsersync] Access URLs:
 ----------------------------------
          UI: http://localhost:3001
 ----------------------------------
 UI External: http://localhost:3001
 ----------------------------------
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...

以上节选自本文写作过程中，终端窗口的输出

插件的安装

algolia搜索和评论已在作者文档中。具体要强调几点踩坑事项：

  • 要将你的Admin API Key导入到你的环境变量中

    否则无法使用hexo algolia命令
  • HTTP Referers必须设为例如*blog.dzm.pp.ua*和*localhost*，否则Algolia搜索将无法使用。
  • 评论gitmen似乎已经无法使用，作者的博客也是如此。建议使用valine。具体如何审核评论，目前似乎只能让大家自由地评论了。valine的原理似乎是将评论存储在valine的服务器上。静态博客是没有后端的。

本小节就不放图了，避免泄露我的api key

长毛象作者署名

长毛象近两年出了个新功能，就是验证网站署名。用语言讲不清楚，直接上图

假如胡锡进在他的每篇文章加入如下api元素

1
<meta name="fediverse:creator" content="@[email protected]">

那么每篇文章的分享下面就会多出一个“老🦊以为”。
然而，经过我的踩坑，该元素仅放在<head></head>里面才有效。要修改每个网页的head元素，需要进入（以我主题为例，其他主题自行搜索）hexo博客根目录/themes/Fan/layout/includes/layout.pug，里面可以找到渲染所有网页元素的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
head
        meta(charset='UTF-8')
        meta(http-equiv="X-UA-Compatible" content="IE=edge")
        meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1")
        meta(name="description" content=pageDescription)
        meta(name="keywords" content=pageKeywords)
        meta(name="author" content=pageAuthor)
        meta(name="copyright" content=pageCopyright)
        meta(name="fediverse:creator" content="@[email protected]")
        title= pageTitle
        if theme.stylesheets !== undefined && theme.stylesheets.length > 0
            //- stylesheets list from config.yml
            each url in theme.stylesheets
                link(rel='stylesheet', href=url_for(url))
        link(rel="icon", href=url_for(theme.favicon))
        include ./head.pug
        include ./config.pug

（以上代码名称仅为高亮而输入）
找到head，加入如上代码meta(name="fediverse:creator" content="@[email protected]")，包含长毛象实例所指示的要素，实际渲染时会在head内生成它所要求的元素。

以上所有插件可以在本地hexo server试验中产生效果。但是，长毛象署名只有部署后才能确认。

部署

Hexo的部署，也包括本站在内，不应拘泥于一种形式。常见的有git一键部署。最简单、最纯粹的方法，直接

1
2
$ hexo clean
$ hexo g

然后将根目录下的/public里面所有文件拷到网页服务器的根目录文件夹内。这种情况下，完全无需重启nginx。如果非要装一下，那么就用这个插件也是不错的😎 https://github.com/HakurouKen/hexo-deployer-shell 。

Git的使用

本站采用GitHub一键部署。官方文档也已经详细说明了（首先不要忘记装插件，即使忘记了，报错以后你应该也会想起来的）。其中，配置文件_config.yml下，以下内容是必须的

1
2
3
deploy:
  type: git
  repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io

在部署前应该先在GitHub建立空白repo。
branch和message不输入则自动取默认值。你并不需要配置token。你的repo值可以写成两种形式：

  • https://github.com/dongzhimin-xz/dongzhimin-xz.github.io.git
    这种形式最适合小白。如果在ssh服务器或无GUI操作系统使用这种形式的GitHub仓库URL，则无法推送代码。因为，现在github已经禁止了用户名密码推送代码了。
    你在用这种方式部署时，电脑会弹出一个浏览器窗口，让你登录GitHub账号，可能还需要双因素认证或passkey登录。我使用密码管理器，这还是挺方便的。
  • [email protected]:dongzhimin-xz/dongzhimin-xz.github.io.git
    这种形式，适合ssh服务器和无GUI操作系统推送代码。这种情况下，你需要使用ssh密钥。生成密钥的步骤如下（最好按照我的建议来）
1
2
3
4
$ ssh-keygen -f $env:USERPROFILE/.ssh/test
Generating public/private ed25519 key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

其中test改为其他文件名，强烈建议不要使用默认文件名，否则可能会将该电脑内已有的私钥覆盖！
然后进入你的用户目录，进入该目录下的.ssh文件夹，用记事本或vscode（其他你用得顺手的文本编辑器）打开config文件。如果没有，请新建文本文件，并改为此名称。

给小白的小知识：文本文件是由ASCII码或UTF-8构成的二进制文件，跟.doc和.wps这种妖艳贱货不一样。
在该文件内输入：

1
2
3
Host github.com
    HostName github.com
    IdentityFile ~/.ssh/test

其中~/.ssh/test为你私钥的路径。第1行的github.com为主机名，如果你有多个GitHub账号，建议改为其他好记的名字，我的为dongzhimin.github.com。第2行的HostName为目标主机名，一般为目标的域名或IP地址（登录暗网的服务器除外，但也是一样的道理）
保存该文件后，还需要将公钥放入GitHub服务器。

GitHub的使用

  1. 在 https://github.com 登录你的账号，单击你右上角的头像，再选择Settings，然后再左侧选择SSH and GPG keys。
    如果你还是不会以上步骤，请点击该链接直接进入此页面 https://github.com/settings/keys 。
  2. 单击New SSH key。
  3. 在Title输入好记的备注名称，Key type选择Authentication Key。
  4. 用记事本打开刚才生成的test.pub文件（不要打开test文件，这是私钥，如果泄露，请立即删除，并回到上文ssh-keygen那一步😅），全选复制，粘贴到GitHub界面的Key栏，再单击Add SSH key。

使用如下命令进行测试：

1
2
3
$ ssh -T [email protected]
Enter passphrase for key '~/.ssh/id_github_dongzhimin':
Hi dongzhimin-xz! You've successfully authenticated, but GitHub does not provide shell access.

有如上第3行输出即为密钥有效。

做完以上准备后，在根目录执行

1
$ hexo deploy

一般来说应该成功了，但是我的主题又有一坑，最后会输出如下错误信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Writing objects: 100% (59/59), 2.58 MiB | 1.25 MiB/s, done.
Total 59 (delta 5), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (5/5), done.
remote: error: GH013: Repository rule violations found for refs/heads/master.
remote:
remote: - GITHUB PUSH PROTECTION
remote:   —————————————————————————————————————————
remote:     Resolve the following violations before pushing again
remote:
remote:     - Push cannot contain secrets
remote:
remote:
remote:      (?) Learn how to resolve a blocked push
remote:      https://docs.github.com/code-security/secret-scanning/working-with-secret-scanning-and-push-protection/working-with-push-protection-from-the-command-line#resolving-a-blocked-push
remote:
remote:
remote:       —— Tencent Cloud Secret ID ———————————————————————————
remote:        locations:
remote:          - commit: a28f434d32b07039d89e63057af54133a36ffa34
remote:            path: js/comments/twikoo.all.min.js:2
remote:
remote:        (?) To push, remove secret from commit(s) or follow this URL to allow the secret.
remote:        https://github.com/dongzhimin-xz/test/security/secret-scanning/unblock-secret/2rqx1UZ0XaU2bNDrXiNAA1mEE5
remote:
remote:
remote:
To dongzhimin.github.com:dongzhimin-xz/test
 ! [remote rejected] HEAD -> master (push declined due to repository rule violations)
error: failed to push some refs to 'dongzhimin.github.com:dongzhimin-xz/test'
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
...

这种情况，可以删除相关文件（twikoo.all.min.js），或者修改策略，放过该文件（刚才测试时无法放过）。国产软件的作者也确实值得吐槽，特别爱把密码给写死在代码里。
经过刚才测试，最根本的解决办法就是，删除theme文件夹内的twikoo.all.min.js，或者打开后，搜索AKIDBgZDdnbTw9D4ey9qPkrkwtb2Do9EwIHw，并删除它。完成操作后，先执行hexo clean，再删除根目录下的.deploy_git。然后再次部署，问题即可解决。

推送完毕后，点击仓库页面的Settings，进入左侧的Pages，Source选择Deploy from a branch，选择你的分支和网站根目录。

域名解析

将我的hexo实例推送到我的仓库dongzhimin-xz.github.io（二级域名必须与我的GitHub用户名完全一致）后，在浏览器输入 https://dongzhimin-xz.github.io 即可访问。如果推送到了test仓库，那么该网站的网址在https://dongzhimin-xz.github.io/test 。
既然是我的博客，那么它应该有我自己的域名，不应该寄人篱下。
首先我将我的Cloudflare DNS记录设为

1
blog    CNAME     dongzhimin-xz.github.io

同时，服务器端的主机名也需要设置，这样才能通过域名访问我的网站。
这里又有一坑，在GitHub Pages设置界面，将Custom domain设为blog.dzm.pp.ua。这样就可以访问了。
然而，我的网页更新以后，通过域名blog.dzm.pp.ua又无法访问网站了。
其实，配置主机名的真正方法是，在source文件夹下新建一个文本文件，改名为CNAME（无后缀），内容为自己的网址

1
blog.dzm.pp.ua

经过hexo clean和hexo g，它就到了网站的根目录中，再次hexo d，即可将域名永久解析到自己的网址。