博客搭建
https://letere-gzj.github.io/hugo-stack/
跟着博客就搭建完了
到github自动部署这有些改动
博客根目录/.github/workflows/自己起的名字.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
name: deploy
# 代码提交到main分支时触发github action
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-24.04 #ubuntu版本不能用latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: "0.129.0" #这里要改成本地hugo的版本
|
git自动部署后推送
第一次推送是这样
1
2
3
4
5
6
|
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin {你的github仓库地址}
git push -u origin main
|
后续推送只需要
1
2
3
|
git add .
git commit -m "first commit"
git push
|
头像修改
文件路径:boke\assets\img
图片命名为avatar.png
优先加载主目录下的
字体修改
-
下载字体
100font.com - 免费商用字体大全 - 免费字体下载网站
-
把字体文件放入assets/font下
-
将以下代码修改并复制到layouts/partials/footer/custom.html文件中(文件不存在就自己创建)
显示文章更新时间
(1) 在配置文件 hugo.yaml 中加入以下配置
1
2
3
4
5
6
7
8
|
# 更新时间：优先读取git时间 -> git时间不存在，就读取本地文件修改时间
frontmatter:
lastmod:
- :git
- :fileModTime
# 允许获取Git信息
enableGitInfo: true
|
(2) 若想在文章开头就显示更新时间，修改layouts/partials/article/components/detail.html，在指定位置引入以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div class="article-details">
...
<footer class="article-time">
...
<!-- 更新时间 -->
{{- if ne .Lastmod .Date -}}
<div class="article-lastmod">
{{ partial "helper/icon" "clock" }}
<time>
{{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
</time>
</div>
{{- end -}}
....
</footer>
...
</div>
|
- 这样就会文章开头显示修改时间
- tips: 更新时间的格式去 hugo.yaml 中的 params.dateFormat.lastUpdated 进行修改
友链、归档多列显示
- 修改
assets/scss/custom.scss文件(不存在则自行创建)，引入以下css样式代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
@media (min-width: 1024px) {
.article-list--compact {
display: grid;
// 目前是两列，如需三列，则后面再加一个1fr，以此类推
grid-template-columns: 1fr 1fr;
background: none;
box-shadow: none;
gap: 1rem;
article {
background: var(--card-background);
border: none;
box-shadow: var(--shadow-l2);
margin-bottom: 8px;
margin-right: 8px;
border-radius: 16px;
}
}
}
|
图片api
直接把图片链接放到image
用本地图片的话,绝对路径有点逆天,直接放到和文章同一文件夹就好了
博客的一些设置
创建文章
一般用hugo命令创建文章的时候都是用的hugo new xxx/xxx/index.md
尽量创建文章后命名用index.md来命名,否则图片会缺失
文章会自带这些东西
1
2
3
|
title = 'Markdown'
date = 2024-12-31T15:27:48+08:00
draft = true
|
但是如果想要文章封面的话需要加image等属性,每次都要手动加的话太麻烦
找到博客根目录/archetypes/default.md
1
2
3
4
5
6
7
8
9
10
11
|
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
draft = true
author = '一个俗人' #想固定的就赋值
categories = []
image = '' #不想设置固定的就让他为空
description = ''
|
每次创建完文章后这些都会放在头上
博客首页文章
博客首页的文章如果一开始删了content/post文件夹的话会导致首页没有文章
如果想要更改放在首页的文章
找到根目录下的hugo.yaml,打开搜索mainSections
1
2
3
|
params:
mainSections:
- dajian # - 这里放文章文件夹的名字
|
然后网站首页就会显示这个文件夹里的文章了
归档分类封面
根目录\content\categories\分类的文件夹
这里的md一定要为**_index.md**,否则不生效
主页面背景设置
找到博客根目录\layouts\partials\footer\custom.html
图片随机api
1
2
3
4
5
|
body {
background: url("https://t.mwm.moe/fj") no-repeat center top;
background-size: cover;
background-attachment: fixed;
}
|
图片静态
图片放到**\assets\background**
1
2
3
4
5
6
7
|
<style>
body {
background: url({{ (resources.Get "background/背景图片名").Permalink }}) no-repeat center top;
background-size: cover;
background-attachment: fixed;
}
</style>
|
结语
博客一直都想着弄的,也是熬到2024的最后一天了(；´д｀)ゞ
笔记都放到语雀上了,后续会放到博客上,本人菜鸡,大佬们勿喷d(´ω｀*)
