使用Github Pages与Hexo搭建个人博客

前言

某天我突发奇想，在查阅了一些文章后使用Github Pages与Hexo搭建了本站。我汇总了我搭建本站的经验，并写在这里。

准备

要安装Hexo，你首先需要安装node.js，git。

WindowsDebian系Linux发行版

Windows安装

此部分参照了这篇文章

安装Git

• 官网下载：

  打开Git官网

  建议选择64位版本下载

  

• 镜像下载：

  打开华为云镜像站

  在首页选择一个版本进入（建议往下翻到最新版）

  

  在新界面中选择Git-xxx-64/32-bit.exe文件下载（建议选择64位）

  

• 下载后打开Git安装程序，在安装界面一路Next

• 安装后，按下 +R 打开运行窗口，输入cmd。之后，在cmd窗口中输入git -v可检测是否安装成功。

  成功输出：

  git -v
  | git version 2.46.0.rc0.windows.1

安装Node.js

• 打开Node.js官网

• 选择系统版本并下载（建议选择64位版本，版本默认即可）

  (Node.js官网下载速度实测挺快的)

• 下载后打开，进入安装界面，一路next即可

• 安装后打开cmd，输入以下命令可检测是否安装成功：

  node -v
  npm -v

  成功输出：

  node -v
  | v20.15.1
  npm -v
  | 10.7.0

至此，准备工作完成。

Debian系Linux发行版安装

此部分参照了Hexo官方文档

安装Git

• 打开终端

• 输入sudo apt-get install git-core

• 等待安装完成

• 安装完成后，输入git -v查看是否安装成功

  成功输出：

  git -v
  | git version 2.43.4

安装Node.js

此部分参照了这份readme

• 依次运行：

  sudo apt-get install -y curl
  curl -fsSL https://deb.nodesource.com/setup_22.x -o nodesource_setup.sh
  sudo -E bash nodesource_setup.sh
  sudo apt-get install -y nodejs

  在这里不报错即安装成功。

• 安装成功后，在终端中输入以下命令来检测是否安装成功：

  node -v
  npm -v

  成功输出：

  node -v
  | v22.5.1
  npm -v
  | 10.8.2

至此，准备工作完成。

安装

• 建议先更换npm淘宝源：

  打开cmd或终端，输入以下命令切换淘宝源：

  npm config set registry https://registry.npmmirror.com

  更换后可使用以下命令查看是否切换成功：

  npm config get registry

  成功输出：

  npm config get registry
  | https://registry.npmmirror.com/

• 输入以下命令来安装Hexo本体：

  npm install -g hexo-cli

  可使用hexo v检测是否安装完成

  当输出很长一串列表时，那就是安装成功了

• 安装完成后，在终端内输入以下内容来初始化博客文件夹：

  hexo init hexo

  其中，hexo是一个文件夹名称，可以换成其他的名称使用。如果要安装多个博客，该命令也可以用来初始化其他博客文件夹（注意不要重名）。

  当提示Start blogging with Hexo!时，文件夹便初始化完成了。

  （官方文档对该命令的解释为新建一个网站）

• 之后，使用cd *你的博客目录*进入博客目录。

配置

修改网站配置

在你的博客文件夹内，会有一个config.yml。在这个文件中，你可以自由修改配置。你可以在官方文档中了解更多信息。

安装主题

此部分参照了Butterfly 安裝文檔

• 进入博客目录后，我们可以先安装一个主题。（这里以butterfly为例）

• 运行以下命令安装主题：

  git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

• 安装完成后，运行以下命令安装所需插件：

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

• 接下来，打开博客目录下的_config.yml文件，找到theme: xxx，修改为：

  theme: butterfly

• 接下来，进入你的博客目录/themes/butterfly/目录，把里面的_config.yml重命名为_config.butterfly.yml，剪切到你的博客目录去。

  打开_config.butterfly.yml，进行主题配置。更多信息请参阅Butterfly 安裝文檔(三) 主題配置-1

撰写

进入你的博客目录/source文件夹，一般来说你的文章、页面都在此处。

一些常见的撰写命令：

命令	作用
hexo new xxx	新建一篇文章，标题为 xxx 。文章的markdown文件可在输出路径中找到
hexo new page xxx	新建一个页面，标题为 xxx 。页面的markdown文件可在输出路径中找到

进入你的文章/页面目录，使用你心仪的markdown编辑器开始撰写吧！（删除文章只需删除对应的文件就可以）

关于图片等文件的存放位置，请参阅Hexo官方文档

更多信息请参阅Hexo官方文档

建议

• 建议在每次进入博客目录后、构建网站前运行hexo clean来清理缓存

• 可使用以下命令构建（上线）网站（下面会提到）：

  hexo cl && hexo g && hexo d

• 可使用以下命令调试网站（可在修改网站后运行查看效果）：

  hexo cl && hexo g && hexo s

• 尽量把文件存到你的博客目录/source里，否则更新Hexo或主题时会被覆盖。

部署至Github

本部分参照了Hexo官方文档

创建仓库

• 登录到Github

• 创建一个新仓库，仓库名称需为你的Github用户名.github.io，仓库建议设为公有，其他不用动，直接创建即可。

• 之后，你会跳转到你的仓库界面。复制https;//github.com/xxx/xxxxx.git的链接，后面需要用到。

部署

• 安装所需插件hexo-deployer-git：

  npm install hexo-deployer-git --save

• 安装后，在_config.yml末尾添加如下内容：

  deploy:
    type: git
    repo: https;//github.com/xxx/xxxxx.git
    branch: main

  在这里，repo填写你的Github仓库地址（如果你复制了链接，直接粘贴即可）。xxx是你的用户名，xxxxx是你的仓库名。

  branch指的是你仓库的分支，默认新仓库均为main。

• 配置后，运行以下命令来部署你的网站（网站有修改需要上线时也需要用到这个命令）：

  hexo cl && hexo g && hexo d 

  若出现Deploy done: git，说明部署成功。

• 之后，访问你的Github用户名.github.io查看效果即可。

结语

至此，网站部署完成。建议参阅其他文章以进一步配置你的网站。