博客使用静态博客框架Hexo+主题Butterfly搭建，托管到Github，需要提前安装Git，Node.js哦

1、Hexo

安装

打开终端，使用如下命令行安装即可。遇到网络超时，可能需要“科学上网”

1
npm install -g hexo-cli

初始化

在自己的盘符下新建文件夹，例如我的E:\qiing-blog，在该目录下打开终端，进行初始化项目

1
hexo init

初始化成功之后，根目录下会新增许多文件，大致如下

1
2
3
4
5
6
7
public 最终所见网页的所有内容
node_modules 插件以及hexo所需node.js模块
_config.yml 站点配置文件，设定一些公开信息等
package.json 应用程序信息，配置hexo运行所需js包
scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
source 用于存放用户资源，后续新增的文章就在在该目录的_posts文件夹下生成

启动博客服务，继续在根目录下

1
2
hexo s
# 默认端口为4000，如果无法正常启动，更换端口，hexo s -p 4001

浏览器访问http://localhost:4000/本地预览，默认是hexo内置的landscape主题

2、主题

官方主题库有许多主题，博客使用butterfly主题布局

主题主页

在项目根目录下使用git安装，若无法使用git，可将git安装目录添加至系统环境变量

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

等待安装完成，themes目录下就会新增butterfly文件夹

继续安装pug和stylus渲染器

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

修改配置文件

根目录下找到**_config.yml文件，修改主题为butterfly（注意yml文件格式），注意冒号后面的空格**

本地预览

1
2
3
hexo clean #清除缓存
hexo g     # 生成静态文件
hexo s     # 启动服务

博客个性化设置

参照butterfly官方文档进行设置，这里略过

3、GitHub Pages

新建仓库

仓库名称必须为用户名小写.github.io

Setting

在仓库设置中找到Pages

修改YML

这里要注意branch一定要与仓库分支一致(main)

部署

安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

依次执行命令

1
2
3
4
hexo clean 
hexo g # 生成静态文件
hexo s #本地预览，没有问题之后结束本地预览（Ctrl+C）
hexo d #部署项目

如果在执行hexo d时出现spawn failed错误，解决方式如下

  • 删除.deploy_git文件之后
  • 执行命令行git config --global core.autocrlf false
  • 最后：hexo d

预览

部署之后，大概要等10分钟左右，就可以使用http://rmql.github.io 访问博客了

4、图床

写作过程中，会用到很多图片，文章在部署之后，图片就无法本地访问了。因此使用图床存储图片，将本地图片转换成链接地址。博客使用七牛云+Typora+PicGo方案

使用七牛云方案，需要有自己的域名；如果没有个人域名的话，就要考虑别的方案

七牛云

进入七牛云官网，点击产品，选择对象存储。需提前注册并实名认证

进入对象存储配置界面，新建存储空间

新建空间之后，因为七牛云官方给的域名只能使用一个月，所以最好绑定自己的域名，免得后面麻烦

这里如果使用的国内域名，则需要进行ICP备案才能绑定，具体操作流程，对应自己的域名注册商手册，自行查阅备案

域名绑定成功之后，复制这里的CNAME，到自己的域名注册商网站进行DNS解析配置，这里略。解析成功之后，就可以使用自己的域名了

在七牛云官网里知道找到密钥管理，后面配置PicGo需用

其实到这里还没有结束，我全部搞完部署之后发现，博客中的图片无法显示出来，网上查询得知，浏览器会将HTTP协议自动转为HTTPS，所以图片显示不出来。所以这里我们要给七牛配置SSL证书了。

我的域名是阿里云的，所以SSL证书也在阿里云申请，方便，而且阿里云为个人网站提供了免费SSL证书（挺香）。申请链接

个人测试证书（原免费证书）>立即购买>个人测试证书>个人测试证书（免费版）>立即购买

个人测试证书（原免费证书）>创建证书

等待审核、签发通过之后，下载证书到本地，并解压，会有三个文件（**.key、**_chain.crt、**_public.crt）

配置HTTPS

访问控制开启https>上传新SSL证书

上传从阿里云下载的证书

配置HTTPS>更换证书（添加给七牛云配置的证书）>确定

PicGo

下载好PicGo之后，图床设置>七牛云>编辑按钮

进入PicGo的七牛云配置，完成之后点击确认就OK了

  1. 图床配置名：自己随便起个名
  2. 设定AccessKey：密钥管理中的AK
  3. 设定SecretKey：密钥管理中的SK
  4. 设定的Bucket：七牛云存储空间名
  5. 设定的访问网址：绑定的自己的域名，使用https协议
  6. 设定存储区域：默认z0

Typora

在Typora编辑器中，打开偏好设置，选择图像，设置如下图所示

以后我们在写博客时，直接复制或插入图片，Typora会自动将图片上传至七牛云，并转义引用URL

5、备份

这里将整个博客项目也备份到仓库下，方便管理。在根目录下执行Git命令

新建分支

1
2
3
4
5
6
# 仓库初始化
git init
# 新建分支
git checkout -b hexo
# 与远程分支建立连接
git remote add origin https://github.com/Rqml/rqml.github.io

推送分支

1
2
3
4
5
6
# 添加所有文件到暂缓区
git add .
# 提交
git commit -m "提交信息"
# 推送
git push origin hexo

之后就可以同时管理了两个分支了

main -负责博客静态网页

hexo -备份整个博客项目

6、写作&更新

写作

1
2
# 新建文章，根目录下执行
hexo new "一篇新文章"

然后就能发现一个md文件已生成，E:\qiing_blog\source\_posts\一篇新文章.md，之后就可以使用Typora愉快写作了，博客中使用的图片可以自动上传至我们的图床

更新

更新博客静态页面

1
2
3
4
hexo clean # 清除缓存，可跳过
hexo g
hexo s # 在部署之前先本地运行看下，没问题再部署
hexo d

更新博客项目

1
2
3
git add .
git commit -m "提交信息"
git push origin hexo