快速构建博客，依托github实现免费的博客

Hexo是一个基于Nodejs的静态博客框架。

使用

命令 功能
hexo s 生成预览界面
hexo clean 清理之前的构建信息，在发布新内容的时候重新连接使用
hexo g 生成静态页面
hexo d 上传到github
hexo n [post] name 默认构建post, 可以选择post、page和draft。分别存储在source对应的文件夹下

模板

hexo创建文件依据Scaffold文件夹中定义的模板进行。默认就只有可选的三个模板：post，page，draft。也可以自己构建新的模板。

draft: 草稿，并不发布到博客中。

安装

  1. 需要保证系统中安装了nodejs 和 git
  2. 使用node安装hexo
    1
    2
    # -g表示全局安装
    npm install hexo-cli -g

    初始化

    创建博客目录，并在该目录下进行hexo的初始化
    1
    2
    3
    4
    5
    # 在博客初始化的时候才会只用，拉取官方的hexo配置到指定文件夹
    hexo init
    # 然后就可以通过 s 参数进行本地的预览, 通过指定的端口就可以访问本地博客内容，
    # 这里主要用来看看是否能够成功
    hexo s

    通过github托管博客

    创建仓库

    仓库的名字一定要与用户名一致，并添加 .github.io 方便访问。如我的github名称为ZCDu，那么仓库的名字就为
    1
    ZCDu.github.io

    发布博客到github

    1
    2
    3
    4
    5
    6
    7
    8
    # 修改_config.yaml文件指定的内容，对应deploy部署部分
    #Deployment
    # Docs: https://hexo.io/docs/one-command-deployment
    # 注意，冒号之后需要一个空格，隔离参数
    deploy:
    type: 'git'
    repository: https://[GithubToken]@github.com/[GithubUsername]/[GithubBlogRepo].git # 虽然可以使用ssh密钥的形式，但是这里推荐使用Token，具体看自动部署。
    branch: main # 与github主分支名相同即可
    通过以上步骤，就制定了部署的位置。之后需要hexo插件将markdown编译为HTML页面，类似于mkdocs：
    1
    2
    3
    4
    5
    6
    7
    # 实现md编译为HTML页面的hexo库, 并部署到github上
    npm install hexo-deployer-git --save
    # 生成静态网页，生成的网页存放在public目录下，这里也可以通过将public中的文件全部拷贝到网站的根目录下，
    # 然后启动nginx或者apache服务进行访问
    hexo g 
    # 对应hexo-deployer-git, 上传页面所需要的内容到github，并不会将整个文件上传
    hexo d

    使用令牌代替密码，由于github安全。也是可以通过ssh来进行只是对应需要修改deploy repository参数，这里推荐使用令牌。

在输入github密码的时候进行。在github setting 最下面 Developer settings的Personal access tokens，创建的令牌最好所有都选上，然后将这个令牌输入密码的部分,之后就可以头通过仓库名来访问博客的为网站，如本博客就是 ZCDu.github.io 进行访问。

发布到gitee

1
2
3
4
5
6
7
8
# 修改_config.yml的部署配置，增加一个gitee
deploy:
- type: 'git'
  repo: https:[GithubUsername]//[GithubToken]@github.com/[GithubUsername]/[GithubBlogRepo].git
  branch: main # 注意github初始化仓库叫main
- type: 'git'
  repo: https://[GiteeUsername]:[GiteeToken]@github.com/[GiteeUsername]/[GiteeBlogRepo].git
  branch: main # gitee还是初始化仓库还是叫master，要用main需要修改

与github不同，gitee需要申请gitee page（在服务中申请）。gitee的发布仓库名应该为用户名（这与github不同，少了后缀），gitee page会自动生成对应的gitee.io 方便访问。

注意Gitee部署完成之后还要去官网点击服务

4everland

可以直接通过github的io库自动实现部署。只需要在4everland中导入即可。

图床

注意

阿里云OSS超香的，如果不用图床，整个博客就太大了，不方便使用Github Action，有其是如果使用Gitee的话，空间就更捉襟见肘了。

图床不是必须的！！！背景等图片可以通过网络地址引用，自己的图片如果不大，可以通过gitee(500M压力不大)或github仓库的形式导入。

可以通过直接使用图片网络地址的方式读取网络中的图片，但是并不是所有的网络图片都可以访问，有些图片虽然复制了地址可以在游览器打开，但是发布到博客上就无法显示。当前百度的搜索图片大多是可以的。

遇事不决先买阿里云

阿里云官网->产品->存储->对象存储OSS。购买标准（LRS）存储包-中国大陆通用-40G即可。

进入管理控制台，创建Bucket（刚买的话在右上角的位置），名字没要求，选择一个近的位置。image-20220408234919251

创建AccessKey

右上角头像AccessKey管理->创建AccessKey（生成的钥匙码最好保存一下，不然之后又要手机验证）。

PicGo

PicGo设置

把不要的图床取消。

设置Server

端口号设置为36677（这步的操作主要是为了和Typora联动，后面会扩展一个Typora）

图床设置

由于本站只配置了阿里云，所以介绍阿里云的配置

image-20220408235653146

keyId和KeySecret为刚刚保存的AccessKey。

设定的存储空间名：入口 阿里云官网->产品->存储->对象存储OSS->控制台-> Bucket列表，这里可看到(其实就是刚刚设置的Bucket名称)

确认存储区域：点击指定的Bucket->概览，外网访问对应的Endpoint，这里.aliyuncs.com的后缀需要去除。就完成了配置。之后拖入图片验证一下是否成功。

联动Typora

偏好设置->图像

image-20220409000448734

PicGo路径为PicGo的exe执行文件的位置，需要选到它。之后验证图片上传选项。之后将图片复制到Typora中会自动上传到PicGo。

页面设置

对应front-matter

注意事项:

  1. 标签和分类通过- 标签名换行的方式构建。这样才能多标签和分类共存。
  2. 非原创最好加一个copyright: false 。尊重原作者。现在还能单独设置版权
  3. cover: img 为每个页面设置封面图片

主题

将需要的主题克隆到themes文件夹下，通过修改_config.yaml文件中的themes选项来进行配置

1
2
3
# _config.yaml中的theme
theme: 对应的主题名字
# 并且最好拷贝主题中的配置到hexo根目录下，改名为对应的_config.butterfly.yml

butterfly常用配置

顶部图

需要设置disable_top_img为false

配置 功能
index_img 主页的top_img
default_top_img 默认的top_img，当页面没有配置时显示
archive_img 归档页的top_img
tag_img tag子页
tag_per_img tag子页面的top_img，可配置每个tag的top_img
category_img category对应图
category_per_img category子页对应的图
其他页面(自建页面，文章页) 需要到对应页面的front-matter(就是hexo n生成的那部分东西)，对应页面设置

图标

对应博客中的各个小标识符号，如github的图标，邮箱图标等，都可以在Font Awesome网站找到。

1
fab fa-github # 表示的是fa-brands fa-github

需要插件支持

Hexo会自动合并的_config.yml和 _config.butterfly.yml里的配置。具体的配置需要需要查看友链butterfly。这里只介绍几个有多个选项的配置。

评论系统

使用了livere。好处是需要登入才能评论，可以过滤一些垃圾信息。

在Comments System部分，use设置

1
use: Livere

livere需要去它的官网注册。然后就可以获取uid：image-20220409000828847

只需要在config_butterfly.yml中对应的livere项中填入uid即可。

搜索系统

使用本地搜索

1
2
# 需要安装插件
npm install hexo-generator-search --save

字数统计

1
npm install hexo-wordcount --save

自动部署

主要是为了利用github来备份博客源码实现多端同步，同时也能够实现多站点发布。感觉友链forever97提供的教学教学援助。

创建私有仓库

创建一个私有仓库来存放Hexo源码，就是正常的github的构建。

使用私有仓库是因为Github Actions的操作其实就是构建了一个类docker来自动完成完成整个Hexo构建的过程，所以需要给它权限来访问我们的github，这个权限泄露了，自己的github也就泄露了。

Github Token

用来代替密码的保密方式，可以直接通过Token作为密码来访问自己的github。这里用Token主要就是为了安全。

⚠️无法使用ssh密钥，因为Github Actions操作的性质，每次都要重新生成密钥显然是不合适的

在github的Settings中选择 Developer Settings -> Personal access tokens -> generate new token，token名字任意，勾选上repo项。

⚠️Token只有在生成的那一刻会显示，所以必须要复制下来，不然之后就用不了又要重新生成了。

Gitee Token

头像(右上角) -> 设置 -> 私人令牌 -> 生成新令牌。同样要保存好这个Token。

配置_config.yml

修改部署部分代码，这部分也是本地部署时候需要的，即使不使用Github Actions也是需要配置的，用来发布Hexo，如果不适用Action操作，直接本地进行源码的部署，可以使用ssh密钥的形式。考虑到Actions就需要使用Token：

1
2
3
4
5
6
deploy:
- type: git
  repo:
    gitHub: https://[GithubToken]@github.com/[GithubUsername]/[GithubBlogRepo].git
    gitee: https://[GiteeToken]@gitee.com/[GiteeUsername]/[GiteeBlogRepo].git
  branch: main

配置gitignore

因为Action会构建一个类docker环境，自己会安装指定的node环境，所以这里需要将本地的环境取消跟踪，可以直接复制：

1
2
3
4
5
6
7
8
9
10
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea # 自己编辑器生成的文件最好也取消跟踪

⚠️需要注意，要删除主题文件中的.git文件，git然后包含了子git库会从别处引用，导致本地上传到github的时候没有这个主题库，直接删了这个.git，那么这个主题就不构成git仓库了。

配置Actions

需要在Hexo根目录下创建.github/workflows文件夹，并构建yaml文件，名字可以随意，本站使用autodeploy.yml作为入口。直接照搬了forever97同学的配置，只需要修改git的用户名和邮箱：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 当有改动推送到master分支时，启动Action
name: 自动部署

on:
  push: # 设置了每次提交git版本的时候都会执行
    branches:
      - main #2020年10月后github新建仓库默认分支改为main，注意更改

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
      uses: actions/checkout@v2
      with:
        ref: main #2020年10月后github新建仓库默认分支改为main，注意更改

    - name: 安装 Node
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: 安装 Hexo
      run: |
        export TZ='Asia/Shanghai'
        npm install hexo-cli -g
    - name: 缓存 Hexo
      uses: actions/cache@v1
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save
    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate
    - name: 用户名
      run: |
        git config --global user.name "forever97"
    - name: 邮箱
      run: |
        git config --global user.email "857426255@qq.com"
    #- name: 克隆静态文件仓库
      #run: |
        #git clone git@github.com:forever97/forever97.github.io.git .deploy_git
        # =====注意.deploy_git前面有个空格=====
        # clone 静态文件仓库，防止 Hexo 推送时覆盖整个静态文件仓库，只推送有更改的文件
    - name: 部署
      run: |
        hexo deploy

之后只需要将源码push到指定的私有库，然后看看Actions按钮是否启动了了一个Actions就完事了。

问题

  1. 依靠github库来保存源文件的时候，本地的预览就不太好用了，要安装本地环境就会改动package-lock的信息，多了不必要的更新，哎，愁呀！！
  2. 博客还不能被搜索引擎检索，这好像是需要域名才能进行的。