用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

再次查看我们的网页端,发现我们本地版本库的所有内容都被上传。 成功推送到GitHub

2. 关联GitHub仓库和Cloudflare Pages

这部分参考请Leehow的博文: Windows 下使用 Hugo 和 Cloudflare Pages 配置博客 .

Leehow大佬的这部分教程写得非常详细。

参照大佬的教程成功部署后的界面是这样的 成功部署

访问Cloudflare给出的域名或者自己的域名m就能访问自己的博客了

参考文献

  1. Hugo官方文档–目录结构 https://gohugo.io/getting-started/directory-structure/
  2. Hugo官方文档–archetypes目录 https://gohugo.io/content-management/archetypes/
  3. Hugo-theme-NexT主题官网 https://github.com/hugo-next/hugo-theme-next
  4. Github官方教程:通过SSH连接到Github https://docs.github.com/zh/authentication/connecting-to-github-with-ssh
  5. 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
  6. Leehow: Windows 下使用 Hugo 和 Cloudflare Pages 配置博客: https://www.haoyep.com/posts/windows-hugo-blog-cloudflare/