一条龙式搭建Hugo博客
安装 hugo
在releases 界面下载 hugo 的 exe 文件，mac 用户可以使用brew install hugo
如果要更新 hugo 的所有依赖库，使用命令
go get -u -v github.com/gohugoio/hugo，注意，hugo 中文文档中给出的 GitHub 地址是已经过期的，运行后会叫你从这个地址下载（可以试试）
使用 hugo 生成站点与文章，并在本地查看
使用命令hugo new site post\intro.md，这个命令会在本来为空的 content 文件夹下新建 post 文件夹，并在 post 文件夹内新建 intro.md 文件。如果你不喜欢 post 这个名字，也可以自定义。
Tips:尽量使用
hugo new site命令来新建 md 文件（虽然也可以直接创建），这个命令同时还会生成一些有用的头部，这些会被下载的主题用于显示信息与美化
安装 hugo 主题，美化你的博客
hugo 有一个 themes 文件夹，使用cd themes进入该文件夹，在hugo 官方皮肤网站挑选一个喜欢的主题，使用 git 下载
这里我使用的是kakawait提供的tranquilpeak 主题
cd themes
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
更多配置请查看tranquilpeak 的官方文档
需要注意的是，你需要花一点时阅读文档并配置你的博客（文档全英，耐心阅读）；如果你和我一样懒，可以直接复制作者的 config.toml 文件替换你博客根目录的 config.toml 文件
这样你只用配置一些个人信息即可。你可以直接阅读作者的 toml 文件，注释很详细，相信不难看懂。
使用 GitHub 的 pages 功能发布你的网页
这时候我们想看一下博客的效果，我们可以使用hugo -D server命令在本地查看。-D 选项默认在 public 文件夹生成页面，如果你想在 docs/文件夹生成页面，就使用hugo -d docs再hugo server
这时候终端会蹦出一个类似//localhost:1313/的地址，在浏览器中输入该地址就能看到本地生成的博客啦
如果想停止本地服务器就ctrl+c即可
但是我们的博客不可能只给我们自己看啊，我们希望让互联网上的大家都看到。这时候我们有几个选择：
- 购买自己的云服务器，作者没试过，就不献丑了
- 使用 GitHub 的 pages 服务，作者用的就是这个
- 使用 gitee 的 pages 服务，在国内会快一点，但是需要上传各种敏感信息，比如手持身份证照片，而且需要审核，酌情选择
注册 GitHub 账号
谷歌 GitHub 按指引注册即可
创建一个新的仓库（repository）
仓库名最好是<你的用户名>.github.io，比如我就是 peterliu-all.github.io，如果不是这个名字可能会有一些未知的错误。
description 随便写一下，一定要设置为 pubic，一开始先不要加别的文件（不要点下面的 add readme、license 等），让仓库为空
然后复制一下仓库的 https 地址
然后返回我们的终端，在你的博客根目录下输入hugo --theme=<主题名> --baseUrl="https://<你的用户名>.github.io/"，这里的主题名就是你 themes 文件夹下下载的主题文件夹名，如果你嫌太长了可以直接更名为 default。
注意，上面这一步是一定要的，不然可能会出现生成的页面没有样式的情况
然后我们进入 public 文件夹（或者你指定的生成页面的文件夹，比如 docs），输入下列命令：
git init <br>
git remote add origin <你复制的https链接>
git add -A
git commit -m "first commit"
git push -u origin master
然后等一会（可以进入仓库->action 查看进度）就进入我们的仓库->settings->pages 就可以看到我们的页面网址是https://<用户名>.github.io/啦
以后就可以只使用以下命令啦
将下面的命令保存为.ps1脚本（Windows 下的 powershell 使用）
hugo -D --baseUrl="<你的博客URL>"
cd public
git add .
git commit -m "$args"
git push origin master
cd ..
以后就可以只使用.\upload.ps1 "<更新message>"来上传啦
解决图床问题（使用阿里云 OSS）
我们的博文没法读到我们放在本地的图片，因此我们需要图床来为我们储存需要的图片
这里作者使用的是阿里云 OSS 服务，虽然付费，但是两年 40G 只要 18 元，（作者又比较懒）非常划算
需要注意的是，GitHub 的图床服务作者使用的时候好像出了点问题，怎么也搞不了，如果你能使用 GitHub 的图床服务那自然是再好不过的（简单又免费），这里给出一篇教程~~~
购买阿里云 OSS 服务详见这篇文章，我就不重复造轮子了哈~
搭建好了图床之后，总感觉有点不爽，我想要的是那种复制了图片/截了图之后，直接在编辑器中按一个快捷键就能粘贴图片的快捷！就像 ctrl+c/v 一样方便！
这样的话，我们可以使用 vscode 的 picgo 插件。
vscode 插件商城搜索 picgo，下载了之后进入配置界面将 config path 设置为你下载了 picgo 之后的配置文件地址
或者你也可以直接在这里填
然后就可以使用快捷键ctrl+alt+u快捷将剪切板中的图片上传并转换为 markdown 格式粘贴啦~
顺便说一句，截图可以使用 snipaste，小巧且强大~
如果使用docsify 笔记本，就可以不用在线图床，直接将保存在仓库内即可，vscode 的插件 Markdown Image 可以完美胜任。
使用 gittalk 添加评论功能
gittalk 是一个使用 GitHub issue 页面保存评论的小应用，在 tranquilpeak 主题中也集成了
如果想要使用，就要先在个人 GitHub 主页->settings->developer settings->OAuth apps 中申请一对 clientID 和 client secret。
下图来自博文 https://juejin.cn/post/6956892118363144229
然后注册应用后就申请一个 client secret(注意，这个密钥只会显示一次，所以要保管好)
然后我们就可以在 config.toml 中更改相应的设置了
更正：language 要设为 zh-CN 才是中文
我们先把 enable 设为 true，上面那个 disqus 的设为 false。
clientID 和 clientSecret 就是刚才 OAuth apps 申请的。
owner 是你的 GitHub 用户名，repo 是博客仓库名（像图中一样就可以，不要完整的仓库名），admin 是可以对评论区管理的管理员名单，这里我们要把自己加进管理员名单里
下面的参数看着填就可以，具体详见gittalk 文档
gittalk 会在每一次管理员登录时为当前文章新建一个 issue，这也是一定要设置 admin 的原因
有时候登录初始化评论区会失败，因为一些众所周知的网络不通的原因，使用一些办法让网络通畅即可~
具体效果可以看本文的评论区，欢迎踊跃留言~
如果出现了其他问题，可以看上面提到的博文，这位大佬总结地非常详细~
使用 highlight.js 来实现代码高亮
在 themes->layouts->partial->header.html 中 head 标签下一行加上
<link
href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/idea.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
如果想要换样式，就改 link 里面的链接就好了，这里我使用的是 one-light 主题
如果你和我用的是一个主题，记得把 config.toml 中的这一项注释掉，不然不会起效
参阅资料：
在代码旁增加复制按钮
在根目录 static->css 和 static->js 分别创建 add-copy-btn.css 和 add-copy-btn.js，分别写入：
/* add-copy-btn.css: */
.highlight {
position: relative;
}
.highlight pre {
padding-right: 10px;
background-color: #c0bebe !important;
}
.highlight td:first-child {
user-select: none;
}
.highlight-copy-btn {
position: absolute;
top: 7px;
right: 7px;
border: 0;
/* border-radius: 4px; */
padding: 1px;
font-size: 0.8em;
line-height: 1.8;
color: rgba(0, 0, 0, 1);
background-color: rgba(193, 193, 193, 0.478);
min-width: 55px;
text-align: center;
font-family: 楷体, "Courier New", Courier, monospace;
transition: 0.1s;
opacity: 0.8;
}
.highlight-copy-btn:hover {
/* background-color: rgb(209, 209, 209); */
opacity: 1;
filter: drop-shadow(16px 16px 20px rgb(163, 163, 163));
}
// add-copy-btn.js
(function () {
"use strict";
if (!document.queryCommandSupported("copy")) {
return;
}
function flashCopyMessage(el, msg) {
el.textContent = msg;
setTimeout(function () {
el.textContent = "复制";
}, 1000);
}
function selectText(node) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
return selection;
}
function addCopyButton(containerEl) {
var copyBtn = document.createElement("button");
copyBtn.className = "highlight-copy-btn";
copyBtn.textContent = "复制";
var codeEl = containerEl.firstElementChild;
copyBtn.addEventListener("click", function () {
try {
var selection = selectText(codeEl);
document.execCommand("copy");
selection.removeAllRanges();
flashCopyMessage(copyBtn, "已复制");
} catch (e) {
console && console.log(e);
flashCopyMessage(copyBtn, "复制失败");
}
});
containerEl.appendChild(copyBtn);
}
// Add copy button to code blocks
var highlightBlocks = document.getElementsByClassName("highlight");
Array.prototype.forEach.call(highlightBlocks, addCopyButton);
})();
然后在 config.toml 中配置
如果你用的和我一样的主题，就在那一大串[[params.customJS]]后写入
[[params.customJS]]
src = "js/add-copy-btn.js"
[[params.customCSS]]
href = "css/add-copy-btn.css"
如果你用的是别的主题，就在[params]后写入
# 如果已有这两个字段就直接附加在列表中
customCSS = ['add-copy-btn.css']
customJS = ['add-copy-btn.js']
然后如果你对这个复制按钮的样式不满意，就自己更改 add-copy-btn.css 中的 highlight-copy-btn 类就好，可以通过更改 hover 伪类增加更多效果~
自定义博文 md 文件头部
在 themes->archetypes->post.md 中，在头部后面加上你想加的东西，比如：
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
slug: "{{ .Date }}"
categories:
- category
- subcategory
tags:
- tag1
- tag2
keywords:
- tech
thumbnailImage: <概览图片链接>
thumbnailImagePosition: left
autoThumbnailImage: yes
metaAlignment: center
coverImage: <封面图片链接>
coverCaption: "Draft"
coverMeta: in
coverSize: partial
comments: true
showTags: true
showPagination: true
showSocial: true
showDate: true
summary: "draft"
---
这样子hugo new的时候就会自动生成该头部
这里将 slug 设为了日期时间，这样可以保证每一篇文章都是不一样的链接，但是要让这个设置起效，就要在 config.toml 里加上（更改）：
[permalinks]
posts = "/:slug/"
这样就算你的文章是中文名字，给好友分享的时候也可以避免一些未知的错误了
注：不同主题提供了不同的头部选项，以上模板仅适用于我的主题
如果想要将文章置顶，就在头部加上 weight: 1
用于自动化生成 writeup 博客的 python 脚本
import sys
import time
import os
title = "_".join(sys.argv[1:])
real_title = title
title = title.replace("-", " ")
title = title.replace("[", "【")
title = title.replace("]", "】")
now = time.strftime("%Y-%m-%dT%H:%M:%S+08:00", time.localtime())
head = f'''---
title: "【Write-up】BUUCTF {title}"
date: {now}
slug: "{now}"
categories:
- notebook
tags:
- pwn
- write-up
keywords:
- pwn
- buuctf
thumbnailImage: <改成自己的图片>
thumbnailImagePosition: left
autoThumbnailImage: yes
metaAlignment: center
coverImage: <改成自己的图片>
coverCaption: "<自己的标语>"
coverMeta: in
coverSize: partial
comments: true
showTags: true
showPagination: true
showSocial: true
showDate: true
summary: "关于buuctf中{title}的解析"
---
[原题链接](https://buuoj.cn/challenges#{real_title})
- [checksec 查看程序架构](#checksec-查看程序架构)
- [ida 查看程序伪代码](#ida-查看程序伪代码)
- [构建 exp](#构建-exp)
## checksec查看程序架构
## ida查看程序伪代码
## 构建exp
'''
flag = True
confirm = False
cnt = 1
while flag:
if confirm:
title = title + f"_copy_{cnt}"
if not os.path.exists(os.path.join("content", "post", f"{title}.md")):
with open(os.path.join("content", "post", f"{title}.md"), "w", encoding="UTF-8") as f:
f.write(head)
print(f'Content {os.path.abspath(os.path.join("content", "post", f"{title}.md"))} created')
flag = False
else:
print(f"{title}.md已存在！")
if not confirm:
confirm = True if input(f"是否在{title}后加上后缀已避开重复？（Y|n）") == "Y" else False
if not confirm:
flag = False
使用方法：
python writeup.py <你的文件名，不含.md，可以分开写>
读者也可以自己定义一个自动博客模板脚本，作者在这里是因为不熟悉 JavaScript，用 hugo 内置的模板不熟练，所以就索性写了个 python 脚本
更改 sidebar 上各选项的图标
我使用的主题使用了这个网页上的 css 文件，下图所示的一系列 css 类名都是来自它
我们可以根据里面提供的类名来更改图标，这个 css 提供了极其多的类名，我们可以下载下来放到 vscode 中格式化后阅读
需要注意的是，有一些类名更改了之后会没有图标显示，原因是前面的fas和fab分管不同的类，如果没有正确对应，就显示不出图片。
其中，fas一般指各种通用 emoji，而fab是像 github、amazon、python 这种商业图标
如果你的主题和我不一样，你也可以查看源代码后Ctrl+f搜索文件使用的 css 文件查看
数学公式支持
hugo 中并不原生支持数学公式，因此我们需要自己加上
效果展示：
$$
e^{ix} = \cos{i} + i\sin{x}
$$
得益于这篇博文，我的博文才能有如此完美的公式支持，感谢大佬。
先在 themes->layouts->partials 下新建mathjax.html文件，将下列代码复制进去：
<script
type="text/javascript"
async
src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
>
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\[','\]']],
processEscapes: true,
processEnvironments: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
MathJax.Hub.Queue(function() {
// Fix <code> tags after MathJax finishes running. This is a
// hack to overcome a shortcoming of Markdown. Discussion at
// https://github.com/mojombo/jekyll/issues/199
var all = MathJax.Hub.getAllJax(), i;
for(i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<style>
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}
</style>
然后在该文件夹下的head.html中加上
{{ partial "mathjax.html" . }}
就可以了
增加国内媒体的分享按钮
如果你和我用的一样的主题，就参见文档，添加分享按钮，其他主题应该也有，读者可以自己探索下，如果没有就需要用share.js
而 URL 的写法参见这几个 URL，需要注意的是，?之后的是需要自己修改的，如果你的主题和我的一样，就把?后面全删了，只留下url=%s就行
微信的分享涉及 JavaScript，比较麻烦，如果实在想用就用 share.js，有些主题也有集成，作者这里就不弄了
更新：QQ 的分享链接好像无法使用，可能是官方更新了，具体请查阅 QQ 文档
其他可供参考的博文：https://cloud.tencent.com/developer/article/1769218
标签：hugo,title,Hugo,add,btn,使用,一条龙,copy,搭建 From： https://www.cnblogs.com/peterliuall/p/16828430.html