利用Hugo和Cloudflare Pages搭建博客

最近换了电脑，博客已经一年多了，最近更新频率低了，后面会勤快一些把之前研究和学习的都分享出来，（主要是写的太乱了，不整理估计只有自己勉强看得懂，而且有些细节部分的东西时间隔得太长了，我都快忘干净了，整理一下对自己复习也有帮助）；先分享一下最初搭建的完整流程，这也是我能想到的最安全、最方便、最优雅的博客搭建方法，不出意外应该会一直用下去。

选取的原因

• 个人隐私考虑：Cloudflare Pages托管在Cloudflare上，不必自己购买服务器，使用的是Cloudflare的全球网络，不存在中心化的服务器，而且可以配置自己的域名，域名不会保留个人信息，会默认替换为Cloudflare的注册信息，而且可以有“电子邮件路由”功能，可以对外使用我自己的域名，启用邮件转发来隐藏我真实使用的邮件，提高一点点隐私和不必要的麻烦
• 博客安全考虑：背后博客用的是Hugo，Hugo纯静态的页面直接使得正面的攻击面收敛为0，不存在被常规漏洞打击和未来0day打击的风险，同时使用了Cloudflare的CDN，默认提供了强大的DDOS保护，不存在被打下线的风险，博客部署在Cloudflare全球网络上，整体安全系数接近绝对防御。
• 博客颜值考虑：且Hugo的主题很漂亮、也很丰富，如果看腻了也可以随时更换主题，轻松迁移更替
• 社区维护考虑：目前社区一直积极活跃，已经83kstar，业内公认的博客搭建方法，应该能繁荣好多年，虽然现在配置也很麻烦，但好在用的人多参考资料也多

搭建流程

前提准备：

1. 注册一个Github账号
2. 注册一个Cloudflare账户，需要信用卡
3. 本地安装好Git，如下图
4. 提前去 https://github.com/gohugoio/hugo/releases 下载好hugo的对应的二进制文件，并且把它的目录加入你的电脑的环境变量，这样后续方便切换不同

Github上创建博客的项目：

创建完毕后，记下你自己的这个，等会要用这个地址推送hugo 博客到项目中：

hugo.exe version

PS D:\blog\zeroday>  hugo.exe new site zeroday
Congratulations! Your new Hugo site was created in D:\blog\zeroday\zeroday.

Just a few more steps...

1. Change the current directory to D:\blog\zeroday\zeroday.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

这里面已经提示了，要去创建或者安装一个主题，你可以去从这里面挑一个 https://themes.gohugo.io/

我选的是PaperMod，简洁明亮。进到这个目录下，执行这个命令：

git clone https://github.com/adityatelange/hugo-PaperMod.git PaperMod

博客本地预览

基本上已经完成了大部分工作，网站根目录是这个 hugo.toml文件，把这个重命名成hugo.yml：

这个是我拿 https://github.com/adityatelange/hugo-PaperMod/wiki/Installation#sample-hugoyml 这个过来的

baseURL: "https://examplesite.com/"
title: ExampleSite
pagination:
  pagerSize: 5
theme: PaperMod

enableRobotsTXT: true
buildDrafts: false
buildFuture: false
buildExpired: false

minify:
  disableXML: true
  minifyOutput: true

params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ExampleSite
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  author: Me
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false

  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: false
  ShowWordCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: false
  hidemeta: false
  hideSummary: false
  showtoc: false
  tocopen: false

  assets:
    # disableHLJS: true # to disable highlight.js
    # disableFingerprinting: true
    favicon: "<link / abs url>"
    favicon16x16: "<link / abs url>"
    favicon32x32: "<link / abs url>"
    apple_touch_icon: "<link / abs url>"
    safari_pinned_tab: "<link / abs url>"

  label:
    text: "Home"
    icon: /apple-touch-icon.png
    iconHeight: 35

  # profile-mode
  profileMode:
    enabled: false # needs to be explicitly set
    title: ExampleSite
    subtitle: "This is subtitle"
    imageUrl: "<img location>"
    imageWidth: 120
    imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

  # home-info mode
  homeInfoParams:
    Title: "Hi there \U0001F44B"
    Content: Welcome to my blog

  socialIcons:
    - name: x
      url: "https://x.com/"
    - name: stackoverflow
      url: "https://stackoverflow.com"
    - name: github
      url: "https://github.com/"

  analytics:
    google:
      SiteVerificationTag: "XYZabc"
    bing:
      SiteVerificationTag: "XYZabc"
    yandex:
      SiteVerificationTag: "XYZabc"

  cover:
    hidden: true # hide everywhere but not in structured data
    hiddenInList: true # hide on list pages and home
    hiddenInSingle: true # hide on single page

  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link

  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]
menu:
  main:
    - identifier: categories
      name: categories
      url: /categories/
      weight: 10
    - identifier: tags
      name: tags
      url: /tags/
      weight: 20
    - identifier: example
      name: example.org
      url: https://example.org
      weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
pygmentsUseClasses: true
markup:
  highlight:
    noClasses: false
    # anchorLineNos: true
    # codeFences: true
    # guessSyntax: true
    # lineNos: true
    # style: monokai

启动本地预览就能看到博客了

hugo server --buildDrafts

访问本地博客： http://localhost:1313/

主要的字段就是在刚刚配置里面去修改，官方文档写的稀烂，建议问GPT字段怎么用，我这边建议启用这个profileMode的enabled，调整出头像来，imageUrl就使用URL地址即可，把imageWidth注释掉，这样移动端看博客和PC段就会自动适配了：

  profileMode:
    enabled: true # needs to be explicitly set
    title: ZeroDay of EndlessParadox
    subtitle: "This is my blog analyzing Zero-Day"
    imageUrl: "https://avatars.githubusercontent.com/u/48043858"
    #imageWidth: 120
    #imageHeight: 120
    imageTitle: my image
    buttons:
      - name: Posts
        url: posts
      - name: Tags
        url: tags

hugo会自动渲染这部分，刷新一下浏览器缓存，就能看到我们的博客出来了：

还有一些边边角角，我这边就不提及了，可以慢慢熟悉一下这些字段。也是一些体力活，有AI之后就搞的更快了。

正式发布博客

前面搞完了博客基本流程，最关键的就是开始写博客了，我自己是用的obsidian 作为Mardown编辑器本地写好复制过去，首先生成一篇：

hugo new content test.md

文章和内容如下：

要正式发布把draft = true去掉，但是要注意，这个没在posts目录下，真正的做法是放在posts下面：

hugo new posts/test.md

刷新一下就能看到了：

新版本默认居然没配归档，我们要自己new一个出来：

hugo new archives.md

---
title: "Archives"
layout: "archives"
url: "/archives/"
summary: "文章归档"
---

如下，url链接就是到这个字段里面的/archives/ ，建议布局里面也自己链接过去修改一下：

正式推送前删掉这个public文件夹，每次预览的时候会生成的：

文章使用的图片可以放到static文件夹里面，建议不要太大，不适合存放超过20M的东西，会报错说不能更新了。

配置一下名字，两个都要

git config --global user.name "endlessparadox"
git config --global user.email "[email protected]"

window把这个关掉

git config --global core.autocrlf true

之前建的空仓库可以用了：

git init
git commit -m "first commit"
git remote add origin https://github.com/kaliworld/zerodayblog.git
git branch -M main
git push -u origin main

之后私有的仓库就可以使用博客了，给他关联到cloudflare过去。

注册好的cloudflare，找到workers，创建一个新的：

点第二个，导入我们刚刚是私有仓库名字：

选到hugo这位置，其他不用管，默认就是最新的hugo版本：

完成部署，会自动部署到 Cloudflare 全球网络：

在这个位置，有一个Cloudflare的域名，但是不好看，我们可以配置成自己的域名：

这里有自定义域名，在Cloudflare这边买一下配置好就行了，它会自动帮我们加上这个DNS记录：

激活一下就完成了：

提示要等待48小时，这DNS也太慢了吧，总之慢慢等吧。

去吃个饭的时间回来看看，这样全球的DNS信息就同步完成了，完美！注意，即使是活动完全同步全球DNS也需要很久，有些地域的dns可能还没复制过去，完全的全球访问至少要一两天之后。

最后

接下来就是可以愉快的写博客了，似乎没什么要补充了的。请看美少女放松一下心情！这次要分享是的朱雀院椿(Suzakuin Tsubaki)—白毛金瞳小姐姐，人设实力强的离谱，我本来对姐系的感觉就一般般的，但是她是一个例外！可以排到我今年的Rank排名第二的了！

朱雀院椿 — お姉ちゃんだからね?! onee-chan dakara ne

难道我是姐控？不，不可能，我只是白毛控（笑），但这这个姐姐太宠了