使用Hugo搭建自己的静态笔记网站
写在前面
为什么选择hugo
我选择hugo平台搭建博客的初衷,是想创建一个简洁,速度快,阅读体验好(主要是电脑端),方便检索的个人笔记分享的网站。并且考虑到成本问题,我并不想使用云服务器,静态博客发布内容之类的也很简单,我也懒得去折腾各种美化,专注于阅读就行,虽然在阅读体验上目前还有不少可以优化的地方,但这些都留给主题作者吧,我的目的是专注于写作和记录。
Hugo是一个用Go编写的静态站点生成器,它具有丰富的主题资源和较好的生成速度。 云开发(CloudBase)是一款云端一体化的产品方案 ,采用 serverless 架构,免环境搭建等运维事务 ,支持一云多端,助力快速构建小程序、Web应用、移动应用。
有没有更省事儿的选择
如果单纯只想自己用Markdown
写笔记,直接用现成的软件肯定是体验最流畅的,但是在分享方面可能体验比博客稍微差一些,和博客比起来的优势就是省事儿。
如果你只是想单纯做笔记方便自己回顾,并且不是太想折腾一个自己的博客,那么我建议直接使用现成的笔记软件或平台,并且最好是所见即所得的。这里根据自己的使用体验推荐几个平台(排名不分先后):
Typora
MarkText
Vnote
注意:前两个都完全支持所见即所得模式,但Vnote并不是完全支持,具体请去官网查看介绍。
推荐一个Markdown入门教程。
搭建步骤
在本地部署hugo写作环境
首先,我们先安装hugo:
点击这里下载对应你系统的hugo版本,个人建议下载extend
版本,比如我是Win10
系统,那么就下载下图中圈起来的版本:
然后,我们用hugo命令创建一个blog项目(注意设计命令行的操作最后都在管理员模式下运行):
hugo new site myBlog && cd myBlog
然后我们先创建一个测试的文章:
hugo new posts/my-first-post.md
最后,直接在目录中运行:
hugo server
在浏览器打开http://localhost:1313/
即可查看效果。
此时的主题样式为默认主题,如果不喜欢的话,可以自行在github上找到开源的hugo主题,并应用到你的博客中。也可以在hugo官方的主题站点找自己喜欢的。
接下来以我的博客主题为例,演示一下如何应用自定义主题:(有空补)
创建云开发按量计费环境
静态托管部署 我们进入腾讯云的云开发(cloudbase)控制台,选择开通一个云环境:
这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。创建完成后,点击进入我们刚刚创建的云环境,进入云环境管理界面:
在云环境管理界面,在右侧的网站托管中,我们可以将刚刚项目中生成好的静态页面给上传上去。当然,手动上传显得不太友好,我们也可以借助 cloudbase cli 以命令行的方式执行上传。
本地配置云开发环境
接下来的步骤请在CMD管理员模式中进行,否则可能会失败。下图中的终端我使用的是Windows Terminal
,使用哪个看个人喜好,但一定要以管理员模式启动
。
首先,安装cloudbase cli:
npm install -g @cloudbase/cli
执行登录命令:
tcb login
在弹出的页面确认授权:
接着,在hugo-site中将public目录中的文件给部署上去:
cloudbase hosting deploy ./public -e EnvID
这里的EnvID
替换为刚创建好的环境ID。
腾讯云云开发的静态网站托管有默认域名可供访问,位置如下图所示:
通过默认域名,我们就能访问博客咯。
自定义访问域名
当然也可以绑定自己的自定义域名,步骤如下:
打开 CloudBase 控制台,在 HTTP 访问服务中,点击「添加域名」,添加自定义域名以及配置 HTTPS 证书。
其他注意事项及提示
Markdown写作工具
我使用的是vscode
,用Markdown写了不少文章了,并不太需要在写作时一直预览,所以我只看代码就行,需要预览的话,vscode也有插件支持。然后由于写作的Markdown是直接发布到博客上,博客里面有一些内置的短代码,配合vscode设置代码片段会使得写作效率大大提高。
画风大概是这样子:
图床搭建教程
有空补。
一些提高博客维护效率的技巧
有空补。
参考资料
后记
博客到这里就基本搭建完成了。之前搭建博客的时候经常去折腾美化,我想说的是,美化是个无底洞,好好专注于内容输出和内容质量才是最重要的。