基于Hugo + GitHub + Cloudflare Pages的博客搭建 - 图形化指南

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

graph TB
    A[👨‍💻 开发者] --> B[📝 本地Hugo项目]
    B --> C[🔄 Git推送]
    C --> D[🚀 GitHub仓库]
    D --> E[🌐 Cloudflare Pages]
    E --> F[⚙️ 自动构建]
    F --> G[📄 生成静态网站]
    G --> H[🚀 生产环境部署]
    I[👥 访客] --> H
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style D fill:#fff3e0
    style E fill:#e8f5e8
    style H fill:#4caf50

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

graph TB
    A[😀用户] --> B[注册Cloudflare账号]
    B --> C[添加支付方式]
    C --> D[✔准备完成]
    
    A --> E[注册Github账号]
    E --> F[创建Github仓库]
    F --> D
    
    A --> G[安装Git]
    G --> H[安装Hugo]
    H --> D
    
    
    style A fill:#e0f2f1
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style D fill:#e8f5e8
    style E fill:#fce4ec
    style F fill:#e1f5fe 

1
2
3
4
5

flowchart TD
    A[hugo new site] --> B[创建项目结构]
    B --> C[安装主题]
    C --> D[配置config.toml]
    D --> E[本地测试]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

终端命令执行界面
┌─────────────────────────────────────────────────┐
│ $ hugo new site my-blog                         │
│ Congratulations! Your new Hugo site is created! │
│                                                 │
│ $ cd my-blog                                    │
│ $ git init                                      │
│ Initialized empty Git repository...             │
│                                                 │
│ $ cd themes                                     │
│ $ git submodule add https://github.com/themes/  │
│ anatole.git                                     │
└─────────────────────────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

my-blog/
├── 📁 archetypes/          # 内容模板
├── 📁 content/             # 📝 文章内容
│   └── 📁 posts/           # 博客文章
├── 📁 data/                # 网站数据
├── 📁 layouts/             # 布局文件
├── 📁 static/              # 🖼️ 静态资源
│   ├── 📁 images/
│   └── 📁 css/
├── 📁 themes/              # 🎨 主题文件
│   └── 📁 anatole/         # 选择的主题
├── 📄 config.toml          # ⚙️ 配置文件
└── 📄 README.md            # 项目说明

  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
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

# 🎯 网站基本信息
baseurl: https://ryan1998.pages.dev/
languageCode: en-us
theme: stack
title: Ryan's Blog
copyright: Ryan Young
DefaultContentLanguage: zh-cn
hasCJKLanguage: true

languages:
  zh-cn:
    languageName: 中文
    title: Ryan's Blog
    weight: 2
    params:
      sidebar:
        subtitle: 思考 | 学习 | 分享

services:
  # Change it to your Disqus shortname before using
  disqus:
    shortname: "stack"
  # GA Tracking ID
  googleAnalytics:
    id:

pagination:
  pagerSize: 10
  
permalinks:
  post: /p/:slug/
  page: /:slug/

params:
  mainSections:
    - post
  featuredImageField: image
  rssFullContent: true
  favicon: /favicon.ico # /static/favicon.ico
  
  footer:
    since: 2025
    customText: 持续学习，共同进步！ 🚀

  dateFormat:
    published: 2006-01-02 # Jan 02, 2006
    lastUpdated: Jan 02, 2006 15:04 MST

  sidebar:
    # emoji: 🤔
    subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    avatar:
      enabled: true
      local: true
      src: img/think-emoji.png # /assets/img/think-light.png

  article:
    math: false
    toc: true
    readingTime: true
    license:
      enabled: true
      default: Licensed under CC BY-NC-SA 4.0

  comments:
    enabled: true
    provider: giscus

    giscus:
      repo: "ryanyoung1998/blog"
      repoID: "xxxxxxxx"
      category: "Announcements"
      categoryID: "xxxxxxxx"
      mapping: "pathname"
      strict: "0"
      reactionsEnabled: "1"
      emitMetadata: "0"
      inputPosition: "bottom"
      lightTheme: "light"
      darkTheme: "dark"
      lang: "zh-CN"
      crossorigin: "anonymous"

  widgets:
    homepage:
      - type: search
      - type: archives
        params:
          limit: 5
      - type: categories
        params:
          limit: 10
      - type: tag-cloud
        params:
          limit: 10
    page:
      - type: toc

  opengraph:
    twitter:
      # Your Twitter username
      site:
      # Available values: summary, summary_large_image
      card: summary_large_image

  defaultImage:
    opengraph:
      enabled: false
      local: false
      src:

  colorScheme:
    # Display toggle
    toggle: true

    # Available values: auto, light, dark
    default: auto

  imageProcessing:
    cover:
      enabled: true
    content:
      enabled: true

menu:
  main: []

  social:
    - identifier: github
      name: GitHub
      url: https://github.com/ryanyoung1998/blog
      params:
        icon: github-icon # /assets/img/github-icon.svg
  
    - identifier: bilibili
      name: Bilibili
      url: https://space.bilibili.com/27682859
      params:
        icon: bilibili-icon # /assets/img/bilibili-icon.svg

related:
  includeNewer: true
  threshold: 60
  toLower: false
  indices:
    - name: tags
      weight: 100
    - name: categories
      weight: 200

markup:
  goldmark:
    extensions:
      passthrough:
        enable: true
        delimiters:
          block:
            - - \[
              - \]
            - - $$
              - $$
          inline
            - - \(
              - \)
    renderer
      ## Set to true if you have HTML content inside Markdown
      unsafe: true
  tableOfContents:
    endLevel: 4
    ordered: true
    startLevel: 2
  highlight:
    noClasses: false
    codeFences: true
    guessSyntax: true
    lineNoStart: 1
    lineNos: true
    lineNumbersInTable: true
    tabWidth: 4

1
2
3
4
5

终端命令
┌─────────────────────────────────────────────────┐
│ $ hugo new posts/my-first-post.md               │
│ Content created at content/posts/my-first-post.md│
└─────────────────────────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

---
title: "我的第一篇博客文章"
date: 2024-01-15T10:00:00+08:00
draft: false
tags: ["Hugo", "教程"]
categories: ["技术"]
summary: "这是我的第一篇使用Hugo搭建的博客文章"
---

## 🎉 欢迎阅读

这是我的第一篇博客文章，使用Hugo静态网站生成器创建。

## 📝 代码示例

```python
def hello_world():
    print("Hello, Hugo!")
    return "欢迎来到我的博客"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

sequenceDiagram
    participant U as 用户
    participant H as Hugo服务
    participant B as 浏览器

    U->>H: hugo server -D
    H->>H: 启动开发服务器
    H-->>U: 服务器运行在 http://localhost:1313
    U->>B: 打开浏览器访问
    B->>H: 请求页面
    H-->>B: 返回渲染页面
    U->>H: 修改文件自动重载
    H-->>B: 自动刷新页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

本地开发终端界面
┌─────────────────────────────────────────────────┐
│ $ hugo server -D --navigateToChanged            │
│                                                 │
│ Start building sites ...                        │
│ hugo v0.120.4+extended ... buildDate: unknown   │
│ Running in Fast Render Mode. For full rebuilds  │
│ on change: hugo server --disableFastRender      │
│ Web Server is available at http://localhost:1313│
│ Press Ctrl+C to stop                            │
│                                                 │
│ Change detected, rebuilding site.               │
│ Total in 45 ms                                  │
└─────────────────────────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

终端配置界面
┌─────────────────────────────────────────────────┐
│ # 配置Git用户信息                              │
│ $ git config --global user.name "Your Name"     │
│ $ git config --global user.email "your-email@example.com"│
│                                                 │
│ # 初始化Git仓库                                │
│ $ git init                                      │
│ $ git add .                                     │
│ $ git commit -m "初始提交: Hugo博客项目"        │
│                                                 │
│ # 连接到GitHub远程仓库                         │
│ $ git remote add origin https://github.com/your-│
│ username/my-blog.git                            │
│ $ git branch -M main                            │
│ $ git push -u origin main                       │
└─────────────────────────────────────────────────┘

1
2
3
4
5
6
7

flowchart TD
    A[登录Cloudflare] --> B[进入Pages]
    B --> C[创建项目]
    C --> D[连接GitHub账号]
    D --> E[选择仓库]
    E --> F[配置构建设置]
    F --> G[开始部署]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

sequenceDiagram
    participant D as 开发者
    participant G as GitHub
    participant C as Cloudflare Pages
    participant B as 构建环境
    participant CDN as 全球CDN

    D->>G: git push origin main
    G->>C: Webhook触发构建
    C->>B: 启动构建容器
    B->>B: git clone仓库
    B->>B: hugo构建静态网站
    B->>B: 生成public目录
    B->>CDN: 部署到全球网络
    C->>D: 构建成功通知

1
2
3
4
5

flowchart TD
    A[撰写新文章] --> B[本地测试]
    B --> C[推送到GitHub]
    C --> D[自动部署]
    D --> E[在线发布]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

日常更新终端界面
┌─────────────────────────────────────────────────┐
│ # 1. 创建新文章                                │
│ $ hugo new posts/$(date +%Y-%m-%d)-new-post.md  │
│                                                 │
│ # 2. 本地预览                                  │
│ $ hugo server -D                                │
│                                                 │
│ # 3. 发布到生产环境                            │
│ $ git add .                                     │
│ $ git commit -m "发布新文章: $(date +%Y-%m-%d)" │
│ $ git push origin main                          │
│                                                 │
│ # 4. 等待自动部署完成                          │
│ # 访问: https://my-blog.pages.dev              │
└─────────────────────────────────────────────────┘