在 Cloudflare Pages 建博客

最近几天反复摸索, 终于弄明白了 doom emacs + ox-hugo + cloudflare + github + DNS 建立一个静态博客网站的全部流程. 这中间的各个部分其实都是独立的. 并不是缺一不可. 这一篇只记录其中的 hugo, github 还有 Cloudflare. 三者联合, 十分钟之内设立一个静态网站的过程.

安装必要的软件

hugo 的安装, 可以去官网了解具体步骤, 根据自己本地电脑的操作系统, 对照流程全部走一遍, 就可以了.
git 的安装就不多说了. 网上随便找个介绍, 照着做就行了. 同样还是各自的操作系统不同, 步骤各有不同. 都非常简单.

有了这俩软件配合, 一个静态网站几分钟之内就诞生了. 比你看完这一篇博客的时间还少, 神奇…… 闲话少说, 开始动手吧!

创建网站文件

安装 Hugo 后，参考 Hugo 的 Quick Start 通过在终端中运行命令 hugo new 来创建新项目：

1

hugo new site my-hugo-site

Hugo 站点使用主题来自定义静态网站的外观。themes.gohugo.io 上有许多可用的主题, 在终端中运行以下命令可以把自己喜欢的主题下载回来：

1
2
3
4


cd my-hugo-site
git init
git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
git submodule update --init --recursive

再将主题提供的默认配置复制到网站根目录的 config.toml 文件中, 并根据需要对其进行自定义. 下面这是一个例子:

 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


baseurl = "/"
languageCode = "en-us"
theme = "terminal"
paginate = 5

[params]
    # dir name of your main content (default is `content/posts`).
    # the list of set content will show up on your index page (baseurl).
    contentTypeName = "posts"
    # ["orange", "blue", "red", "green", "pink"]
    themeColor = "orange"
    # if you set this to 0, only submenu trigger will be visible
    showMenuItems = 2
    # show selector to switch language
    showLanguageSelector = false
    # set theme to full screen width
    fullWidthTheme = false
    # center theme with default width
    centerTheme = false
    # set a custom favicon (default is a `themeColor` square)
    # favicon = "favicon.ico"
    # set post to show the last updated
    # If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated
    showLastUpdated = false
    # Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author
    # updatedDatePrefix = "Updated"
    # set all headings to their default size (depending on browser settings)
    # it's set to `true` by default
    # oneHeadingSize = false

[params.twitter]
    # set Twitter handles for Twitter cards
    # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution
    # do not include @
    creator = ""
    site = ""

[languages]
    [languages.en]
        languageName = "English"
        title = "Terminal"
        subtitle = "A simple, retro theme for Hugo"
        owner = ""
        keywords = ""
        copyright = ""
        menuMore = "Show more"
        readMore = "Read more"
        readOtherPosts = "Read other posts"
        missingContentMessage = "Page not found..."
        missingBackButtonLabel = "Back to home page"
    [languages.en.params.logo]
        logoText = "Terminal"
        logoHomeLink = "/"
    [languages.en.menu]
        [[[languages.en.menu.main]]]
            identifier = "about"
            name = "About"
            url = "/about"
        [[[languages.en.menu.main]]]
            identifier = "showcase"
            name = "Showcase"
            url = "/showcase"

创建第一个帖子

创建一个新帖子，为您的 Hugo 网站提供一些初始内容。在终端中运行 hugo new 命令以生成新帖子：

1

hugo new posts/hello-world.md

好了, 以上把网站需要的文档数据全部准备妥当, 下面就让它上线吧.

创建 Github 存储库

通过访问 repo.new 创建一个新的 GitHub 存储库. 设置存储库后，通过在终端中运行以下命令将网站所需要的文档数据推送到 GitHub, 但官方在这儿有一个坑：

1
2
3


git remote add origin https://github.com/yourgithubusername/githubrepo
git branch -M main
git push -u origin main

官方原文就是这样写的, 可怎么都报错. 折腾了好久, 才醒悟, 原来在这前面缺少了两句:

1
2


git add .
git commit -m "first commit"

千万注意第一句后面是一个空格再加一个点. 把这两句加到前面, 再运行上面三句, 稍等一会儿, 就完成了数据上传. 紧接着我们到 Cloudflare Pages.

在 Cloudfare Pages 上布署

登录 Cloudflare
Dashboard => Pages, 选择创建项目.
连接 Github, 选择您刚刚创建的新存储库.
并在设置构建和部署部分中提供以下信息.

配置选项选值

分支 main

构建命令 hugo

构建目录 public

配置选项	选值
分支	main
构建命令	hugo
构建目录	public

按照上面选择好了以后, 紧接着官方又出现了一个坑.

设置 hugo 的版本号

hugo 的版本号一定一定要设定一个变量, 官方默认的 hugo 版本太低, 一会儿在 deploy 的时候, 通不过 rebuild, 反复在这儿卡住. 浪费好多时间.

在您的项目 => 设置 => 环境变量中创建环境变量。将值设置为您要指定的 Hugo 版本。例如，

1

HUGO_VERSION  0.106.0

后续

如果没有什么错误的话, 到此为止, 点下 " deploy “, 让程序跑一会儿, 网站就应该布署好了. yourname.pages.dev 已经展示在你的眼前!

“每次您向 github 存储库提交新内容时，Cloudflare Pages 都会自动重建您的项目并进行部署,” 这是我万万没有想到的事情. 太方便了. 从这个时间点开始, 后面的事情只需要做两个动作:

写
推送

现在, 我们的文字已经发送出去. 非洲, 格陵兰岛, 或者任何一个角落, 都能通过网络看到! 多么美妙~

您还可以访问新拉取请求的预览部署，这样就可以在将更改部署到生产环境之前预览您的站点的外观。

整个建站过程, 前面还有怎么用 emacs + ox-hugo 写文章, 后面还有如何绑定独立域名, 这些都是老生常谈, 也不是必须的, 就省略不提了. 不过, 绑定自己的域名以后, 会快很多.

文章目录