使用 Hexo 搭建个人博客

使用 Hexo 搭建个人博客

使用 Hexo+GitHub+Jsdelivr+Valine+Vercel+PicGo 搭建静态博客并加速访问

  • Hexo:渲染 Markdown 文档为 HTML 静态博客

  • GitHub:源码托管、工作流CI/CD、图床

  • Jsdelivr:一个免费的CDN,加速 GitHub 图床访问

  • Valine:一款快速、简洁且高效的无后端评论系统

  • Vercel:静态 Web 部署,可加速博客国内访问速度,速度比 GitHub Pages 快

  • PicGo:图床上传管理工具

原个人博客搭建方式为 solo 一个 SpringBoot + MySQL + Docker 的博客系统,由于国内个人博客备案越发艰难。由原来的**云-广州迁移到了**云-香港。当时购买服务器为学习使用,但是后来工作实在是太多了,个人时间太少,根本没什么时间去折腾。所以在服务到期前准备迁移博客到 Hexo 部署,然后白嫖各种平台吧。

原博客搭建方式:Typora + VPS + Docker + solo + PicGo + 七牛云图床

现博客搭建方式:VSCode + GitHub + Hexo + Jsdelivr + Valine + vercel + PicGo

前期准备

注册各平台账号与安装软件教程参考官网文档

创建博客仓库

在 GitHub 中需要创建三个仓库

仓库命名自定义,示例如下:

仓库名 状态 备注
hexo-notebook Private 博客源码
hexo-static Public/Private 博客静态页面
blog-imgs Public 图床

Jsdelivr 加速图床

创建完成 blog-imgs 仓库后,在当前 GitHub 账号上生成一个 Token

  1. 在个人账号的 Settings

  2. 选择 Developer settings

  3. 选择 Personal access tokens 后点击最下方的 Generate new token

  4. 填写 token name 后勾选 repo。然后点击 Generate token

  5. 复制 token

  6. 设置 PicGo,其中 https://cdn.jsdelivr.net/gh/ 为使用 jsdelivr 加速 github 仓库的 URL 前缀,后面跟上需要待加速的 github 用户名与仓库地址,PicGo 会在上传图片后自动拼接处图片的 URL返回给我们,我们使用这个 URL 去访问即可加速 GitHub 仓库中的文件

搭建博客

创建 Hexo 工程

  1. 使用 NPM 安装 Hexo 命令行工具

    • 全局安装

      shell
      1
      # npm install -g hexo-cli
    • 局部安装

      shell
      1
      # npm install hexo

      如果带 --save 参数,则表示写入到当前 package.json

  2. 新建 hexo-notebook 文件夹

    • Mac 或 Linux 上直接 mkdir 一个文件目录

      shell
      1
      # mkdir hexo-notebook
    • Windows 上右键新建文件夹即可

  3. 初始化 hexo

    shell
    1
    2
    3
    4
    5
    6
    7
    # hexo init hexo-notebook
    INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
    INFO Install dependencies
    warning hexo-renderer-stylus > stylus > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    warning hexo-renderer-stylus > stylus > css-parse > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    warning hexo-renderer-stylus > stylus > css-parse > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    INFO Start blogging with Hexo!

    进入 hexo-notebook 并安装依赖包

    shell
    1
    2
    # cd hexo-notebook
    # npm install
  4. 编译生成静态页面

    shell
    1
    # hexo g

    如果 hexo 仅安装在当前路径下,则使用命令 npx hexo g 生成

    然后我们通过 Nginx 之类的服务器部署 hexo-notebook/public/ 后查看页面

    nginx 配置示例:

    /etc/nginx/conf.d/hexo.conf >folded
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    server {
    listen 80;
    server_name hexo.akiya.cn;
    return 308 https://$host$request_uri;
    }
    server {
    listen 443 ssl;
    server_name hexo.akiya.cn;

    include snippets/ssl-*.akiya.cn.conf;

    gzip on;
    gzip_proxied any;
    gzip_types *;

    location / {
    root /data/hexo-notebook/public/;
    index index.html;
    }
    }

    也可以使用如下命令,直接使用 Hexo 自带的 Server 启动查看

    shell
    1
    # hexo s

    可以看到默认主题页面如下

添加主题

默认的 Hexo 主题并不是让我很满意,所幸 Hexo 拥有很多第三方主题,我们可以在其中选择我们喜欢的来美化我们的博客。

这里我选择的是基于 icarus 修改的 amazing

  1. 克隆主题到 hexo-notebook 工程的 themes/ 路径下

    shell
    1
    # git clone https://github.com/removeif/hexo-theme-amazing.git themes/amazing

    查看主题目录

    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
    # tree -L 2 themes
    themes
    ├── amazing
    │   ├── _config.yml
    │   ├── ex_pages
    │   ├── include
    │   ├── languages
    │   ├── layout
    │   ├── LICENSE
    │   ├── package.json
    │   ├── README.md
    │   ├── scripts
    │   └── source
    └── landscape
    ├── _config.yml
    ├── Gruntfile.js
    ├── languages
    ├── layout
    ├── LICENSE
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

    12 directories, 9 files
  2. 导入主题后需要安装新的依赖包,具体需要哪些包请按报错提示安装,以下仅供参考

    shell
    1
    2
    3
    # npm install --save ajv@^6.10.2 bulma-stylus@0.8.0 hexo@^4.2.0 hexo-log@^1.0.0 \
    hexo-renderer-inferno@^0.1.1 hexo-renderer-stylus@^1.1.0 hexo-util@^1.8.0 \
    inferno@^7.3.3 inferno-create-element@^7.3.3
  3. 修改 hexo-notebook/_config.ymltheme: 值为 amazing

  4. 清理并重新生成静态网页

    shell
    1
    2
    # hexo clean
    # hexo g

    再次刷新浏览器,可以看到页面如下,主题以及发行变化。但是除了 Hello World 外其他的都是主题默认的,我们需要修改配置文件中信息为我们自己的博客内容

修改配置文件

配置文件则按照官方文档或选择使用的三方主题的文档修改,由于使用的主题可能不一样,这儿不做过多说明


如何修改 amazing 主题配置文件请参考作者 GitHub

文章置顶

注意: 默认的 node_modules 中使用 amazing 主题会有文章置顶问题。如果使用该主题需要替换 generator.js,使用如下内容替换 node_modules/hexo-generator-index/lib/generator.js 中内容

themes/amazing/ex_scripts/generator.js >folded
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
'use strict';
const pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top == undefined){
a.top = 0;
}
if(b.top == undefined){
b.top = 0;
}
if(a.top == b.top){
return b.date - a.date;
}else{
return b.top - a.top;
}
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

评论系统

  1. 登陆 leancloud,创建一个新应用

  2. 进入 应用 => 设置 => 应用 Keys 中获取 AppIDAppKey

  3. 在 amazing 主题配置文件中修改相关配置,注释掉 gitalk 相关配置并放开 valine

    最开始使用 gitalk 发现每篇文章都需要手动去初始化评论后才能使用,所以替换为 valine

    themes/amazing/_config.yml >folded
    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
    # comment:
    # type: gitalk
    # language: zh-CN #zh-CN #Localization language key, en, zh-CN and zh-TW are currently available.
    # owner: kev1nchan # (required) GitHub user name
    # repo: hexo-static # (required) GitHub repository name
    # client_id: 82bd3b7************* # (required) OAuth application client id
    # client_secret: client_secret: 8d64a03740e9**************************** # (required) OAuth application client secret
    # admin: ['kev1nchan']
    # create_issue_manually: true
    # distraction_free_mode: false
    # has_hot_recommend: true # 是否有热门推荐
    # has_latest_comment: true #是否有最新评论

    comment:
    type: valine
    app_id: TQ2y7r9fu************************
    app_key: NmVxUy1*****************
    notify: false
    verify: false
    avatar: 'mp'
    placeholder: '留下您的高见!'
    has_latest_comment: true #是否有最新评论 true-有,false-无
    owner: akiya #博主名 最新评论标注[博主]
    required_fields: ['nick', 'mail', 'link']
    lang: en #zh-CN zh-TW en ja

添加文章

草稿

如果直接创建一篇新文章的话,会在生成静态文件时默认渲染,但有时我们并不会马上编辑好或者并不急着发布,这时就可以先建立草稿

shell
1
# hexo new draft "<文章名>"

创建后新的 <文章名>.md 文档会在 hexo-notebook/source/_drafts/ 下,Hexo 不会默认不会渲染该文件夹下的东西

如果需要预览文章,可以使用 Hexo 内置的 hexo-server 启动时带上 --drafts

shell
1
# hexo s --drafts

启动后访问 http://localhost:4000 即可本地预览

如果需要发布该文章,则建议使用 git mv 命令,而不是官方提供的 hexo publish。官方提到 publish 类似于 new,所以可能会破坏我们的 git log

shell
1
# git mv source/_drafts/<文章名>.md source/_posts/

新文章

添加新文章直接 hexo new 完事

shell
1
# hexo new <文章名>

新建的文档会存放在 source/_posts/ 目录下,此目录下所有文档会在生成静态文件时被调用。

部署

推送代码前请保证当前开发环境中可以 pullpush 访问远程仓库

推送静态页面

hexo-notebook\_config.yml 配置文件中找到如下配置

_config.yml
1
2
3
4
5
deploy:
- type: git
# 博客静态文件仓库地址
repo: git@github.com:Kev1nChan/hexo-static.git
branch: master
  1. 修改 repo 为你自己的 hexo-static 仓库地址

  2. 测试部署,使用如下命令生成并推送到远程服务器

    shell
    1
    2
    # hexo clean
    # hexo g -d
  3. 在 GitHub 页面上查看改仓库是否有新推送

推送源码

添加完文档后,我们按照 github 上新建的 hexo-notebook 库的提示信息提交我们的代码到远程仓库

使用 actions

为了提升部署体验,我们使用 github actions 自动构建博客静态页面资源并部署

workflow

hexo-notebook 下新建 .github/workflows/deploy.yml 文件,内容如下:

.github/workflows/deploy.yml >folded
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
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: HEXO BLOG DEPLOY

on:
push:
# 在每次推送 source 时触发构建
paths:
- "source/**"
# 在推送到存储库的 master 分支时触发
branches: [ master ]

jobs:
build:

# 作业名称为 Greeting
name: build hexo

# 此作业在 Linux 上运行
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [12.x]

steps:
# 此步骤使用 GitHub 的 actions/checkout:https://github.com/actions/checkout
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
# 设置 Hexo 环境
- name: Setup Hexo
env:
ACTION_DEPLOY_KEY: ${{ secrets.DEPLOY_HEXO_BLOG }}
run: |
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "kev1nchan@little-star.love"
git config --global user.name "Kev1nChan"
npm install
# 文章置顶 Top 相关配置
- name: replace generator.js
run: |
cp themes/amazing/ex_scripts/generator.js node_modules/hexo-generator-index/lib/generator.js
# 自动部署 Hexo
- name: Hexo deploy
run: |
npx hexo clean
npx hexo g -d

注意替换其中 git config --global user.emailgit config --global user.name 的值

配置 deploy key

hexo-notebook 中通过命令行生成 deploy-key

shell
1
# ssh-keygen -t rsa  -b 4096 -C "kev1nchan@little-star.love" -f github-deploy-key -N ""
  1. 复制 github-deploy-key.pub 内容到 hexo-static 仓库的 Deploy Keys 中,记得一定要勾选 Allow write access,不然没有写权限无法推送成功

  2. 复制 github-deploy-key 内容到 hexo-notebook 仓库的 Secrets

推送代码并测试

提交并推送 hexo-notebook 代码,然后查看 Actions。可以看到如下所示,推送代码后自动构建

部署 Vercel

推荐使用 Vercel,而非 GitHub Pages。GitHub Pages 在国内访问速度慢,且有超时的可能

Vercel 是一个云平台静态站点和无服务器功能完美地与您的工作流程适合。它使开发人员可以托管 Jamstack 网站和 Web 服务,这些网站和 Web 服务可立即部署,自动扩展且无需监督,而无需任何配置。


我们使用 GitHub 账号登陆 vercel,并导入 GitHub 仓库 Hexo-static

设置中 Build 保持 Other 即可,因为上面已经使用了 GitHub Actions 来构建静态 Web 资源,我这里已经导入过就直接用设置截图

等待导入 GitHub 仓库,并生成静态网站

vercel 会为我们的网站提供一个 https 的域名访问

如果需要绑定自定义域名,则在 Domains 中添加自己的域名并在域名服务商处按照 vercel 的提示设置解析即可

评论

:D 一言句子获取中...

加载中,最新评论有1分钟缓存...