My First Post

架构设计概述

整个博客系统基于 Hugo 生成静态网站，并托管在 Cloudflare Pages 上。博客的内容和设置都保存在本地仓库中，图片等静态资源与 Markdown 文件一起被上传并部署。以下是博客的主要组成部分：

• Hugo: 用于生成静态博客网站（支持 Markdown、代码高亮、数学公式渲染等）。
• Cloudflare Pages: 托管和部署 Hugo 生成的静态网站。
• Disqus 或其他评论系统: 用于评论功能，集成在 Hugo 模板中。
• 前端搜索: 通过 Lunr.js 或 Fuse.js 实现的静态页面搜索功能。
• 命令行上传工具: 一个定制的脚本来简化 Markdown 文件和资源的上传与部署。

+++

Step 1: Hugo 基础搭建

1. 安装 Hugo

• 下载并安装 Hugo: 安装指南

2. 创建新 Hugo 网站

在你的本地机器上，运行以下命令来创建一个新的 Hugo 网站：

1

hugo new site myblog

3. 选择一个主题

Hugo 支持各种主题，你可以选择一个支持 Markdown、代码高亮和目录的主题，例如：Ananke。你可以通过 Git 子模块添加主题：

1
2
3

cd myblog
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

4. 配置 config.toml

修改网站的配置文件 config.toml，以启用主题并设置一些基础配置：

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

baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Awesome Blog"
theme = "ananke"

# 开启 MathJax 支持
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

  [markup.highlight]
    noClasses = false
    style = "monokai"

5. 渲染 Markdown 和数学公式

Hugo 可以使用 MathJax 渲染数学公式。你需要在 layouts/_default/baseof.html 中加入 MathJax 的引入脚本：

1
2
3

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

6. 创建第一篇 Markdown 文章

使用以下命令创建一篇 Markdown 文章：

1

hugo new posts/my-first-post.md

在 content/posts/my-first-post.md 文件中，你可以写 Markdown，插入代码块和数学公式。

7. 本地测试

在本地启动 Hugo 服务器，查看渲染效果：

1

hugo server

+++

Step 2: 实现评论系统功能

1. 集成 Disqus

在 config.toml 文件中添加 Disqus 支持：

1

disqusShortname = "your-disqus-shortname"

你可以通过 front matter 来控制每篇文章是否启用评论：

1
2
3
4
5
6

+++
title: "My First Post"
date: 2024-09-30
draft: false
comments: true  # 是否启用评论
+++

2. 控制评论启用/禁用

在每篇文章的 front matter 中设置 comments: true/false 来控制该文章是否允许评论。Hugo 模板可以通过这个字段判断是否显示 Disqus 评论框。

+++

Step 3: 搜索功能集成

1. 使用 Lunr.js 生成搜索索引

你可以在 Hugo 构建时自动生成一个 JSON 索引文件，然后用 Lunr.js 在前端实现搜索。创建一个 layouts/_default/search.html 页面用于搜索功能。

2. 前端引入 Lunr.js

在模板中引入 Lunr.js，创建一个简单的前端搜索页面，加载生成的 JSON 索引并实现搜索功能。

+++

Step 4: Cloudflare Pages 部署

1. 将 Hugo 网站托管到 GitHub/GitLab

将本地的 Hugo 网站初始化为 Git 仓库并推送到 GitHub 或 GitLab：

1
2
3
4
5

git init
git remote add origin https://github.com/yourusername/myblog.git
git add .
git commit -m "Initial commit"
git push -u origin master

2. 配置 Cloudflare Pages

• 登录 Cloudflare Pages 并连接到你托管的 Git 仓库。
• Cloudflare 会自动构建和部署 Hugo 生成的静态网站。

+++

Step 5: 开发本地上传脚本

1. 脚本设计思路

你可以用 Python 或 Node.js 编写一个命令行工具来自动执行以下步骤：

1. 将 Markdown 文件移动到 content/posts/ 目录。
2. 处理图片等资源文件，确保图片路径正确。
3. 自动运行 git add、git commit 和 git push，触发 Cloudflare Pages 的部署。

2. 脚本示例（Python）

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

import os
import shutil
import subprocess

def upload_post(file_path):
    post_dir = "content/posts"
    if not os.path.exists(post_dir):
        os.makedirs(post_dir)
    
    # 移动文件到 Hugo 目录
    shutil.copy(file_path, post_dir)
    
    # Git 提交并推送
    subprocess.run(["git", "add", "."])
    subprocess.run(["git", "commit", "-m", f"Add post {os.path.basename(file_path)}"])
    subprocess.run(["git", "push", "origin", "master"])

if __name__ == "__main__":
    import sys
    if len(sys.argv) != 2:
        print("Usage: myblog upload <file.md>")
    else:
        upload_post(sys.argv[1])

这个脚本会把 Markdown 文件复制到 Hugo 项目的 content/posts/ 目录中，然后自动执行 Git 操作，触发部署。

+++

总结

你现在有了一个清晰的架构和执行步骤来完成博客的搭建。首先，搭建 Hugo 站点并配置好渲染和评论系统，接着添加搜索功能，最后将网站托管到 Cloudflare Pages。通过编写一个简单的上传脚本，可以轻松将内容发布到博客。