搭建博客的第一个卡点在写好静态前端页面后,想自动监听生成文章的上下篇功能。起初准备用node.js写脚本实现,但这涉及到怎样自动运行脚本、如何同步热重载等等问题。除了上下页外,还包括想实现导航栏的同步、分区等等。若依靠js实现动态加载功能,又会顾忌加载速度/js禁用等问题(忽略SEO的情况);还有其他类似于采用在线编辑器等方案实现远程运行脚本,但这仍然依赖在线环境,非常不便。同时后续还有将从notion内导出的md文件解析成html格式的需求等等,最终决定根据这些需求参考有相应功能的博客框架,了解可实施方案后采用了hugo。
第一步:安装hugo(windows系统采用了choco,需要管理员权限安装)
choco install hugo -confirm //根据需求也可以安装extended版本
hugo version //验证版本号
第二步:创建项目并进入文件夹
d: //切换到目标磁盘
hugo new site Melusinn
cd Melusinn
第三步:研究主题
在hugo的theme页内并没有找到心怡的选择,于是把下载hugo前自己搭好的html、css丢进了layouts和status里。然后开始正式着手研究hugo框架。
第四步:本地预览
hugo server
浏览器打开本地http://localhost:1313展示网站效果。上传前需求hugo生成可用的public文件,而不是hugo server(最开始踩的坑)。
hugo框架内有一些基本规则,contents内放md文件,如果要以文件夹形式分类,每个文件夹下都需要放一个_index.md表示本个文件夹有页面显示(否则无法显示/html似乎同样可实现)。layouts下新建index.html渲染首页,default文件夹内可以建baseof.html(公用部分)/single.html(md默认转换格式)/section.html或list.html(contents下子文件夹页面样式)。
hugo server时本个ps对话框被热重载占用,ctrl+c结束任务进程。