消解炼金术

<01>hugo框架选择

博客相关

搭建博客的第一个卡点在写好静态前端页面后,想自动监听生成文章的上下篇功能。起初准备用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结束任务进程。

© 2026 消解炼金术 | 
Powered by Hugo and Cloudflare