记使用Hugo + CloudFlare搭建博客

流水不争先，争得是滔滔不绝

2022-07-10 约 1638 字预计阅读 4 分钟

之前使用 Hexo + Github 的形式做了一个博客，当时认为 Hexo 上手简单，就算是新手也可以直接跟着网上的教程搭建出一个很漂亮的博客来。

但是我用了一段时间后发现，它渐渐的开始文件变多而开始变得杂乱（也可以是我的原因），而且随着样式越来越多，看着越来越华丽，我发现这样不能更专注于内容本身，这样的博客我认为不是好的博客。

加上最近换了电脑，才发现 Hexo 备份迁移什么的那么麻烦，暴躁如我，果断选择了换一个方案搭建博客。🤣

使用 Hugo + Github + CloudFlare Pages 做了一个完全免费，且访问速度快的博客。

1.安装搭建网站

1.1 下载 Hugo

关于 Hugo 的下载安装官网写的还是很清楚的，跟着来基本没问题

中文官网地址：Hugo中文文档 (gohugo.org)

英文官网地址：Get Started | Hugo (gohugo.io)

1.2 搭建

接下来创建网站：

1
2


hugo new site my_hugo
cd my_hugo

1.3 安装主题

我用的这个是 LoveIt 主题，简单清楚美观。

根据主题官网的说明，我选择初始化网站目录为 git 仓库，并且把主题仓库作为网站目录的子模块：

1
2
3


# 在根目录下执行：
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

然后在根目录下的 config.yaml（原始是config.toml 但我习惯 yaml 就给改了）添加：

1

theme: LoveIt

这样主题就设置好了。

1.4 启动网站

使用以下命令启动网站：

1

hugo serve

查看网站：localhost:1313/

这样一个网站就简单的建好了，但是目前没有文章，可以用以下命令新建一篇文章：

1

hugo new posts/first.md

这样就会在 content/posts目录中创建一个 md 文件，在里面写东西就好了。

2.部署网站到 CloudFlare

2.1 上传到 Github

在部署之前，首先需要把网站代码发到 Github 上去

首先注册登录上 Github ，创建一个仓库，这个仓库是私有的，也可以是公开的。（我配置的是私有的）

注：如果你没有自己的域名，希望白嫖一个域名的话，部署到 CloudFlare Pages 上会自动生成一个仓库名.pages.dev的域名，所以这个仓库命名建议不要太长。

接下来把网站文件夹里所有的文件上传到 Github：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# 初始化仓库
git init
# 将所有文件添加到暂存区
git add -A
# 将暂存区里的文件提交到本地库，-m：提交信息描述(就是一个备注)
git commit -m "first commit"
# 切换到主分支，这里需要注意，Github默认的分支是main，需要根据仓库的主分支填写
git branch -M master
# 与远程仓库建立联系，origin后面的需要根据自己仓库的来填写
git remote add origin git@github.com:qmcl/test.git
# 将本地库里的文件推送到远程 (这一步就是上传代码到 Github )
git push -u origin master

2.2 部署网站

注册登录 CloudFlare：Cloudflare 中国官网

点击左侧的Pages，然后创建项目：

选择 连接到 Git，然后通过 Github 登录。

选择刚才创建的仓库，点击开始配置：

选项	参数
生产分支	选择上传代码的那个分支，一般是main或者master
框架预设	选择Hugo
构建命令	hugo 这个默认
构建输出目录	public 这个也默认就好

注意

这个地方有一个坑，我多次部署失败，查过之后发现是它默认的 Hugo 版本太低，这里需要手动修改一下版本，

在环境变量（高级）中添加变量：

变量名：HUGO_VERSION

值：0.100.2 （这个版本尽量高一些）

最后保存并部署下就好啦~

成功得到一个免费的个人网站。🎉🎉

3.图床

网站搭建好之后剩下的就是配置样式和写文章了，配置这块看主题的官方文档就可以了，比如我的主题是LoveIt，那么看主题文档 - LoveIt就好了。

至于写文章，我用的是Typora软件，一款 Markdown编辑器和阅读器，所见即所得，非常 nice 😎，虽然现在最新的需要收费，但是以前的免费版本还能下载能用。

重点来了，写博客一大难题：图片怎么办？

本着能白嫖绝不付钱的原则，我选择了 SMMS 图床，免费50个GB容量，对于个人博客我认为完全足够了，感觉我写个两三年都用不完🤣

配置很简单，登录后生成 Token，然后在 PicGo 上面配置一下 SMMS 图床，把 Token 加上去就好啦~

4.最后

Hugo 速度是真不错，修改内容或主题的时候可以直接看到效果。用hugo server -D命令启动服务，只要这服务不停就可以了。

CloudFlare Pages 有一个自动化构建的功能，以后每次修改内容后需要重新部署到 CloudFlare Pages 时，只要把代码上传到 Github 上，就会自动拉取代码重新部署啦，非常的方便。

1
2


git push -u origin master
git push

至此，一个完全免费且国内访问速度不慢的网站 get ✔

🧧 谢谢你~

微信打赏