password
type
status
date
slug
summary
tags
category
Property
Jul 25, 2023 07:22 AM
URL
icon
本篇教程希望可以零成本、尽量简单地搭建一个支持云端编辑、无需安装额外软件、高可用的静态博客系统。
Introduction
Hugo 是一款静态博客生成工具。相较著名的 Wordpress 等动态博客系统，静态博客维护简单、SEO 友好、部署成本低（免费）、在线率高，基本不怕 DDOS/CC。在静态博客领域中，Hugo 部署方便、所有功能整合在一个文件中、支持多种主题切换、速度较快。
本文将用 Hugo（博客生成工具）、Codespace（在线编辑器）、Cloudflare Pages（静态网页托管）手把手构建一个博客网页。
How to deploy
打开 Github 仓库，选择 Fork：
确认之后转到以下界面，记住仓库名称，复制仓库地址。
打开 Cloudflare，选择侧栏 Pages：
创建应用程序，注意创建 Pages 而不是 Workers。
绑定 Github 到 Cloudflare。由于您之前可能没有绑定过账号，这里应该没有任何显示，所以需要添加账户。
安装到自己的 Github，确认安装：
完成之后会自动返回 Cloudflare 界面，选择绑定好的账号，选择刚刚的存储库，进行部署。
【重要】 这一步需要修改默认设置，首先修改框架预设 Hugo，然后点环境变量，添加一个环境变量
HUGO_VERSION=0.104.0（设置这一步是因为 Cloudflare 默认 Hugo Version 比较低，部署很容易报错）。
最后点击部署等待完成即可。
按照流程走，应该是能够成功的。
点击蓝色链接，，应该不需要多说了吧。默认效果就是下面这样。
How to config & create post
这一部分推荐参考 官方文档，以及 使用 Codespace 一键开启云端编程体验。
在之前 Fork 得到的仓库里，打开 Codespace。
在这些文件中，需要修改的就是两个部分。一个是上面的
post 部分，存储所有博客文章。另外一个是下面的 config.yaml 部分，用于自定义网页的标题等。
首先修改
config.yaml，我的网站所使用的配置如下所示，这里先后给出了无注释、直接粘贴版本和有详细注释的版本。解释如下：
然后删掉原来的所有博文，创建一篇新的 hello world。
创建完之后随便写点啥。也可以直接贴图进去，注意把
draft:true 改成 draft:false
然后左边提交所有更改即可。
同步更新，会弹几个窗口，确认即可。
过一段时间，就可以在网页上看到更新了。
Conclusion
本文其实牵扯到很多基本工具/平台的使用。包括 Hugo、Git、Bash、Cloudflare、Github、Codespace，也涉及到域名、容器相关的内容。这里仅仅是最简单的使用流程，我们之后也会撰写系列教程进行阐述。
- 作者:Waicun Li
- 链接:https://www.vikim.cyou/article/hugocloudflareblog
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
