用Hugo搭建自己的博客网页并用免费的Cloudflare Pages托管
前期准备
下载git: How to Install Git .
下载go: How to Install Go .
下载hugo: How to Install Hugo .
下载vscode: Download Visual Studio Code .
学会git的基本操作: 廖雪峰老师的git教程 .
学会vscode下如何用git进行版本控制
注册cloudflare账号
理解Hugo的目录结构
文件夹里内容结构如下:
├── archetypes # new template for our new content
│ └── default.md #每篇博客的模板
├── assets #存放css和js文件的地方
├── content #存放我们写的每篇博客
├── data
├── hugo.toml #网站的配置文件
├── i18n #multilingual,
├── layouts
├── static
└── themes #存放好看的网站主题
现在分别介绍每个文件夹的作用
archetypes
archetypes
: 译为原型,用于存放每篇文章的模板。根据hugo官网的
介绍
,模板可以用yaml, toml和json格式。
hugo new site命令生成的archetypes/default.md文件是toml格式
+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
+++
而有的大佬做的模板是yaml格式,如凡梦星尘大佬做的 hugo theme NexT主题
---
title: "{{ replace .Name "-" " " | title }}"
description: "{{ .Name }}"
keywords: "{{replace .Name "-" ","}}"
date: {{ .Date }}
lastmod: {{ .Date }}
categories:
-
tags:
-
-
# 原文作者
# Post's origin author name
#author:
# 原文链接
# Post's origin link URL
#link:
# 图片链接,用在open graph和twitter卡片上
# Image source link that will use in open graph and twitter card
#imgs:
# 在首页展开内容
# Expand content on the home page
#expand: true
# 外部链接地址,访问时直接跳转
# It's means that will redirecting to external links
#extlink:
# 在当前页面关闭评论功能
# Disabled comment plugins in this post
#comment:
# enable: false
# 关闭文章目录功能
# Disable table of content
#toc: false
# 绝对访问路径
# Absolute link for visit
#url: "{{ lower .Name }}.html"
# 开启文章置顶,数字越小越靠前
# Sticky post set-top in home page and the smaller nubmer will more forward.
#weight: 1
# 开启数学公式渲染,可选值: mathjax, katex
# Support Math Formulas render, options: mathjax, katex
#math: mathjax
# 开启各种图渲染,如流程图、时序图、类图等
# Enable chart render, such as: flow, sequence, classes etc
#mermaid: true
---
archetypes可以创建多个模板,对应不同的内容形式
./archetypes
├── advertisements.md
├── default.md
└── posts.md
这里的advertisements.md和posts.md就是用来写广告推文和博客文章的两个模板。
Question: 这么多模板,我该用哪个?
Answer: Hugo查找模板的顺序是archetypes –> themes/xx_theme/archetypes –> 内置模板 例如我想创建在content目录下创建一个叫posts的子目录并用来存放我写的博客,那么我的命令是:
hugo new content posts/hello_world.md
Hugo的查找顺序是:archetypes/posts.md –> archetypes/default.md –> themes/xx_theme/archetypes/posts.md –> themes/xx_theme/archetypes/default.md –> 内置模板。
另一个做法是在hugo new命令后面添加–kind参数来指定模板
$hugo new --help | grep kind
It will guess which kind of file to create based on the path provided.
You can also specify the kind with `-k KIND`.
-k, --kind string content type to create
assets
根据 官方文档 ,assets目录用于存放网站需要的图片、装饰文件。作为使用者,不用太关注这个目录。
content
用来存放我们的文章,可以包含多个子目录。
.
└── content
└── about
| └── index.md // <- https://example.org/about/
├── posts
| ├── firstpost.md // <- https://example.org/posts/firstpost/
| ├── happy
| | └── ness.md // <- https://example.org/posts/happy/ness/
| └── secondpost.md // <- https://example.org/posts/secondpost/
└── quote
├── first.md // <- https://example.org/quote/first/
└── second.md // <- https://example.org/quote/second/
在上面Hugo官方文档给出的例子中,我们发现每一个markdown文件都拥有一个链接。仔细观察链接结构发现,除了about目录下,其余链接都能对应到markdown文件的名字。
这些字目录可以呈现在网站上。
data
data目录用来存放JSON, TOML, YAML, 或者 XML文件。作为使用者不用太关注。
i18n
这个目录是用来存放多种语言本地化的目录,如果你的网站不需要多种语言,可以不管。
layouts
layouts
目录内含的模板用来转换我们的内容成网站。
static
用来存放网站有关的文件。例如我们可以创建一个叫imgs
的目录来存放一些图片,Hugo生成的静态网站使用这些图片时,这些图片的链接就是/imgs/xxx.png
。
public&resources
部署网站后Hugo自动生成的目录,可以理解为网站下所有的内容。
themes
存放我们想要的网站主题。
总结:对于使用者来说,重点关注content, themes两个目录。
创建一个本地网站
1. 创建一个网站并用git版本控制
在本地创建一个文件夹用于存放网页内容: hugo new site <site-name>
这里我创建了一个叫metagenx的文件夹:`hugo new site metagenx
使用git对我们的metagenx文件夹内的所有内容进行版本控制。
$ cd ./metagenx
$ git init
$ git init
提示:使用 'master' 作为初始分支的名称。这个默认分支名称可能会更改。要在新仓库中
提示:配置使用初始分支名,并消除这条警告,请执行:
提示:
提示: git config --global init.defaultBranch <名称>
提示:
提示:除了 'master' 之外,通常选定的名字有 'main'、'trunk' 和 'development'。
提示:可以通过以下命令重命名刚创建的分支:
提示:
提示: git branch -m <name>
已初始化空的 Git 仓库于 /Users/moonwatcher/metagenx/.git/
这里我们配置一下metagenx git仓库的用户名和邮箱
git config user.name "your_name"
#example: git config user.name zhangsan
git config user.email [email protected]
配置用户名和邮箱的目的是让我们知道是谁做了修改。如果你想为电脑上其他git仓库也设置用户名和邮箱,可以添加--global
参数
git config --global user.name "your_name"
git config --global user.email "your_email"
配置完成,使用git config --list
查看一下我们的信息是否正确
credential.helper=osxkeychain
user.name=YourName
user.email=YourEmail
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
core.precomposeunicode=true
第一次版本控制:保留开始样式
将metagenx目录下所有内容都添加到git版本库
git add -A
使用git status
查看提交到暂存区的内容有哪些:
$ git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: archetypes/default.md
new file: hugo.toml
为什么只有两个文件呢?因为我们刚创建好的目录下就这两个文件,其余都是空文件夹。
把暂存区的内容提交到版本库: git commit -m "Init and first commit"
$ git commit -m "Init and first commit"
[master (root-commit) 5246efd] Init and first commit
2 files changed, 8 insertions(+)
create mode 100644 archetypes/default.md
create mode 100644 hugo.toml
(base)
2. 添加Hugo 主题到./themes目录下
创建网站需要一个合适的主题模板,这里我选择的是凡梦星尘大佬制作的 Hugo NexT 。
fork需要的主题到我们的github账号,并添加到themes文件夹下作为git项目的子模块。这是为了方便我们对主题进行修改来满足自己的需求(新手可以不需要)。
将Hugo NexT主题作为git子模块添加到themes目录下
# 把yhWu815改成你自己的github账号的用户名
$ git submodule add https://github.com/yhWu815/hugo-theme-next.git themes/hugo-theme-next
成功添加后,在当前目录下出现了一个.gitmodules
文件,themes目录下也有了一个叫做hugo-theme-next的目录。
$ git status
On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
new file: .gitmodules
new file: themes/hugo-theme-next
同样地,让我们把暂存区的文件提交到本地版本库:git commit -m "add hugo-theme-next as a submodule"
$ git commit -m "add hugo-theme-next as a submodule"
[master f05a852] add hugo-theme-next as a submodule
2 files changed, 4 insertions(+)
create mode 100644 .gitmodules
create mode 160000 themes/hugo-theme-next
3. 配置我们自己的主题
按照主题的官方教程,我们需要复制themes/hugo-theme-next/exampleSite/config.yaml文件到当前目录
cp themes/hugo-theme-next/exampleSite/config.yaml .
再复制themes/hugo-theme-next/archetypes/default.md文件到当前目录的archetypes文件夹下
cp ./themes/hugo-theme-next/archetypes/default.md archetypes/default.md
把hugo.toml
文件重命名为hugo.toml.backup
mv hugo.toml hugo.toml.backup
更新到版本库
git add -A && git commit -m "Copy files from theme and backup hugo.toml"
这个时候我们的assests, content, data, layouts, static目录是空的,让我们在本地预览一下网站是啥样。
$ hugo server
命令行界面会得到这样的一条信息,同时多出了public&resource目录和一个.hugo_build.lock文件。
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
$ git status
On branch master
Untracked files:
(use "git add <file>..." to include in what will be committed)
.hugo_build.lock
public/
resources/
nothing added to commit but untracked files present (use "git add" to track)
Hugo让我们把localhost:1313
粘贴到浏览器中并访问
不知道为啥在浏览器中输入
127.0.0.1:1313
不能预览网站
这样我们就得到了我们的目标样式,此时我们并未创建任何文章。因此页面上并没有显示任何文章。
在hugo运行终端中使用ctrl+c
关闭预览。
在写第一篇文章之前,我们需要对config.yaml文件进行一些修改,来生成我们自己的网站。
在config.yaml文件中凡梦星尘大佬已经写了很详细的备注,根据备注来修改就行。不懂的可以发邮件。
我修改了config.yaml文件,并在static目录下创建了一个img目录用于存放一些图片
创建一篇博客文章
Hugo创建文章的命令为hugo new path/xxx.md
实际上在我修改config.yaml
文件时我已经创建了两篇文章
./content
├── about.md # hugo new about.md
└── useful_websites.md # hugo new useful_websites.md
Hugo会把这两篇markdown文章转换为url链接。
如果我们要正式写博客,我们需要在content目录下单独创建一个目录,例如content/post
hugo new post/my-first-post.md
到这里我们的网站就差不多搭好了,接下来要做的就是把网站托管到Cloudflare Pages上去。
用Cloudflare Pages托管我们的博客网站
Cloudflare是一家总部位于美国的互联网服务商,被广大网友称作“赛博佛祖”。Cloudflare旗下的Pages服务免费为大家托管我们的静态网站。
1. 把网站目录下所有文件上传到github的仓库内
首先删除掉之前测试生成的public,resources目录和.hugo_build.lock文件。
使用hugo
命令生成我们需要的静态内容
hugo
提交所有的修改到本地版本库
git add -A && git commit -m "established our static website"
利用SSH免密连接到自己的GitHub仓库
我们自己创建的git本地项目要上传到自己的github仓库中,第一件事是要把我们的设备连接到GitHub服务器上。虽然我们可以通过GitHub网页端上传文件,修改的文件多了这样就很费时费力。所以我们需要告诉GitHub我们的设备,让我们不需要通过网页端上传修改。
这里我的建议是参考github的官方教程,老老实实地按照官方教程走不会失败。
Github官方教程: 通过 SSH 连接到 GitHub .
添加创建的网站目录到GitHub
这部分请参考GitHub的官方教程: 将本地托管代码添加到 GitHub .
登录GitHub账号,创建一个空的仓库(repository)。
这里我选择的是创建私人仓库,不生成README文件。因为我们只想让读者看到public目录下的内容。
我们要做的就是关联我们创建的仓库。
git remote add origin https://github.com/yhWu815/repo_name.git
推送所有修改到我们的仓库
git push -u origin master
再次查看我们的网页端,发现我们本地版本库的所有内容都被上传。
2. 关联GitHub仓库和Cloudflare Pages
这部分参考请Leehow的博文: Windows 下使用 Hugo 和 Cloudflare Pages 配置博客 .
Leehow大佬的这部分教程写得非常详细。
参照大佬的教程成功部署后的界面是这样的
访问Cloudflare给出的域名或者自己的域名m就能访问自己的博客了
参考文献
- Hugo官方文档–目录结构 https://gohugo.io/getting-started/directory-structure/
- Hugo官方文档–archetypes目录 https://gohugo.io/content-management/archetypes/
- Hugo-theme-NexT主题官网 https://github.com/hugo-next/hugo-theme-next
- Github官方教程:通过SSH连接到Github https://docs.github.com/zh/authentication/connecting-to-github-with-ssh
- GitHub官方教程:将本地托管代码添加到 GitHub https://docs.github.com/zh/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github
- Leehow: Windows 下使用 Hugo 和 Cloudflare Pages 配置博客: https://www.haoyep.com/posts/windows-hugo-blog-cloudflare/