使用Hugo搭建Blog+Cloudflare Pages实现自动部署
Hugo介绍
Hugo是世界上最快的构建网页的框架
—— Hugo官网
安装Hugo
Arch Linux:
sudo pacman -S hugo其余发行版请自行使用包管理器搜索并安装
开始使用
首先创建一个空白网站
hugo new site <Site_name>这个操作会创建一个文件夹,包含Hugo的默认文件
安装主题
博客是写给自己看的
所以挑选一个自己心仪的主题很重要。
你可以在Hugo的主题网站中查找
建议查找更新日期较近的主题,以避免有废弃的主题(可能失去了作者支持)。当然,只要你喜欢就好:)
然后你可以点击Download按钮,以跳转至GitHub页面,查看README.md以安装主题。
这里以FixIt主题为例
FixIt主题网站,你可以查看文档
转至GitHub页面,你可以提出issue和pull request以解决问题和完善文档\
安装主题
切换到博客目录,执行
git init来初始化一个空的Git存储库(之后用于GitHub Actions自动构建部署网站)
将FixIt主题作为Git子模块添加到你的项目中的themes目录。
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt备份目录中的hugo.toml文件,并将主题中的hugo.toml文件复制出来
mv hugo.toml hugo.toml.back && cp /themes/FixIt/hugo.toml ./在站点配置文件中添加一行,指定当前主题。
echo "theme = 'FixIt'" >> hugo.toml在站点配置文件中添加一行,指定默认的内容语言。
echo "defaultContentLanguage = 'zh-cn'" >> hugo.toml然后启动Hugo开发服务器以查看站点
hugo serverHugo,启动!
写文章
你需要将Markdown文章放入content/posts文件夹中,然后执行
hugo来构建网站
这并不会在本地启动开发服务器,而是将构建后的网页文件放在public文件夹下
使用草稿
在Hugo中,你可以使用draft参数来表示该文章是草稿
---
title: 我的第一篇文章
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---若想连草稿一起构建,请执行
hugo -D同理,也可以在开发服务器中使用-D。
使用Cloudflare Pages实现自动部署博客
使用FixIt主题的话,请在Pages的设置中添加环境变量以指定Hugo版本
如HUGO_VERSION:0.129.0
首先,在GitHub中新建博客仓库,命名为<User-name>.github.io
在本地Git中添加远程仓库
git remote add origin https://github.com/<User-name>/<User-name>.github.io.git然后添加.gitingore
vim .gitingore #Vim可替换为其他编辑器加入以下内容
pubilc
resource保存退出
然后上传到GitHub即可。不会的可以看这里
到Cloudflare官网,点击侧边栏的Workers & Pages
选择Pages,点击连接到GitHub,选择你创建的博客仓库
选择生产分支为你Hugo博客存放的分支,框架预设选择Hugo,构建命令不改。
若使用tags和categories,请添加环境变量:HUGO_VERSION = 0.129.0
然后将一个小更改push到GitHub,Cloudflare会自动部署,给你一个二级域名。
你也可以自定义,请自行搜索。