hugo使用经验

---

title: “Hugo博客搭建经验”
date: 2021-07-26T16:47:18+08:00
draft: false
description: “《别用》”
featured_image: “https://img-blog.csdnimg.cn/c0b511f31c864b22b873b6aee915dfd5.png”

---

写在前面

​ hugo最强使用技巧：别用hugo (狗头)

​ 这个世界上的静态网站生成器至少有333个，先从我的角度说说其他静态网站生成器的优点：

• VuePress：基于vue构建，可以顺便练习vue，减小web开发者的学习成本;

  • 中文文档

  • 主题丰富（在github主页有）

  • 插件挺丰富，不知道常用的有没，但是大丈夫！因为是Vue，自己集成功能很方便！

  • 文档说是单页应用，解决路由时音乐播放器重新加载播放的问题应该简单一些；

• Hexo：由中国台湾人创建，咱们用的人多所以网上教程丰富；

  • [√]中文文档
  • [√]主题丰富
  • [√]插件齐全（几乎不用敲代码，npm上都一堆插件）
  • 多个静态页面

• WordPress:嗯。。和hugo都是老外搞的，风格半斤八两，都用了"shortcode"这种奇怪的东西（类似模板引擎或vue的组件，但还需要额外的学习成本），支持OneNote上传笔记（鸡肋）；可以和PHP配套使用；

  然后。。。hugo的优点可能是快？我不知道。。。可我是男人可如果开发速度慢、学习成本高不还相当于慢了。。中文文档还相当于没有！

  如果重命名content下的md文件，hugo编译时不会把删掉该替换的文件。不知道其他工具怎么样。

  当然所有工具都是没有上限的！只是碰壁次数与资料多少、学习成本之类的区别！

快速开始

中文文档少有的中文233：

快速入门 | Hugo 中文网 (gohugo.cn)

其中下载主题这步可以自己选，主题商城也在这个网站中↑；

我所用的主题是Diary，可以在博客左下↙版权那里找到github仓库。自己魔改了一部分，为了添加功能。

常用命令、脚本

​ 获取QQ头像的url: https://q1.qlogo.cn/g?b=qq&nk=QQ号码&s=640。用edge浏览器的时候发现，如果用https访问博客，头像url用http访问的话会被拦截。

​ 每次输入这么多命令太麻烦了，hugo似乎没有把自己提交到github的命令，索性写了一个windows脚本上传博客。提前在path环境变量中配置hugo命令所在目录，以在任意位置执行hugo命令。

​ 还是第一次主动写windows脚本，上一次写还是上一次（呸，上次是改U盘图标，照网上抄的）。脚本文件后缀名为.bat，直接在里面写命令即可。

hugo -D
hugo
cd ./public
git add -A
git commit -m "脚本提交"
git push -u origin master

​ 先执行一遍hugo -D是为了将草稿也编译一下；再不带-D，这样主页不会显示草稿；

​ 还有一个博客生成测试脚本，执行hugo server命令，用于在本地实时查看页面；

​ 也可以使用github Actions来完成持续集成（CI）,顺道学习Devops；难得有个项目有提供hugo的插件，我却还是觉得脚本成本低，，

进阶版脚本：同时提交至github和gitee:

chcp 65001
rem 定义变量延迟环境，关闭回显
@echo off&setlocal enabledelayedexpansion
rem 读取config.toml所有内容
for /f "eol=* tokens=*" %%i  in (config.toml) do (
rem 设置变量a为每行内容
set a=%%i
set "a=!a:http://tablerows.gitee.io/tablerow.github.io/=https://baiban114.github.io/tablerow.github.io/!"
rem 把修改后的全部行存入$
echo !a!>>$)
rem 用$的内容替换原来config.toml内容
move $ config.toml

hugo -D
hugo
cd ./public
git add -A
git commit -m "脚本提交"
git push -u origin master

cd ..

@echo off&setlocal enabledelayedexpansion
for /f "eol=* tokens=*" %%i  in (config.toml) do (
set a=%%i
set "a=!a:https://baiban114.github.io/tablerow.github.io/=http://tablerows.gitee.io/tablerow.github.io/!"
echo !a!>>$)
move $ config.toml

hugo -D
hugo
cd ./public
git add -A
git commit -m "脚本提交"
git push -u gitee master
pause

chcp 65001是将本次bat脚本运行时采用的字符集设置为utf8，因为牵扯到修改hugo的配置文件（相关内容会编译至页面）

如果脚本页面中的内容也有中文（如“脚本提交”），建议将也脚本文件保存为utf8,避免这一部分中文变成乱码

• 回头试试提交信息加上时间戳之类的（或者指定参数？）

自己钻研的定制经验

utteranc.es客户端地址：https://utteranc.es/client.js

​ 因为没时间系统学习怎么制作hugo主题，我只能在Diary主题的基础上瞎摸索，这里是一些经验；如果其他主题作者命名方式一样（约定大于配置233）就会很好办。

​ 对Diary主题改动了一些，有点儿想提PR的冲动。。。不过萌新经验还差太多，不知道合不合适。。。羞(．． )…

站点&&主题目录结构

根站点和主题文件夹有相同的目录结构，hugo会优先使用根站点下的配置。

以Diary为例，主题根文件夹下：

• layout放置了页面的主体框架，其中

  • shortcodes目录定义shortcode，可以在其他html中当组件用

  • _default下存放了主体部分的html框架（即body中的主div内的内容，正中间的主体）

    • baseof.html是全html页面的框架，其中head部分被放到了partials文件夹下

    • single.html是文章内容的html

    • 可以自定义友链、“关于我”这种功能的页面在这里，记得将single中的主体框架部分拷贝过来，修改{{.Content}}附近；

      • 踩坑：自定义页面的时候，要全用{{define main}}包裹起来，我把css放在外边，结果只编译了css

• partials有评论、head、自定义head、版权、主体js等部分的html

  • sidebar:电脑端侧边栏的大纲（说是大纲是因为引用了版权页，而版权页单独写在一个html里），移动端这部分有单独页面，不在这里（见baseof.html）；

• data 存储数据文件供模板使用

• public 生成的静态网站文件会放在这里

站点配置文件config.toml

注意不要在主题文件夹下放config！那儿也会生效！

博文开头的元数据配置

• layout: “” 不用带后缀；该md文件会寻找layout下同名html文件渲该页染；
• draft: true 为true时是草稿，不带-D参数的hugo命令不会编译、在首页显示草稿；这也是为什么我要在脚本里先后执行两次命令。
  • 关于我、友链等页面可以用这种方式从隐藏，只在特定页面出现

其他的可以见主题文件夹下/archetypes/default.md

拓展

评论插件

静态博客要是没有自己的后台的话，评论也只能托管到其他平台上去。我用的是utteranc.es，客户端地址：https://utteranc.es/client.js

是将评论套在github的评论区。缺点是要在国内登录github网不好。。也许有gitee的？

• 或者自己写个类似的直接评论到B站这类平台？会爬虫or bot应该不难。

还有很多其他的评论插件更好，但我忘了名字了doge在这里记一下。真不推荐我用的这个。虽然有些平台要带水印之类的。

• gittalk

Live2d看板娘

基础款

​ 基础款

<script type="text/javascript" charset="utf-8"  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js">script>
<script type="text/javascript">
    L2Dwidget.init({
        model: {
            scale: 1,
            hHeadPos: 0.5,
            vHeadPos: 0.618,
            jsonPath: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki@1.0.5/assets/shizuku.model.json',       // xxx.model.json 的路径,换人物修改这个
        },
        display: {
            superSample: 1,     // 超采样等级
            width: 120,         // canvas的宽度
            height: 300,        // canvas的高度
            position: 'right',   // 显示位置：左或右
            hOffset: 0,         // canvas水平偏移
            vOffset: 0,         // canvas垂直偏移
        },
        mobile: {
            show: true,         // 是否在移动设备上显示
            scale: 1,           // 移动设备上的缩放
            motion: true,       // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1,  // 默认透明度
            opacityOnHover: 1,  // 鼠标移上透明度
        },
     });
script>

加到哪儿应该都行，我是粘到了extended_head里，这样会加载到head标签中。人物长什么样子可以直接百度“live2d 看板娘 ”+名字、长相什么的。我个人喜欢shizuku，双马尾好可爱ヽ(✿ﾟ▽ﾟ)ノ!!! hibiki也不错

音乐插件

使用了APlayer && MetingJS。直接看MetingJS的github仓库即可：MetingJS，暂时不用看Aplayer用法，CV大法好（doge）

<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>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js">script>

<meting-js
	server="netease"
	type="playlist"
	id=" "					
	list-folded = "true"	
	volume = "0.3"			
>
meting-js>

Aplay是一个Html5音乐播放器，而MetingJS结合了国内几大音乐平台的api。本想直接用外链，但网易云官方现在似乎不提供可用的歌单外链。

注：

• 在使用Meting提供的网易云api时，歌单里歌曲太多或使用“我喜欢的音乐”歌单可能无法从api获取数据！
• 需要的js、css文件在头文件中按顺序引入（有依赖关系）
• Aplayer官方提出了好多静态博客插件，唯独没有hugo的。~~《如果早知道，用hugo会被孤立。。。》~~虽然我也没用那些插件。这个主题用了vue，可以通过vue集成。

静态页面托管平台

• github pages
• gitee pages
  • 提交到仓库后，还要在Pages服务那里点“更新”才会更新！！
• vercel

我看oschina和CSDN也有项目仓库了，不知道有没有托管功能。

图床

• gitee
  • 对于常用图片后缀不允许外链（通过查看请求头中的Refer）,目前webp格式的还可以。如果只把博客部署在gitee还是可以考虑
  • 能不能钻个空子利用pages当图床?
• CSDN发篇文章只有图片当图床
• vercel + 百度云
• picgo可以结合OSS作图床，也许可以试试结合CSDN？
• 好家伙我看还有新浪微博图床插件的，离谱哦
• typora使用CSDN图床 - 『编程语言区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

我为什么用hugo?

​ 哦我的上帝啊，瞧瞧这hugo！ko no sei gai还有更难用的静态网站生成器吗？当然我也没用过其他的，只是吐槽一下hhh

​ 一开始尝试在centos7上使用hugo（linux64位0.84.x版本），并用nginx做服务器部署生成的静态页面，遇到了路径问题，样式文件加载不出来；然后修改到一半，新的页面突然就生不出来了。。。QAQ

​ 改了配置文件、添加了新文章、执行hugo命令后也没有生成新的、正确的静态页面。根据提示，安装extended版本 ，结果又报错说缺少c++的新版动态库，但我的确是新版了（跟CSDN上的博客比）。现在有经验了，回想回想可能是配置文件或者命令错了。

​ 最后用了windows版+github pages。省时又省心，效果还一样。之前尝试部署到服务器上的我简直是个可爱的小傻瓜。

​ 另，gitee的Pages服务这几个月关闭了，预计8月左右恢复。说是为了建设绿色网络环境什么的，可能不符合规定的要被清除？

​ 近日正好收到一篇公众号的推送，是关于hugo搭建博客的，就用上了。最早了解的是wordPress，但没有使用；身边人用的最多的是hexo。年轻时总想着搞个人博客，早就接触到了建站容易的静态博客，但感觉搭建起来对技术提高帮助不大，就没搞。

​ 现在博客做起来了，能刺激我总结总结经验知识。通过添加各种前端特效、插件，巩固了一下前端基础。这些可以做刚学完前端基础的过渡练习，要是那会儿就来实战练习就好了。那会儿天天做作业，贼枯燥，做完还就扔了忘了，没实战也没效率(* ￣︿￣)