在本文中,我使用windows电脑来安装hugo,使用debian系统的vps来部署网站。
准备
您需要有良好的网络环境,需要拥有域名,需要有vps。
安装hugo
我使用scoop作为软件包管理器,打开cmd或powershell,输入以下命令给当前用户安装hugo。
1
|
scoop install hugo-extended
|
安装git
继续在命令行输入以下命令安装git。
初始化
打开cmd或powershell,进入想要创建网站的路径,在终端中输入以下命令。
进入hugoblog\themes目录,输入以下命令下载主题,我使用的是stack主题,命令如下。
1
|
git clone https://github.com/CaiJimmy/hugo-theme-stack
|
接下来,在您的网站文件夹删除默认的config.toml,然后去themes\hugo-theme-stack\exampleSite文件夹中,复制里面的content文件夹和config.yaml到站点的主目录,复制完成后去content文件夹中删除以下内容。
删除post文件夹中的所有内容,这是演示站点中的文章,我们不需要他。
_index.md,如果有多语言需求,可以保留_index.md和_index.zh-cn.md,如果和我一样无多语言需求,可以将_index.md删掉然后重命名_index.zh-cn.md为_index.md。
删除categories文件夹中的所有内容,因为这是演示站点的分类,而不是我们需要的。
删除page\about中的所有内容,因为这是演示站点的关于页面。
删除page\links中的所有内容,这是演示站点的链接页面。
配置
配置文章模板
默认的文章模板是不太符合需求的,可以按照下面的提示修改成自己需要的。
在您的网站主目录进入archetypes目录,然后修改default.md。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
---
# 标题,当使用hugo new 命令创建文章时,文件名会作为标题
title: '{{ replace .File.ContentBaseName "-" " " | title }}'
# 日期,当使用hugo new 创建文章时,会使用当前日期
date: {{ .Date }}
# 草稿,当使用hugo new 命令时,是否为草稿,接受的值是true和false
draft: false
# 分类,一般情况只需要有这个字段即可,如果想要一创建好文章就默认有分类的话可以改成这样
# categories: '默认分类'
categories: [
# 标签,如果想要一创建好文章就有标签的话,可以这样。
# tags: '默认标签'
tags: [
---
|
自定义分类
在网站的主目录进入content目录,然后进入categories目录,然后新建_index.md,内容格式类似这样。
1
2
3
4
5
6
7
8
9
|
---
title: "默认分类"
slug: "default"
---
---
title: "我的日志"
slug: "journal"
---
|
配置网站
在博客的主目录修改config.yaml,以下是最需要修改的内容。
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
# 你的网站域名
baseurl: https://example.com
# 网站的语言
languageCode: en-us
# 网站的主题
theme: hugo-theme-stack
# 每页的项目
paginate: 5
# 网站的标题
title: Example Site
# 网站的版权
copyright: Example Person
# 针对各个语言的网站配置
languages:
en:
languageName: English
title: Example Site
weight: 1
params:
description: Example description
zh-cn:
languageName: 中文
title: 演示站点
weight: 2
params:
description: 演示说明
ar:
languageName: عربي
languagedirection: rtl
title: موقع تجريبي
weight: 3
params:
description: وصف تجريبي
# disqus的shortname,如果要配置disqus作为评论服务可能需要改成你对应的
disqusShortname: hugo-theme-stack
# 主题的默认语言
# 可接受的值: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: en
# 如果网站语言是中日韩的话,需要改成true,否则字数统计等功能可能会出错
hasCJKLanguage: false
footer:
# 修改网站创建的时间
since: 2020
# 自定义页尾
customText:
# 日期格式
dateFormat:
published: Jan 02, 2006
lastUpdated: Jan 02, 2006 15:04 MST
# 自定义侧边栏
sidebar:
emoji: 🍥
subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
avatar:
enabled: true
local: true
src: img/avatar.png
article:
# 数学渲染
math: false
# 目录
toc: true
# 阅读时间
readingTime: true
# 许可证
license:
enabled: true
default: Licensed under CC BY-NC-SA 4.0
# 评论服务,您需要使用google搜索对应的评论系统然后填写对应字段
comments:
enabled: true
provider: disqus
disqusjs:
shortname:
apiUrl:
apiKey:
admin:
adminLabel:
utterances:
repo:
issueTerm: pathname
label:
remark42:
host:
site:
locale:
vssue:
platform:
owner:
repo:
clientId:
clientSecret:
autoCreateIssue: false
# Waline client configuration see: https://waline.js.org/en/reference/component.html
waline:
serverURL:
lang:
pageview:
emoji:
- https://unpkg.com/@waline/emojis@1.0.1/weibo
requiredMeta:
- name
- email
- url
locale:
admin: Admin
placeholder:
twikoo:
envId:
region:
path:
lang:
# See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
cactus:
defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
serverName: "cactus.chat"
siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
giscus:
repo:
repoID:
category:
categoryID:
mapping:
lightTheme:
darkTheme:
reactionsEnabled: 1
emitMetadata: 0
gitalk:
owner:
admin:
repo:
clientID:
clientSecret:
cusdis:
host:
id:
|
写文章
撰写关于我页面
在您的站点主目录进入content文件夹,然后进入page文件夹,然后进入about文件夹,然后新建index.md,模板内容如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
---
title: 关于
description: 关于我
date: '2023-10-20'
aliases:
- about-us
- contact
license: CC BY-NC-ND
menu:
main:
weight: -90
params:
icon: user
comments: false
---
在下面输入你的内容吧,使用markdown。
|
写文章
在您得站点主目录打开命令窗口,然后输入命令来创建文章。
创建好之后,去往content\post,找到刚刚新建的md文件,按照需求填上分类和标签,然后在yaml的结尾,换一次行,就可以开始撰写了。
部署到服务器
生成静态页面
在您的网站主目录打开命令窗口,输入以下命令生成网站。
在服务器安装需要的软件
使用ssh 命令或者putty连接到服务器,输入以下命令安装nginx和certbot。
1
|
sudo apt update && sudo apt install nginx certbot python3-certbot-nginx -y
|
上传到服务器
用winscp连接到服务器,去往/var/www目录,然后复制生成好的public文件夹,然后改名成blog。
接下来,使用ssh连接到服务器,或者也可以直接在winscp使用快捷键ctrl+p直接启动putty,然后输入以下命令来设置文件的所属用户和组。
1
2
|
cd /var/www
sudo chown -R www-data.www-data blog
|
创建网站
接下来,需要创建网站。
为了方便,删掉/etc/nginx/sites-enable和/etc/nginx/sites-available,然后新建/etc/nginx/sites目录。
1
2
|
sudo rm -R /etc/nginx/sites-enable && sudo rm -R /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites
|
然后修改nginx.conf,让他能够找到我们的新位置。
在文件结尾加入以下内容并保存。
1
|
include /etc/nginx/sites/*.conf;
|
然后,在/etc/nginx/sites创建网站的配置文件,这里我使用名称blog.conf,然后输入内容。
1
2
3
4
5
6
7
8
9
10
11
|
server {
listen 80;
listen [::]:80;
server_name blog.yourdomain.com;
root /var/www/blog;
index index.html;
error_log /var/log/nginx/blog.error.log;
location / {
}
}
|
创建完成后重启nginx。
1
|
sudo systemctl restart nginx
|
然后去往浏览器,输入你的域名,如果看到了博客,那就继续,如果报错需要根据具体情况解决。
接下来,给我们的网站启用https吧。。
使用ssh 连接到服务器。,然后输入以下命令,并按照引导提示即可启用https访问。
恭喜,您的博客已经搭建成功。