前言

前言B话有点多，建议直接跳过。

虽然各大云服务器厂商都推出有便宜的轻量服务器，对于个人使用搭建点服务是完全足够的，但是一般优惠时长都在一年左右，续费价格恢复原价直接起飞，基本需要每年一换，像博客这种容易吃灰的经常会忘记，就算想起来了也可能懒得折腾了。云服务器还需要搭配域名使用（你能记住IP也随便），为了安全还需要ssl证书，免费的ssl证书现在最长只有3个月，还需要折腾自动续签。如果使用国内的服务器还需要备案bababa

对于不想折腾的直接使用简书、CSDN也行，就是苦了偶尔点进来的小伙伴们~

于是目光转向了无服务器应用+静态博客方案，最简单的可能就是github pages了，虽然国内访问看运气，但是那个神奇的东西不是每个程序员必备的吗😂

本来想法挺好的，但是又耐不住折腾的心，又逐步尝鲜其他的无服务器厂商，比如Vercel（国内访问速度慢，赠送域名被墙），Netlify（挺好的，但是耐不住CF他善），Cloudflare（本文主角）。

Cloudflare免费计划包含：

Workers 和 Pages 每天共10万的请求，Pages的静态页面访问不计入其中
额外赠送5G的D1数据库（约等于Sqlite）
KV存储（适用于写入少读取多）
一定额度的AI（绘图和大模型）
免费的二级域名（workers.dev被墙，pages.dev可用）
免费SSL证书和CDN
如果自个儿有域名，还可以托管到CF开启免费SSL和CDN（虽然不一定更快）

免费额度之富裕，用来搭建个人博客搓搓有余，还能随便写点简单的api放上去跑。而且Cloudflare算是国际大厂了，平常见到的小黄云就是他们的免费服务，可靠性和安全性有保障。

于是毫不犹豫的紧紧抱着赛博活佛的大腿~

PS：2025-04-02，CF增加了Worker的构建时间收费，但是依然有提供了充足的免费额度，且用且珍惜，切勿滥用。

方案介绍

github（不用多说吧，存放你的MD，顺便作为项目代码）
Hugo（MD生成静态网页，使用Paper-mod主题）
Cloudflare Pages（提供静态网页访问服务）
Twikoo（评论）

Github

在github新建仓库（建议私人），然后在本地初始化，需要Github与Cloudflare绑定方便后续操作。这里假设创建了名为cf-blog的仓库和文件夹。

Hugo

安装

先附上官方链接作为备用指引

直接在 Hugo的GitHub Releases 中下载当前系统的二进制文件（对，直接可执行，不用安装），建议下载hugo_extended，方便使用主题，然后我的做法是直接放在Github项目文件夹cf-blog下，以后直接在该文件夹下直接打开终端就能用，不需要配置环境变量。

在cf-blog下打开终端，测试效果

主题

Hugo的很多配置都和主题深度绑定，本文的配置适合Paper-Mod，对于各种好看的主题反而不一定适用，换用其他主题请一定要查看主题Github的指引。

在Hugo主题页面选择喜欢的主题，这里以榜首PaperMod为例，直接将git仓库作为模块放到themes下即可

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/hugo-PaperMod

~~如果不设置主题也能用，但是真的有人不用主题吗~~~ 不设置主题会404

这里用PaperMod只是他简洁、功能全、问题少，在电脑上的话有点单调和空了，在手机上看倒还凑合。此外还推荐Stack主题。

PS：后续使用其他主题时如果出现问题，不妨先切换成PaperMod，正常显示后参考PaperMod的代码在layouts下修复。

配置

Hugo其实支持很多格式的配置文件，像json、yaml、toml等等，但是现在官方用toml，就用toml吧。

在cf-blog下新建hugo.toml，编辑文件

# 基本配置
languageCode = "zh-cn"    #中文
theme = "hugo-PaperMod"

# 参数配置
[params]
#  description = "This is my personal website"
#  author = "qiaoqiao"         #作者名
  defaultTheme = "auto"       #默认主题颜色
  ShowToc = true              #显示目录
  TocOpen = true             #目录默认是否展开
  ShowWordCount = true        #字数统计
  ShowReadingTime = true      #阅读时间
#  comments = true            #全局评论

上文的配置也是从别的博客参考来的（这像话吗），在这里的配置是全局的，md里面可以进行覆盖，待会会继续说。

建议先注释掉comments，等下配置评论时再启用，不然容易出bug。我是个低调的人，所以选择注释author，description也会在每篇md中配置。

为了让博客更像博客（？），还可以添加如下配置

# 菜单配置 
[menu]
  [[menu.main]]
    name = "🏡首页"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "📄归档"
    url = "/archives"
    weight = 2
  [[menu.main]]
    name = "✒️文章"
    url = "/post/"
    weight = 3
  [[menu.main]]
    name = "📌标签"
    url = "/tags/"
    weight = 4

（也是毛的上一个博客的）大概长这样，搜索功能待会添加。

调试运行

在终端直接运行

hugo server

然后浏览器打开提示中的链接就可以先看看效果，当然现在你点击的页面都是404，接着就要添加文章了。

添加文章

在cf-blog下新建content文件夹，再在里面新建post文件夹，然后在post里面新建你的第一篇博客Hello World文件夹，在里面新建index.md

---
title: "Hello World"
description: "This is my first blog"
date: 2025-04-02T17:00:00+08:00
tags: ["hello", "test"]
---

# Hello World

Hello World

## Hello World

Hello World

### Hello World

Hello World

如果你的终端和浏览器还没关掉，可以刷新一下看看效果。

如果你的md中包含图片，也可以直接放在Hello World下，或者新建一个pic文件夹单独存放，md中使用相对引用即可。

![](hello_world.png)
![](pic/hello_world.png)

本文的md目录结构和官方的不太一样，就是为了方便图片的引用，当然你有图床就随便吧。

PS：md中的date时间一定要早于当前时间，否则文章会出不来。（踩坑1）

PS：有的博客会创建posts文件夹而不是post，能不能用取决于主题和配置，但是大多数主题都用的post。（踩坑4）

导航标签页

归档

在content目录下新建archives.md

---
title: "归档"
layout: "archives"
summary: "archives"
---

然后右上角的归档就不再是404啦。

搜索

在content目录下新建search.md

---
title: "搜索"
layout: "search"
summary: "search"
---

修改hugo.toml，在后面追加

[outputs]
  home = ['html', 'json', 'rss']
  page = ['html']

依托强大的PaperMod主题，就是这么简单！

PaperMod会自动生成index,json，如果public目录下没有生成index,json，可参考：Hugo实现简单站内搜索功能

文章和标签

Paper-mod默认会配置好文章和标签，但是现在点进去的标题应该是英文的Posts和Tags，接下来修改成中文。

在content目录下的post目录，新建文件_index.md，编辑

---
title: "文章"
---

在content目录下新建tags目录，新建文件_index.md，编辑

---
title: "标签"
---

欣赏完后，记得将仓库push到github上

Cloudflare部署

先参考网上教程注册Cloudflare，并选择免费计划，然后和Github绑定。建议直接共享整个github项目。

在Worker和Pages中，创建一个Pages，（先点左边Worker和Pages，再点右上角蓝色创建，再点中间标题Pages），选择连接到github，选中你的仓库cf-blog，往下点开始设置

然后按照如下图选择框架Hugo，添加环境变量HUGO_VERSION，值为上面使用命令查看的一大串中的数字

记得，一定要设置环境变量，避免各种奇怪的问题。

点击保存并部署后，等待部署进度完成后（一般一两分钟），即可打开赠送的域名cf-blog-xxxx.pages.dev查看效果了。

后续需要新增文章，在本地cf-blog中添加好md后，直接推送到github仓库，Cloudflare会自动构建并部署。

如果你的博客不想让别人评论，那么这一步可以不需要弄。

目前评论插件选择twikoo，无它，twikoo支持使用Cloudflare部署后端，并使用Cloudflare D1作为数据库，如果需要图片评论，还可以用Cloudflare R2作为图床。All IN Cloudflare😉👍

先放上twikoo指引作为参考，直接下滑到Cloudflare部分（好吧，官方文档全是命令，其实可以全手动操作）

后端部署

~~fork该仓库~~，为了安全起见，还是建议先clone仓库后，再新建私人仓库push上去，fork的仓库无法设置为私人仓库。注意区别原来的cf-blog仓库，仓库名最好保持默认的twikoo-cloudflare。

在Cloudflare左侧找到D1 SQL数据库，创建一个twikoo数据库，然后点进去，点击控制台，将twikoo-cloudflare仓库中的schema.sql复制下来，粘贴进控制台执行。然后应该能看见创建的表

如果你需要twikoo的图片评论，需要另外创建一个名为twikoo的Cloudflare R2对象存储池。Cloudflare R2需要绑定银行卡或者paypal；
如果你不想绑定或者不需要图片评论，则编辑twikoo-cloudflare仓库中的wrangler.toml，将r2_buckets部分注释掉或者删掉。（踩坑2）

继续编辑wrangler.toml，将其中的database_id替换为你创建的数据库id，可以在D1 SQL 数据库首页直接查看，就是那长长的xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx。

回到Cloudflare的Workers和Pages页面，创建新的Workers，右侧选择你的twikoo-cloudflare仓库

在当前页面填入构建命令

npx wrangler deploy --minify

并且检查名称是否为twikoo-cloudflare（踩坑3）

（忽略红色字）

在该Worker的设置中能看到当前worker的访问链接，但是workers.dev域名被墙，需要新建一个Pages来代理，或者绑定自己的域名。

新建一个Github仓库twikoo-proxy，直接创建新文件**_worker.js**，内容如下，替换其中的worker链接为刚才的workers.dev链接

export default {
    async fetch(request, env) {
      let url = new URL(request.url);
      if (url.pathname.startsWith('/')) {
        url.hostname="<你的worker链接如twikoo-cloudflare.xxxxxxxx.workers.dev>";
        let new_request=new Request(url,request);
        return fetch(new_request);
      }
      return env.ASSETS.fetch(request);
    }
  };

提交后，在Cloudflare新建Pages，选择twikoo-proxy仓库，然后直接部署，即可在自定义域看到twikoo-proxy-xxxxx.pages.dev，该链接为你twikoo的api，直接浏览器访问可查看部署的版本号。

所以目前为止，我们共有3个服务，分别对应3个github仓库

Pages博客静态网页服务，对应仓库cf-blog
Worker博客评论服务twikoo，对应仓库twikoo-cloudflare
Pages评论Worker的代理服务，对应仓库twikoo-proxy

前端部署

同样附上官方指引作为参考

在你的本地cf-blog项目下，新建layouts文件夹，在里面新建partials文件夹，新建文件comments.html，替换其中的envId为刚才的twikoo api。

<div id="tcomment"></div>
<script src="/assets/js/twikoo.min.js"></script>
<script>
twikoo.init({
  envId: '<你的twikoo api，即twikoo-proxy-xxxxx.pages.dev>',
  el: '#tcomment',
})
</script>

layouts目录下的内容会覆盖你的主题同名文件，当需要对主题作出修改时，可以将主题目录下的文件复制到这里进行修改。

在cf-blog项目下新建static文件夹，再在里面新建assets文件夹，再在里面新建js文件夹，将官方指引中更换 CDN 镜像的js文件下载下来，注意版本号和后端部署的版本号一致，放到js目录下。

当然，也可以直接使用CDN文件，将上面的/assets/js/twikoo.min.js替换为CDN链接即可，推荐使用registry.npmmirror.com和cdn.jsdelivr.net的。

然后修改hugo.toml，将comments设置为true。

同样的，如果此时hugo server的终端还没关闭，刷新浏览器就可以看到效果了。第一次评论会弹出密码设置框，按提示弄就好。

如果此时出现错误，或者评论没有显示，可能是你的主题不支持comments，或者支持的别的comments，这时需要在layouts目录下新建_default文件夹，然后将你主题目录下的layouts -> _default -> single.html文件复制到刚刚新建的_default目录，并编辑，在合适的位置放上comments，paper-mod主题是把comments放在最底下的</article>标签上方。

  {{- if (.Param "comments") }}
  {{- partial "comments.html" . }}
  {{- end }}

最后，push你的仓库，一切完成。

如果想增加网站访问信息，可以参考https://blog.farb.top/p/hugo_stack_vercount/，使用Vercount，有免费额度，个人使用足够。

参考文章

https://www.yuweihung.com/posts/2021/hugo-github-pages-blog/

https://www.beizigen.com/post/hugo-implements-simple-on-site-search/

https://blog.farb.top/p/hugo_stack_vercount/

第一次写长文的博客，有点累，可能也不知道下一篇是什么时候，吃灰吧~

前言#

方案介绍#

Github#

Hugo#

安装#

主题#

配置#

调试运行#

添加文章#

导航标签页#

归档#

搜索#

文章和标签#

Cloudflare部署#

评论#

后端部署#

前端部署#

参考文章#

前言