使用 Hexo 搭建博客教程

这篇文章用于记录搭建 Hexo 个人博客教程供自己使用和分享给有需要的人。如果跟着教程走出现了什么问题，可以问博主，但博主这个小白不保证能解决。

教程链接

• 如何拥有属于自己的网站
  • 这个帖子简单介绍了拥有自己网站的整体思路，以及为什么选择用 Hexo 来进行尝试搭建博客。
• 零基础搭建个人博客！手把手教你用 Hexo+GitHub+Zeabur 打造属于你的网站!
  • 这个视频即为上一个小黑盒中的帖子中对于使用 Hexo 搭建博客分享的视频。本文主要根据这个视频来整理过程和进行一点补充。

准备工作

Hexo 简介

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

• Hexo 官网

在官网的安装要求中我们可以看到安装 Hexo 前需要先安装：

• Node.js 官网
• Git 官网

如视频中所演示的，Node.js 直接进入官网后下载安装即可，而 Git 我们下载时选择 64 位的安装包（大家电脑大都是 64 位的）。若有人使用的是 Mac 系统，可以参考 Hexo 官网上对于 Mac 系统下载安装 Node.js 和 Git 的部分，本文不过多讲述（主要作者没用过不清楚）。

下载 Git 时是链接到 GitHub 的，国内直接访问 GitHub 网站可能会访问失败。视频中使用 Steam++ 来访问 GitHub 官网，也可以使用 Clash 或其他什么科学上网工具来进行访问，这里不过多阐述。

• GitHub 官网 （补充说明：建议提前注册以便后续使用）
• VS Code 官网

如视频中所言，VS Code 虽然不是必须的，但是非常好用。配置好后可以直接在这一个软件中写 Python、C、R、Matlab 各种代码，非常的方便好用呀。下载完成后装一个中文的插件，让 VS Code 的界面更方便使用。

都下载好后，可以用键盘上快捷键 Win+R 再输入 cmd 来打开命令提示符（也可以右键 Win 图标打开“终端管理员”）。

在其中输入 node -v、git -v、npm -v 三个命令来检查是否都安装成功，都显示版本号即为已经安装成功。

自此所有准备工作都完成了，接下来进行网站的搭建。

初始化博客框架

首先先在 VS Code 打开一个文件夹，我们可以新建一个文件夹来存放网站代码，文件夹放在我们自己知道的位置即可。

回到 Hexo 官网，我们可以找到安装 Hexo 的代码来安装 Hexo。因为是国外网站所以当我们直接使用的时候官网提供的代码来安装时会有问题（科学上网可以解决，但因为网络不稳定所以此处即后续我们这里都使用视频中分享的方法）。

视频中使用 npm 镜像站来进行安装：

• npm 镜像站网站

在里面找到使用说明中给的第一行代码复制并输入到命令提示符里面即可，后续使用 npm 相关代码时将 npm 改为 cnpm 即可。

接下来我们还是使用 Hexo 官网中给的安装 Hexo 代码来安装 Hexo 即可，只需要在代码前加一个 c 改为 cnpm install -g hexo-cli 将这行代码输入命令提示符中即可顺利安装 Hexo。

回到 VS Code，我们新建一个终端（VS Code 上方），我们后续很多命令都在这个终端中输入。在 VS Code 中的终端输入 hexo init （你想创建的文件夹名字），这里我们文件夹名称以zhiyuan为例。

（因为刚安装环境有可能会出现错误，可以重启电脑来尝试）

可以看到已经拉取基础文件，但在安装依赖的时候会卡住。在终端中使用 Ctrl+C 快捷键来终止代码运行。如视频中所演示的，我们使用先前提到的 npm 镜像来手动安装。进入你创建的文件夹来安装依赖，在 VS Code 终端中输入 cd zhiyuan 来进入文件夹，再输入 cnpm install 来安装依赖。

完成后我们的博客框架就已经初始化完成，在终端中输入 hexo g 来生成静态文件，再输入 hexo s 来预览（这两个命令会经常使用）。预览生成后进入终端中给出的网站来预览。可以进入即为已经初始化完成依赖。

选择主题

回到 Hexo 官网，进入主题页面来寻找我们想用的主题。这边我使用视频中提到的 anzhiyu 主题而不是 butterfly 主题。原因是我之前已经使用过一次 butterfly 主题，这次来尝试别的主题。

这里下载主题的时候需要访问 GitHub 网站，证书验证可能出现问题，后续操作中也可能出现问题，我们这里选择把证书验证关掉。在终端中输入如下代码即可

1

git config --global http.sslVerify false

。

我们来到 anzhiyu 主题安装的 官方文档，复制其中的方式一 GitHub 安装的代码，在终端输入来安装。再复制官方文档中的 pug 和 stylus 渲染插件安装的代码 npm install hexo-renderer-pug hexo-renderer-stylus --save 在终端中输入来安装。我们在安装时需要将代码开头的 npm 改为 cnpm 使用镜像来安装，那样安装速度会更快。安装完成后我们找到目录中的 _config.yml 文件，拉到底部，将主题部分改为我们安装的主题的名称 anzhiyu 然后保存，我们的主题就应用上了。

在终端中输入 hexo cl 来清除生成的缓存，会出现报错。按照视频中的说法这里缺少一个组件，按着官方文档操作是必犯的，因为官方文档好久没更新了什么屑官方。

在终端中输入 cnpm install hexo-util --save 来安装这个组件（这里同样使用镜像网站安装）。安装好之后再次输入 hexo cl 来清除缓存，然后与先前一样使用 hexo g 生成静态文件，再使用 hexo s 来预览。正常进入就说明主题已经应用完毕。（视频中还有一点其它步骤这里就不细说了，详细的编辑使用主题的方法可以阅读你所安装的主题的官方文档）

部署在 GitHub 中

登陆你的 GitHub 账号，新建一个仓库，然后回到 VS Code 中的 _config.yml 文件，翻到最底部，修改为：

1
2
3
4

deploy:
  type: 'git'
  repo: （你的仓库地址）
  branch: main

安装一下 Hexo 的部署插件，在 VS Code 终端中输入 cnpm install hexo-deployer-git --save 并运行即可。然后还是 hexo cl 来清理缓存，hexo g 来生成静态文件，最后运行 hexo d 来将你的代码上传到 GitHub 仓库中，你可以看到网站中自己的 GitHub 仓库中出现上传的内容。会生成一个登录框来登陆 GitHub 账号，在我上传的时候可能是因为 VS Code 里已经登陆了 GitHub 账号所以没有生成。若登录出现问题，也可以使用视频中讲述的另外的方法来登陆上传。

用 Zeabur 设置为网页

进入 Zeabur 网站 https://zeabur.com/zh-CN，使用 GitHub 账号登陆，新建项目后选择服务，选择一个免费的计划即可。在里面点击 GitHub 后找到自己的仓库，然后进行部署即可。部署好在下方找到网络，没有自己域名的话可以点第一个生成一个免费域名，有的话点第二个输入自己的域名即可（对于怎么设置自己的域名未来再说）。

完成

全部都做好后，你就可以将你的网站分享给其它人让他们来看看你的网站了。后续在网站中写文章，更改设置等等，可以阅读你选择的主题的文档和 Hexo 的文档来进行操作，修改完成后还是使用 hexo g 生成静态文件，再用 hexo s 预览，没有问题后再用 hexo d 上传到 GitHub 仓库中完成修改。不要像我一样自己胡乱修改导致自己不会整回去了。

使用 Hexo 搭建博客教程

  
graph TD
    A[准备工作] --> B[安装 Node.js 和 Git]
    B --> C[安装 Hexo]
    C --> D[初始化博客框架]
    D --> E[选择主题]
    E --> F[部署在 GitHub 中]
    F --> G[用 Zeabur 设置为网页]
    G --> H[完成]

    subgraph 准备工作
        A1[Hexo 简介]
        A2[下载 Node.js]
        A3[下载 Git]
        A4[下载 VS Code]
        A --> A1
        A1 --> A2
        A2 --> A3
        A3 --> A4
    end

    subgraph 安装 Node.js 和 Git
        B1[进入 Node.js 官网]
        B2[下载并安装 Node.js]
        B3[进入 Git 官网]
        B4[下载并安装 Git]
        B --> B1
        B1 --> B2
        B2 --> B3
        B3 --> B4
    end

    subgraph 安装 Hexo
        C1[进入 Hexo 官网]
        C2[使用 npm 镜像站安装 Hexo]
        C3[在终端中输入安装命令]
        C --> C1
        C1 --> C2
        C2 --> C3
    end

    subgraph 初始化博客框架
        D1[在 VS Code 中打开文件夹]
        D2[在终端中输入 hexo init 命令]
        D3[安装依赖]
        D4[生成静态文件并预览]
        D --> D1
        D1 --> D2
        D2 --> D3
        D3 --> D4
    end

    subgraph 选择主题
        E1[进入 Hexo 官网主题页面]
        E2[选择 anzhiyu 主题]
        E3[下载并安装主题]
        E4[修改 _config.yml 文件中的theme配置]
        E5[清除缓存并生成静态文件]
        E --> E1
        E1 --> E2
        E2 --> E3
        E3 --> E4
        E4 --> E5
    end

    subgraph 部署在 GitHub 中
        F1[登录 GitHub 账号]
        F2[新建仓库]
        F3[在 _config.yml 文件增添]
        F4[安装 hexo-deployer-git 插件]
        F5[清除缓存并生成静态文件]
        F6[将代码上传到 GitHub 仓库]
        F --> F1
        F1 --> F2
        F2 --> F3
        F3 --> F4
        F4 --> F5
        F5 --> F6
    end

    subgraph 用 Zeabur 设置为网页
        G1[进入 Zeabur 网站]
        G2[使用 GitHub 账号登录]
        G3[新建项目并选择服务]
        G4[找到自己的仓库并进行部署]
        G5[设置域名]
        G --> G1
        G1 --> G2
        G2 --> G3
        G3 --> G4
        G4 --> G5
    end

    subgraph 完成
        H1[分享网站]
        H2[写文章并修改设置]
        H3[生成静态文件并上传到 GitHub]
        H --> H1
        H1 --> H2
        H2 --> H3
    end

  

题外话

从尝试建博客到现在过去半年，却是第一次在博客中写文章。内容基本上全是复述了一遍零基础搭建个人博客！手把手教你用 Hexo+GitHub+Zeabur 打造属于你的网站!中的内容，未来可能会写一些碎碎念什么的，反正也没人看。希望自己也能越学越多，有更多的内容可写，能更丰富自己的博客吧。