阅前须知

  • 阅读本教程，默认你已经拥有github账号，并且会一定基础操作。
  • 阅读本教程，默认您拥有cloud flare账号，并且已经添加域名。
  • 阅读本教程，默认您拥有一定的git基础
  • 阅读本教程，默认您已经成功配置node.js环境

简述

如果你想要无服务器搭建一个博客，并且使用简单。那么本教程可以帮助你

本教程使用的程序为hexo，使用的环境为 ubuntu 22.04

本地部署

  1. 安装hexo主程序
    注意事项

    • 请确保nodejs版本高于12.0
    • 如果是非linux系统，确保安装了git

    一切准备就绪后，使用npm install -g hexo-cli 进行安装，如无报错就可进行下一步

  2. 创建hexo文件夹

    • 安装 Hexo 完成后，请执行下列命令，将<folder>替换为你想要的名字，请不要使用中文命名
      1
      2
      3
      hexo init <folder>
      cd <folder>
      npm install
    • Hexo 将会在指定文件夹中新建所需要的文件。
    • 在该目录下有_config.yml文件，该文件为配置文件，配置项详见此处

  3. Butterfly主题安装

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

    修改_config.yml：

    1
    theme: butterfly

    Butterfly主题配置指南

切记不要本地构建

切记不要本地构建

切记不要本地构建

如果为了查看效果而构建了，请一定在提交前删除public文件夹

数据上云

创建远程仓库

在github或其类似物上托管一个你自己的仓库即可。并记得将

准备cloudflare凭证

  1. 访问Cloudflare API令牌页面
  2. 创建新令牌选择 Edit Cloudflare Workers 模板
  3. 在GitHub仓库 Settings → Secrets 添加：
    • CLOUDFLARE_API_TOKEN
    • CLOUDFLARE_ACCOUNT_ID
  4. 创建pages项目（请记住项目名，后面会用到）

使用Github Action自动化

github可以帮助我们远程构建博客html文件并推送到cloudflare pages及github pages进行部署。

下面给出我使用的action配置文件作为参考，请自行根据需要修改

  1. 修改branches值来匹配你的仓库分支名称
  2. 在Install additional Hexo plugins步骤添加需要的插件
  3. Cloudflare的--project-name参数对应提前创建好的pages项目名
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
name: Deploy Hexo to GitHub Pages and Cloudflare Pages

on:
  push:
    branches:
      - blog 

permissions: 
  contents: read
  pages: write
  id-token: write

concurrency:  
  group: "pages"
  cancel-in-progress: true

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      # ---- 代码检出 ----
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          submodules: true  
          fetch-depth: 0     

      # ---- Node环境配置 ----
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'  
          cache: 'npm'       

      # ---- 依赖安装 ----
      - name: Install dependencies
        run: npm ci  

      - name: Install Hexo CLI
        run: npm install hexo-cli -g  

      # ---- 主题依赖处理 ----
      - name: Install additional Hexo plugins
        run: |
          npm install hexo-renderer-pug hexo-renderer-ejs hexo-renderer-stylus hexo-renderer-marked hexo-generator-feed hexo-generator-sitemap hexo-generator-archive --save    

      - name: Setup theme
        run: |  
          if [ -f "themes/butterfly/package.json" ]; then
            cd themes/butterfly
            npm install
            cd ../..
          fi

      # ---- 构建阶段 ----
      - name: Build Hexo site
        run: |
          npx hexo clean  
          npx hexo generate  

      # ---- GitHub Pages部署 ----
      - name: Setup Pages
        uses: actions/configure-pages@v4
        
      - name: Upload GitHub Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'public' 
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

      # ---- Cloudflare Pages部署 ----
      - name: Publish to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}  
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy public --project-name=blog --branch production
          wranglerVersion: '3.0.0'

开始你的创作之旅

现在你只需要在你的任何设备上仅克隆仓库就可以写文章了（但请注意创建页面仍然需要安装hexo来进行）， 剩下的部署工作将自动完成，访问GitHub Pages和Cloudflare pages即可查看最新内容。