基于Github+Hexo搭建个人博客

背景

我一直想建立自己的博客站点，已经购买了域名和服务器。但由于国内不允许个人博客进行备案，这个计划就暂时搁置了。目前，我使用WordPress搭建的站点，只能通过IP地址访问。

最近，我看到了别人使用GitHub Pages搭建的博客，这激发了我的兴趣。经过一番研究，我发现使用GitHub Pages搭建博客不仅免备案，还自带HTTPS证书，省去了很多繁琐的步骤。

虽然我之前一直使用WordPress，两种平台各有利弊。WordPress需要自己管理服务器和HTTPS证书，维护相对繁琐。不过，它的优势在于插件众多，后台编辑器对新手非常友好。相比之下，Hexo支持的是Markdown编辑，可能对一些用户来说不够直观。但我也找到了一个适用于Hexo的文章编辑器，web-hexo-editor，对于喜欢尝试新工具的朋友来说是个不错的选择。

接下来，我将详细介绍如何使用GitHub Pages和Hexo搭建个人博客。这种方法不仅简化了博客的搭建和维护过程，还可以让你免于处理服务器和证书的问题。

Github 准备工作

#打开 Github 官网， https://github.com/，申请注册一个账号。

创建一个名为【账户名.github.io】的仓库

假设账号是： jonezhu，则建立博客仓库名为：jonezhu.github.io。

  • 1.创建仓库

将仓库属性选择为公开的：public。

Img

  • 2.克隆仓库
1
git clone https://github.com/username/username.github.io
  • 2.Hello World
1
2
3
cd username.github.io

echo "Hello World" > index.html

-3. Push it

1
2
3
4
5
git add --all

git commit -m "Initial commit"

git push -u origin main

在 GitHub Pages 上部署 Hexo

    1. 安装 Hexo
1
2
npm install -g hexo-cli

    1. 新建一个文件夹【username.github.io】
    1. 请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
1
2
3
hexo init username.github.io
cd username.github.io
npm install

初始化后，您的项目文件夹将如下所示：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
    1. 在储存库中前往 Settings > Pages > Source 。 将 source 更改为 GitHub Actions，然后保存。
    1. 使用 node –version 指令检查你电脑上的 Node.js 版本。 记下主要版本（例如，v20.y.z）
    1. 在储存库中建立 .github/workflows/pages.yml，并填入以下内容 (将 20 替换为上个步骤中记下的版本)：
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
name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
          # Ref: https://github.com/actions/setup-node#supported-version-syntax
          node-version: "20"
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
    1. 合并初始化目录和仓库内容
1
2
3
4
5
6
7
8
9
10
11
12
[#] 初始化本地仓库
cd username.github.io
git init
[#] 初始化本地仓库
git remote add origin https://github.com/username/username.github.io.git
[#]添加远程仓库
git remote add origin https://github.com/JoneZhu/jonezhu.github.io.git
[#]拉取远程仓库内容
git pull origin master --allow-unrelated-histories
[#] 推送到 GitHub
git push origin master

这个时候从Github Action 就可以看到构建记录

    1. 部署完成后，前往 username.github.io 查看网页。

更换Hexo的主题(https://hexo.io/themes/)

hexo 有四百多款主题，更换主题也非常简单方便
Img

1
git submodule add https://github.com/zhangolve/hexo-theme-olive.git themes/olive

这条命令会在 themes/olive 目录下克隆 hexo-theme-olive 仓库，并将其作为子模块添加到你的项目中。

    1. 初始化和更新子模块
1
2
3
git submodule init
git submodule update

这些命令将初始化本地配置文件，并从子模块的仓库中拉取所有必要的数据。

    1. 更改根目录下的 _config 的theme的配置
      Img
    1. 提交和推送更改
1
2
3
git add .
git commit -m "添加 hexo-theme-olive 子模块"
git push
    1. 部署完成后，前往 username.github.io 查看网页。
License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

有问题请留言~