3分钟使用Hexo搭建自己的博客

1. Hexo 是什么？

Hexo 是一个快速、简洁且高效的博客框架。可以使用 Markdown 写文章，方便高效，无需后台服务，静态资源即可展示。搭配 github pages 或者个人云服务器都可以部署。

2. 安装

1
npm install -g hexo-cli

3. 初始化

1
2
3
hexo init <project-name>
cd <project-name>
npm install

4. 主要 api

  1. 创建新文章
1
hexo new <title>
  • 在source/_posts/下新建

例如创建 foo 页，在source/_posts/目录下就会多出一个foo.md文件，就在那里面写文章

1
hexo new foo
  • 在source下新建其它的目录

例如在source/about/下创建bar.md文件

1
hexo new page --path about/bar "bar"
  1. 生成静态文件

项目根目录会多出一个public文件夹，就是编译过后的html静态文件

1
hexo generate
  1. 清除缓存

把上面生成的public文件夹删掉

1
hexo clean
  1. 启动服务

默认情况下，http://localhost:4000访问

1
hexo server

5. 安装心仪的主题

  1. hexo themes

这么多主题，总有一款适合你

  1. 本文选择的主题hexo-theme-fluid
  • 主题安装
1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制进去

  • 配置主题

修改 Hexo 博客目录中的 _config.yml:

1
2
3
theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

6. 部署

6.1 github pages 部署

  1. 在你的 github 上创建一个名为<你的github用户名>.github.io的仓库

  2. 本地生成 ssh 密钥对

1
ssh-keygen -t rsa -C "用户名@example.com "

  1. 在仓库Settings > Deploy Keys中添加公钥内容，并勾选访问权限，最后确定

  2. 在仓库Settings > Secrets中添加私钥，key 为DEPLOY_KEY，内容为私钥内容

  3. 项目_config.yml配置文件和主题配置文件配置deploy字段

1
2
3
4
deploy:
  type: git
  repo: <你的github仓库 SSH下载链接>
  branch: gh-pages
  1. .github/workflows/deploy.yml
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
name: Hexo Github Pages Deploy

# https://github.com/marketplace/actions/hexo-action?version=v1.0.4

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    name: A job to deploy blog.
    steps:
      - name: Checkout
        uses: actions/checkout@v1
        with:
          submodules: true # Checkout private submodules(themes or something else).

      # Caching dependencies to speed up workflows. (GitHub will remove any cache entries that have not been accessed in over 7 days.)
      - name: Cache node modules
        uses: actions/cache@v1
        id: cache
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: npm ci

      # Deploy hexo blog website.
      - name: Deploy
        id: deploy
        uses: sma11black/hexo-action@v1.0.3
        with:
          deploy_key: ${{ secrets.DEPLOY_KEY }}
          user_name: <你的github用户名> # (or delete this input setting to use bot account)
          user_email: <你的github邮箱> # (or delete this input setting to use bot account)
          commit_msg: ${{ github.event.head_commit.message }} # (or delete this input setting to use hexo default settings)
      # Use the output from the `deploy` step(use for test action)
      - name: Get the output
        run: |
          echo "${{ steps.deploy.outputs.notify }}"
  1. 使用git提交代码，在仓库Actions里可以看到 yml 配置文件的自动执行日志，执行结束后，不出意外的话，浏览器里访问https://<你的github用户名>.github.io，可以看到你的博客了！

6.2 docker 容器部署在个人云服务器

  1. 在 github 仓库Settings > Secrets中添加你的阿里云镜像容器服务账号，key 为ALIYUN_DOCKER_USERNAME，dockerhub 等也可以，这里以阿里云镜像容器服务为例

  2. 在 github 仓库Settings > Secrets中添加你的阿里云镜像容器服务密码，key 为ALIYUN_DOCKER_PASSWORD

  3. Dockerfile

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
# 1. 基础镜像安装
FROM alpine:3.15 AS base

ENV NODE_ENV=production \
  APP_PATH=/usr/share/nginx/hexo

WORKDIR $APP_PATH

# 使用国内镜像，加速下面 apk add安装
# 如果是在github上打包镜像，无需使用内内镜像，注释掉即可
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

RUN apk add --no-cache --update nodejs=16.14.0-r0 yarn=1.22.17-r0

# 2. 基于基础镜像安装项目依赖和打包
FROM base AS install

COPY . ./

RUN yarn install

RUN yarn run build

FROM base AS result

# 将public目录下的文件全部复制到/usr/share/nginx/hexo下面
COPY --from=install $APP_PATH/public .

# 3. 最终基于nginx进行构建
FROM nginx:alpine

WORKDIR /usr/share/nginx/hexo

# 添加自己的配置 default.conf 在下面
ADD nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=result /usr/share/nginx/hexo .

EXPOSE 80
  1. .github/workflows/deploy.yml
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
name: deploy ci

on:
  push: # push 时触发ci
    branches: [main] # 作用于main分支
  # pull_request:
  #   branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    # strategy:
    #   matrix:
    #     node-version: [14.x]
    #     # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      # 拉取main分支代码
      - name: Checkout
        uses: actions/checkout@v2

      # # 指定nodejs版本
      # - name: Use Node.js ${{ matrix.node-version }}
      #   uses: actions/setup-node@v2
      #   with:
      #     node-version: ${{ matrix.node-version }}
      #     cache: "yarn"

      # # 安装依赖
      # - name: install
      #   run: sudo yarn install

      # # 打包
      # - name: build
      #   run: sudo yarn run build

      # 制作docker镜像并推送到阿里云容器镜像服务
      - name: build and push docker image
        run: |
          echo ${{ secrets.ALIYUN_DOCKER_PASSWORD }} | docker login registry.cn-hangzhou.aliyuncs.com --username ${{ secrets.ALIYUN_DOCKER_USERNAME }} --password-stdin
          docker image build -t hexo-blog .
          docker tag hexo-blog registry.cn-hangzhou.aliyuncs.com/<命名空间>/<镜像仓库名>:latest
          docker push registry.cn-hangzhou.aliyuncs.com/<命名空间>/<镜像仓库名>:latest
          docker logout
  1. 使用 docker 容器可视化管理，比如portainer等，拉取刚才制作的镜像，然后运行容器。或者登录云服务器，手动拉取镜像再运行容器
1
2
3
4
5
# 拉取镜像
docker pull registry.cn-hangzhou.aliyuncs.com/<命名空间>/<镜像仓库名>:latest

# 运行容器
docker container run -d -p <你的服务器宿主机向外暴露的端口>:80 --name hexo-blog registry.cn-hangzhou.aliyuncs.com/<命名空间>/<镜像仓库名>:latest
  1. 不出意外，浏览器里访问http:<你的ip或者配好的域名>:<端口>，可以看到你的博客了！

7. 参考资料

  1. Hexo 官方文档
  2. Hexo Fluid 主题用户手册
  3. Hexo Github Action