一.准备

安装git(如果不会使用可以去看我写的Git 使用方法)

安装vercel(需要先安装npm)

下载hugo

二.生成站点文件

使用hugo生成

将hugo转到你准备存放博客的文件夹： PowerShell进入这个文件夹(将myblog替换为想要的博客文件夹名)

1

.\hugo new site myblog

变成Git可以管理的仓库

cmd进入刚刚创建的博客文件夹

1

git init

三.配置主题

先去hugo主题官网找到自己喜欢的主题，然后点击下载会跳转到主题的github，把终端的路径调整到博客文件夹的themes目录下使用该主题的方法就是在站点文件夹下的配置文件里输入主题的名字:

1

theme: 主题名字 # 主题名字，和themes文件夹下的一致

四.配置文件

站点配置文件

站点配置文件推荐改成.yaml后缀的写法，因为更适合阅读，反正.toml的写法我是不习惯，详细的可以看 hugo的官方文档

我使用的是sulv-hugo-papermod配置好的PaperMod

添加Hugo的版本号

1.将hugo复制到站点文件夹

2.打开PowerShell进入站点文件夹

3.查看Hugo版本号

1

./hugo version

4.设置Hugo版本号

例如我的版本号是hugo v0.121.1-00b46fed8e47f7bb0a85d7cfc2d9f1356379b740 windows/amd64 BuildDate=2023-12-08T08:47:45Z VendorInfo=gohugoio 添加

1
2
3


build:
  environment:
    HUGO_VERSION: "0.121.1"

或者

1
2


[build.environment]
  HUGO_VERSION = "0.121.1"

屏蔽git可上传文件

在根目录新建文件.gitignore 添加内容

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


//屏蔽运行产生文件
.hugo_build.lock
//屏蔽本文件
.gitignore
//
**/.git
**/.github
**/.vercel
**/public
//构建文件
hugo.exe
.vercel

五.目录设置

注意：content里每个文件夹内都要添加一个 _index.md文件，该文件里面可以加 Front Matter用来控制标题或其它的展示

六.启动博客

在终端进入站点目录直接输入

1

./hugo server -D

或

1

vercel dev

就可以在本地预览了.

七.写文章

输入’hugo new’文章名称.md就会在content目录下生成 “文章名称.md” 名字的文件，所有文章都是放在content这个文件夹里

如果自己还定义了分类目录，如在content目录的posts目录下有blog、read、tech、life等文章分类，那么在用命令生成文章的时候，如果要把文章生成到指定目录，可以用命令：hugo new posts/tech/文章名称.md，这样就会把文章生成到tech目录下

也可以直接到\content\posts下去添加.md文件直接写

生成的文章内部头部配置信息包括一些文章名称，时间之类的信息，可以事先在目录archetypes/default.md下使用模板，这样在用命令hugo new生成文章后会自动加上模板里的配置

我的模板如下(里面有一些字段是我自己自定义的，不是papermod默认带有的，直接使用该字段可能会无效，请酌情使用)(注意：这是PaperMod主题的配置，通用的请看官方文档的Front Matter配置或各个主题自己的配置):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


title: "{{ replace .Name "-" " " | title }}" #标题
date: {{ .Date }} #创建时间
lastmod: {{ .Date }} #更新时间
author: ["Lsy"] #作者
categories: 
- 分类1
- 分类2
tags: 
- 标签1
- 标签2
description: "" #描述
weight: # 输入1可以顶置文章，用来给文章展示排序，不填就默认按时间排序
slug: ""
draft: false # 是否为草稿
comments: true #是否展示评论
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示当前路径
cover:
    image: "" #图片路径：posts/tech/文章1/picture.png
    caption: "" #图片底部描述
    alt: ""
    relative: false

八.上传hugo到托管平台

不会看我写的Git 使用方法

九.部署到 Vercel

1.注册一个Vercel账号，这里我们直接使用 GitHub 账号进行登录，因为这样方便导入仓库。

2.新建一个项目

选择刚刚保存hugo的项目

1
2
3
4
5


Framework Preset:`Hugo`
Environment Variables
- Key:`HUGO_VERSION`
- Value (Will Be Encrypted):`0.121.1`第四步里面的版本号
其他默认

点击发布,完成

十.使用Cloudflare加速

vercel的节点速度不错但是会莫名无法访问创建屏蔽规则

解析到vercel

进入CF中域名控制台，点击上方DNS图标，添加记录，A记录或者CNAME记录解析到你部署在vercel的项目。但是这个时候vercel仍然会显示未正确配置，并且这个时候访问很有可能返回错误。因为当 vercel 构建项目时，构建过程的最后一步是颁发 SSL 证书。作为此步骤的一部分，vercel 向域名/.well-known/acme-challenge 发出 HTTP 请求。如果此 HTTP 请求被重定向到 HTTPS，Vercel 将无法颁发 SSL 证书。

为防止上述请求被重定向，需要通过以下方式

创建https 例外页面规则：

在CF控制台的规则选项卡中选择创建页面规则

在“如果 URL 匹配”文本字段中输入

1

*example.com/.well-known/*

选择设置

选择SSL
下拉列表中选择关

点击保存并部署按钮。

其他

删除复制带博客信息

删除复制版权将layouts/partials/footer.html下面代码删除或注释

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<script>
    document.body.addEventListener('copy', function (e) {
        if (window.getSelection().toString() && window.getSelection().toString().length > 50) {
            let clipboardData = e.clipboardData || window.clipboardData;
            if (clipboardData) {
                e.preventDefault();
                let htmlData = window.getSelection().toString() +
                    '\r\n\n————————————————\r\n' +
                    '版权声明：本文为「'+{{ .Site.Title }}+'」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。' +
                '\r\n原文链接：' + location.href;
                let textData = window.getSelection().toString() +
                    '\r\n\n————————————————\r\n' +
                    '版权声明：本文为「'+{{ .Site.Title }}+'」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。' +
                '\r\n原文链接：' + location.href;
                clipboardData.setData('text/html', htmlData);
                clipboardData.setData('text/plain', textData);
            }
        }
    });
</script>

删除点击复制的版权将

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                let text = codeblock.textContent +
                    '\r\n————————————————\r\n' +
                    '版权声明：本文为「'+{{ .Site.Title }}+'」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。' +
                '\r\n原文链接：' + location.href;
                navigator.clipboard.writeText(text);
                copyingDone();
                return;
            }

改为

1
2
3
4
5
6
7


        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                let text = codeblock.textContent;
                navigator.clipboard.writeText(text);
                copyingDone();
                return;
            }