一直听说建博客可以薅 github 和 cloudflare 羊毛,而且很容易实现。真正做了一遍,竟发现网上找到的文章,都有坑。
包括 hugo、cloudflare 官网,以及 GPT 的说辞。
前提:你的终端 cli 得能够较为稳定的 访问 github。
(否则,即便照着官网文章逐字逐句操作也会任意变形……别说我没提醒你)
一、hugo init 博客项目
安装 hugo
brew install hugo # MacOS
创建 hugo 站点
hugo new site <your_blog_project_name>
# 这将会创建一个名为 your_blog_project_name 的项目
配置 hugo 主题
1、从项目的根目录中,启动 hugo 模块系统(如果您还没有这样做):
hugo mod init github.com/<your_user>/<your_project>
2、进入我们刚创建的 hugo 站点文件夹里, 打开 hugo.toml 文件(某些版本也叫 config.toml )
~ 这里有一个坑,ayu’s 例子中用的 newsroom theme 似乎有问题:github.com/onweru/newsroom
按下面修改:
baseURL = 'https://blog.sunnyseeds.net/' # 你购买的域名
defaultContentLanguage = "zh-cn" # 默认语言
defaultContentLanguageInSubdir = true
languageCode = 'zh-cn'
title = "sunnyseeds' Blog" # Blog title
theme = ["github.com/theNewDynamic/gohugo-theme-ananke"] # 你选择的主题
hasCJKLanguage = true # CJK 为中国, 日本, 韩国的缩写
canonifyurls = true
pagination.pagerSize = 6
[module]
[[module.imports]]
path = "github.com/theNewDynamic/gohugo-theme-ananke"
Ananke: Hugo 主题里有一个更详细的例子,可以控制主题的方方面面,我暂时没有使用
拉取 主题 仓库到本地
在你的 Hugo 网站根目录内运行:
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
注意:git submodule add 用于将另一个 Git 仓库作为子模块添加到现有的 Git 仓库中。子模块的提交和更新是通过主仓库的 .gitmodules 文件来管理的。这个很可能就是下面报错的原因(使用submodule 才会有 .gitmodules 文件,嵌套 git 不好带啊):
创建新帖子
hugo new content posts/hello-world.md
修改 contents\posts\hello-world.md
注意,要删除 draft = true 这一行
本地预览
hugo server
按照 2、在部署到 Cloudflare 时发生致命错误 - HUGO 支持文档 这一步之前还有手动 npm ci 处理过程,但我没有使用,可能新版不需要?
二、上传 github
1、生成 repository
2、create a new repository on the command line
进入blog 所在目录
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/sunnyseed/blog.git
git push -u origin main
之后再次修改的话:
git add .
git commit -m "xxx"
git push -u origin main
如果是使用 ssh 登录 github,则要使用:
git remote add origin [email protected]:sunnyseed/blog.git
三、设置 cloudflare
按照 1、Hugo 部署 | Cloudflare Pages 文档 设置即可,其中构建命令(我照抄的,不知为啥😄):
hugo -b $CF_PAGES_URL
补充,又是坑:-b 是固定 baseurl 的意思(就是网站的 基本 URL,固定成 cf page 的地址),如果你有注册网址的话,用默认的:hugo 才行,这么写会导致错误的,当时我还没反应过来。
随后确认在 构建 时,没有报错即可,就可以使用 pages 分配的域访问了(比如 myblog-dg4.pages.dev)。本地更新后只需要,push 一下,cf 是自动更新发布的。
四、绑定域名
-
在 域注册 中加一个 CNAME (比如 blog ),指向 pages 分配的域名比如 myblog-dg4.pages.dev,注意,不要包括版本号。
-
在 pages 的 自定义域中,加入一个指向 CNAME (blog.sunnyseeds.net) 的记录。
就可以访问 (blog.sunnyseeds.net)使用了。
后续问题
- 分段必须要双回车?
- 一定要图床么?
- 主题怎么设置?
- 评论怎么使用?
- 如何将 wordpress 博客,无痛迁移?
reference
1、Hugo 部署 | Cloudflare Pages 文档
2、在部署到 Cloudflare 时发生致命错误 - HUGO 支持文档