Hugo使用经验 - 朝闻道

为了防止时间太久忘记方法，建站的关键知识点还是要记录一下的。

大人，时代变了#

最初我打算自己写出整个网站（现在想想真傻），于是学了一些 html 和 css 知识。后来打开第一个 txt 文件准备动手写主页 html 文件时，我发现，我一点也写不下去，几个标签下来就厌倦不已，想完全掌握并熟练运用这些知识需要很长时间，就算掌握了它们，写出漂亮页面还需要想象力和创造力 —— 短期内根本不可能写出完整的网页。最重要的是它们非常繁琐，一个人要投入多少时间精力才能搞定所有工作啊！

后来看到网友的一句话 —— 独自造轮子的时代已经结束了，前人已经帮你把模型调好了 —— 我才恍然大悟。我们这个时代太快了，闭门造车的做法很是愚蠢，学会借力前行才是。所以后来果断选择使用 hugo 引擎来做网站 —— 它的作用是，你给出参数（模型），它负责组装。

不过 html 和 css 知识也没有白学，因为对网页结构有了解的话，知道什么是标签，什么是属性和值，以及它们的基本规则，与网页打交道时很有帮助，才有可能根据自己喜好修改主题的细节。

选择 Hugo#

网站生成器有很多，我看到许多人建站都会经历兜兜转转的过程，工具从 wordpress 到 hexo，再到 hugo，再到 wordpress...... 所以我想避免这个坑，于是在开始动手之前花了许久做决定，我的要求是经济、高效、方便 ——Hugo 最适合不过了 —— 静态网页经济安全，Hugo 生成速度最快，也不需要服务器。

文件目录#

这是每个文件夹存放的内容及其作用的标准格式。

archetypes
- 在 default.md 文件中存放文章页面参数
content
- 存放所有文章，如关于、分类、以及每篇文章
layouts：存放生成页面所使用的模板、参数
- _default
  - 页面模板
  - 如 list.html 是列表页的模板，page.html 是普通页的模板
  - hugo 渲染并生成页面的本质：内容 + 模板 = 页面
- partials
  - 配件模板
  - 如 footer.html 是页面底部区域的模板，header.html 是页面头部的模板
  - 页面模板中常会引用这些配件模板
- shortcodes
  - 短代码
  - 在文章中固定格式的简洁代码，如引用 bilibili 的视频，插入网易云的音乐，所使用的代码存放在这里
  - 这个思维导图，以及顶部的音乐都是短代码的功劳
  - 如有需要，欢迎留言
static
- img
  - 存放图像
- css
  - css 模板
  - css 的作用是让页面更漂亮，就像穿了新衣服
- js
  - JavaScript
themes
- 存放所有的主题

代码#

Hugo#

查看版本：hugo version
新建库：hugo new site 666
- 在当前目录下，新建一个名为 "666" 的文件夹，其中内置应有的结构
新建文章： hugo new post/name.md
- 意思是在 content/post 文件夹内，生成一个名为 name.md 的文件
生成网页： hugo
- 将在父文件夹中生成 public 文件夹，存放着已经渲染好的所有页面
查看效果： hugo server
- 返回一个网址，你可以使用自己的浏览器来实时查看自己的页面效果
主题
- 我用的笨方法，下载主题 zip 包并解压到 themes 文件夹，之后在 config 文件中设置theme参数为主题名。
站内引用文章
- [知道越多越不快乐？]({{< ref "posts/2023-03-09 知道的诅咒.md">}})：[知道越多越不快乐]({{< ref "posts/2023-03-09知道的诅咒.md">}})
引用图片
- ![实例](/img/posts/实例.png)

Github#

初始化配置

cd public
git init
git remote add origin https://github.com/ooxx/pornhub.github.io.git
git add -A
git commit -m "自行填写备注"
git push -u origin master   #我的"master"用的"main"

第三行的网络地址是 Github 仓库的 SSH 链接，可以在仓库中复制。如果一直连不成功，很有可能是 SSH 没有绑定密钥，可自行上网搜索。

这是以后每次上传的代码

cd public
git add .
git commit -m "自行填写备注"
git push

如果 push 和本地无关，则需要git pull将网上的内容和本地的同步。

评论系统#

本站使用的是 utterances 的服务：只需创建一个 github 仓库即可。无广告、配置简单，轻量开源评论系统，一点也不折腾，10 分钟之内就能搞定；缺点是需要登陆 Github 账号才能评论。

先在 github 创建一个新库，要设为公开 public，然后点击这个链接配置到新库。
下面代码放在 congig.toml 文件中

  [params.utteranc]
  enable = true
  repo = "1xiaoyuan/comment"           #换成自己的 "用户名/仓库名"
  issueTerm = "pathname"
  theme = "github-light"

下面的代码放在模板footer.html文件中，一般放在底部

<script src="https://utteranc.es/client.js"
    repo="1xiaoyuan/comment"      #换成自己的 "用户名/仓库名"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
</script>

删除仓库内容#

想要删除远程仓库中的内容，不删除本地文件，也不删除仓库。其实我不太会用，琐碎的代码先放在这吧。

$ git pull origin master  # 将远程仓库里面的项目拉下来

$ dir # 查看有哪些文件夹

$ git rm -r --cached target  # 删除你要删除的文件名称，这里是删除target文件夹（cached不会把本地的flashview文件夹删除）

$ git commit -m '删除了target' # 提交,添加操作说明

git push -u origin master #重新提交（若需要对其他分支进行操作，则把master换为对应分支，如:git push -u origin dev）

其他#

剩下的有时间再写