使用hexo搭建博客网站，并使用butterfly主题

1. 安装依赖

首先需要有Node.js和Git，这一点对于开发人员应该非常简单。

推荐使用NVM for Windows安装nodejs

2. 建站

创建一个空文件夹，在文件夹内执行下列命令，Hexo将会在该文件夹中新建所需要的文件。

1
npx hexo init

第一次执行时可能较慢，npx会临时安装hexo包，并在运行结束后删除hexo包。这样无需对hexo进行全局安装。

但是hexo init会在文件夹中局部安装hexo。并安装所依赖的包。因此也无需执行npm install

使用server子命令查看当前网站

1
npx hexo server

3. 部署到github

首先你需要一个github账号，请在你的ssh设置页面里配置ssh用于git链接github。

3.1 代码上传到github

step 1. 建立名为<你的 GitHub 用户名>.github.io的储存库

step 2. 在储存库中前往Settings > Pages > Source，并将Source改为GitHub Actions

step 3. 配置GitHub Actions配置文件

使用node --version指令检查你电脑上的Node.js版本，并记下该版本(例如：v20.y.z)

建立.github/workflows/pages.yml，并填入以下内容(将20替换为上个步骤中记下的版本)

step 4. 初始化本地仓库并部署到github

如果你第一次使用git可能需要配置用户名和邮箱

1
2
3
4
5
6
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:<你的 GitHub 用户名>/<你的 GitHub 用户名>.github.io.git
git push -u origin main

默认情况下public/不会被上传(也不该被上传)，确保.gitignore文件中包含一行public/。整体文件夹结构应该与示例储存库大致相似。

4. 配置主题

1
2
npm uninstall hexo-theme-landscape
git submodule add -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改Hexo根目录下的_config.yml，把主题改为butterfly

1
theme: butterfly

将/themes/butterfly/_config.yml复制到/_config.butterfly.yml

安装插件

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

其他配置请参照https://butterfly.js.org/posts/dc584b87/

将配置或修改推送到远程仓库

1
2
3
git add .
git commit -m "somme comment"
git push

自此以后

以上配置基本只操作一次，以后就可以开始愉快的写文章啦！

写博客

一般情况下我们会开启一个hexo server然后新建一个post或者打开之前的post。这样可以一边修改一边查看页面的变化。（需要手动刷新）

1 新建post

1
npx hexo new post-name

2 启动本地服务

1
2
npx hexo clean
npx hexo server

推送到远程

1
2
3
git add .
git commit -m "somme comment"
git push

对博客所做的所有更改无论是配置或者添加新的文章都可以通过推送代码，快速部署。

重新搭建博客环境

当我们换了另一台设备时，可能需要重新搭建博客环境

1 安装git和nodejs

2 从代码仓库克隆源代码

1
git clone --recursive <repo>

3 安装博客依赖

1
npm install

4 尝试启动博客

1
npx hexo server

压缩仓库体积

由于git是增量更新的，按照道理来讲应该会越来越大，应该有方法用于删除之前的commit只保留当前的版本。

这件事情留给需要的时候再做吧