如何发布一篇博文

目录结构

父目录子目录
📁blog📁content
📁data
📁layouts
📁public
📁resources
📁static
📁themes
📃config.toml
📃deploy.sh

创建一篇博文

方式一:命令创建

进入blog目录下,执行命令:

1
hugo new "posts/博文名称.md"

方式二:手动创建

posts文件夹下手动创建博文名称.md文件

编辑博文

博文头信息

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
---
title: "如何编辑一篇博文"
date: 2021-03-09T16:58:30+08:00
draft: false
tags: [标签1, 标签2]
categories: [分类, 子类]
toc: true
dropCap: false
badge: false
---

部分属性支持全局配置(config.toml),优先级低于此处

注意冒号后有一个空格

标题

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

列表

TYPE示例语法
无序列表
  • Item 1
  • Item 2
    • Item 2a
    • Item 2b
1
2
3
4
- Item 1
- Item 2
  - Item 2a
  - Item 2b
有序列表
  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3a
    2. Item 3b
1
2
3
4
1. Item 1
2. Item 2
   1. Item 2a
   2. Item 2b
任务列表
  • 待办事项 1
  • 完成事项 1
1
2
- [ ] 待办事项1
- [x] 完成事项1

排版

语法 示例
1
{{< align left "文字居左" >}}

文字居左

1
{{< align center "文字居中" >}}

文字居中

1
{{< align right "文字居右" >}}

文字居右

强调

语法 效果
*斜体*or_斜体_ 斜体
**粗体** or __粗体__ 粗体
~~删除线~~ 删除线

另,Meme 主题新增独创语法

语法 效果
..加点.. 加点

提示

语法效果
1
{{< notice error >}}错误{{< /notice >}}

错误

1
{{< notice warning >}}警告{{< /notice >}}

警告

1
{{< notice tip >}}提示{{< /notice >}}

提示

1
{{< notice success >}}成功{{< /notice >}}

成功

角标

TYPE 语法 效果
上标 30<sup>th</sup> 30th
下标 H<sub>2</sub>O H2O
脚注 内容 [^1][回车][^1]: 这是一个脚注 内容 [1]

引用

语法效果
1
> 海上生明月天涯共此时

海上生明月,天涯共此时

1
2
3
{{< quote >}}
    海上生明月,天涯共此时
{{< /quote >}}

海上生明月,天涯共此时

1
2
3
{{< quote-center >}}
    海上生明月<br/>天涯共此时
{{< /quote-center >}}

海上生明月
天涯共此时

表格

1
2
3
| 表头 | 表头 | 表头 |
| :--- | :--: | ---: |
| 居左 | 居中 | 居右 |
表头 表头 表头
居左 居中 居右

复杂表格:

 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
<table>
  <tbody>
    <tr>
      <th colspan="3">结果字段</th>
      <th>字段含义</th>
      <th>类型</th>
    </tr>
     
    <tr>
      <th colspan="3">address</th>
      <th>详细地址信息</th>
      <th rowspan="6">string</th>
    </tr>
     

    <tr>
      <th rowspan="5">content</th>
      <th colspan="2">address</th>
      <th>简要地址信息</th>
    </tr>

    <tr>
      <th rowspan="2">address_detail</th>
      <th>city</th>
      <th>城市</th>
    </tr>

    <tr>
      <th>city_code</th>
      <th>百度城市代码</th>
    </tr>

    <tr>
      <th rowspan="2">point</th>
      <th>x</th>
      <th>当前城市中心点经度</th>
    </tr>

    <tr>
      <th>y</th>
      <th>当前城市中心点纬度</th>
    </tr>
     
  </tbody>
</table>
     
结果字段 字段含义 类型
address 详细地址信息 string
content address 简要地址信息
address_detail city 城市
city_code 百度城市代码
point x 当前城市中心点经度
y 当前城市中心点纬度

链接

TYPE语法 效果
链接
1
[我的博客](https://ztygcs.github.io/)

我的博客

图片
1
![](https://ztygcs.github.io/icons/android-chrome....png 'img')

◎ img

多媒体

单曲

1
2
3
<audio controls height="100" style="display:block;margin:auto">
  <source src="https://xxx.mp3" type="audio/mpeg" />
</audio>

歌单

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!--来源:https://aplayer.js.org/#/zh-Hans/-->
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<div
  class="aplayer"
  data-id="歌单id"
  data-server="netease"
  data-type="playlist"
  data-fixed="false"
  data-mini="false"
  data-listfolded="true"
  data-order="random"
  data-theme="#07b39b2a"
></div>

更改属性data-id,指定网易歌单 id

视频:

1
2
3
<video poster="https://xxx.png" controls>
    <source src="https://xxx.mp4"  >
</video>

更改属性poster,指定首页图
更改属性src,指定视频地址

卡片风格

1
{{<card>}}十年生死两茫茫,不思量,自难忘{{</card>}}
十年生死两茫茫,不思量,自难忘

GitHub风格

1
2
3
4
5
6
7
8
{{< github
    name="hugo-theme-meme"
    link="https://github.com/reuixiy/hugo-theme-meme"
    description="MemE 是一个强大且可高度定制的 GoHugo 博客主题,专为个人博客设计。MemE 主题专注于优雅、简约、现代,以及代码的正确性。同时,希望你将像欣赏一个模因一样欣赏 MemE,希望你将像分享一个模因一样分享 MemE,就像你的博客和文章所做的那样😝!"
    color="#E34C26"
    language="HTML"
>}}

MemE 是一个强大且可高度定制的 GoHugo 博客主题,专为个人博客设计。MemE 主题专注于优雅、简约、现代,以及代码的正确性。同时,希望你将像欣赏一个模因一样欣赏 MemE,希望你将像分享一个模因一样分享 MemE,就像你的博客和文章所做的那样 😝!
HTML

发布博文

方式一:命令行

打开 cmd 窗口在 blog 目录下依次执行以下命令:

1
2
3
4
5
6
7
8
hugo -t meme
# Go To Public folder
cd public
# Add changes to git.
git add -A
# Commit changes.
git commit -m "msg"
git push origin master

方式二:deploy.sh 文件部署

blog文件夹下新建 deploy.sh 文件并编辑以下内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
# if using a theme, replace by `hugo -t <yourtheme>`
hugo -t meme
# Go To Public folder
cd public
# Add changes to git.
git add -A
# Commit changes.
# 使用`date`加入时间
# msg="rebuilding site `date`"

msg="release:发表文章《...》"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back
cd ..

然后在命令窗口中进入blog目录下执行以下命令:

1
./deploy.sh

关于 commit message的说明

字段 说明
feature(新) 开发新的功能
fix(修复) 修复 bug
release(发布) 发表文章
update(更新) 更新文章
delete(删除) 删除某项内容
modify(修改) 修改文章的内容
css(样式) 只涉及到样式的修改
docs(文档) 说明文档
restructure(重构) 重构说明

  1. 这是一个脚注