利用 cloudflare pages 搭建 Hugo 博客

    __  __
   /\ \/\ \
   \ \ \_\ \  __  __     __     ___
    \ \  _  \/\ \/\ \  /'_ `\  / __`\
     \ \ \ \ \ \ \_\ \/\ \L\ \/\ \L\ \
      \ \_\ \_\ \____/\ \____ \ \____/
       \/_/\/_/\/___/  \/___L\ \/___/
                         /\____/
                         \_/__/

Hugo 是一个静态站点生成器，如果想搭建一个简单的博客，专注于写作或者做笔记，那么我们只需要提供一个创作好的 markdown 文件，将它放在 hugo 指定的文件夹下，再用相应的命令启动服务，访问网页的链接即可。

Cloudflare pages 能让我们放置一个静态网站，可以在上面部署一个 hugo 博客，官方给出了教程：Deploy a Hugo site

前置条件

github 账号
cloudflare 账号

在 windows 下安装 hugo

我用了 scoop 来安装hugo，scoop 是一个开源的 windows 软件包管理器

以管理员身份打开 PowerShell，运行以下两条命令来安装scoop：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

irm get.scoop.sh | iex

安装 hugo：

scoop install hugo

查看 hugo 的版本：

hugo version

创建 github 仓库

创建一个空的 github 仓库，可以是私有仓库，在仓库的页面会提示你创建或者上传文件，不需要增加文件，直接复制旁边的仓库链接，将仓库克隆到本地

git clone https://xxxxxxxxx your_dir_name

替换其中的 https 链接，其中 your_dir_name 是你自己的文件夹名称。

初始化 hugo 站点，

cd your_dir_name
hugo new site . --force

这时候文件夹下就会多出一些文件。

新建文章

执行

hugo new posts/hello-world.md

会在content文件夹里的posts文件夹多出一个 markdown 文件，可以对该文件进行编辑。

修改主题(网站样式)

hugo 内置了一个主题，更多主题可以在 themes 里搜索。

如果要使用其他主题，选定了一个主题后，例如对于主题 diary，执行

git submodule add https://github.com/amazingrise/hugo-theme-diary themes/diary

此时themes文件夹会增加相应的主题文件。在根目录的config.toml文件的开头那里增加theme = "diary"即可。

配置文件config.toml控制着静态网站的渲染和行为，其他的一些设置有：默认语言、标题等

baseurl = "/"
DefaultContentLanguage = "zh"
languageCode = "zh-cn"
title = "A Hugo Site"
copyright = "Copyright © 2023 😅."
theme = "diary"
paginate = 5

最后，把上面的修改推送到 github 仓库，

git add .
git commit -m "update"
git push

部署到 cloudflare pages

在 cloudflare pages 页面新建项目，cloudflare 的界面里有中文的语言选项。

选择connect to git，选择刚才创建的仓库。

接下来设置项目的名称，注意下面会显示类似xxx.pages.dev的域名，这是静态页面的域名。

在构建设置里项目类型选为Hugo，将构建命令设置为hugo -b $CF_PAGES_URL。

点击下面级环境变量设置，添加两个环境变量：

CF_PAGES_URL，对应的值为https://xxx.pages.dev/，也就是前面显示的那个域名，也可以用自己的域名，这时候要记得在项目页面绑定域名。
HUGO_VERSION，对应的值为0.111.3，这是为了设置 hugo 的版本号，不设置的话 cloudflare 可能使用一个较老的 hugo，使得有一些 hugo 主题使用不了。

绑定域名

在 pages 项目首页里，选 custom domains绑定自己的域名。

最后修改于 2023-04-12