本文已参加「新人创造礼」活动， 一起敞开创造之路。
写在前面
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客户端地址：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，客户端地址：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。年轻时总想着搞个人博客，早就接触到了建站容易的静态博客，但感觉建立起来对技能进步协助不大，就没搞。
现在博客做起来了，能刺激我总结总结经历知识。经过增加各种前端特效、插件，巩固了一下前端根底。这些能够做刚学完前端根底的过渡操练，要是那会儿就来实战操练就好了。那会儿天天做作业，贼单调，做完还就扔了忘了，没实战也没功率(* ￣︿￣)
