目录

使用Hugo搭建自己的静态笔记网站

写在前面

为什么选择hugo

我选择hugo平台搭建博客的初衷,是想创建一个简洁速度快阅读体验好(主要是电脑端)方便检索的个人笔记分享的网站。并且考虑到成本问题,我并不想使用云服务器,静态博客发布内容之类的也很简单,我也懒得去折腾各种美化,专注于阅读就行,虽然在阅读体验上目前还有不少可以优化的地方,但这些都留给主题作者吧,我的目的是专注于写作和记录。

Hugo是一个用Go编写的静态站点生成器,它具有丰富的主题资源和较好的生成速度。 云开发(CloudBase)是一款云端一体化的产品方案 ,采用 serverless 架构,免环境搭建等运维事务 ,支持一云多端,助力快速构建小程序、Web应用、移动应用。

有没有更省事儿的选择

如果单纯只想自己用Markdown写笔记,直接用现成的软件肯定是体验最流畅的,但是在分享方面可能体验比博客稍微差一些,和博客比起来的优势就是省事儿。
如果你只是想单纯做笔记方便自己回顾,并且不是太想折腾一个自己的博客,那么我建议直接使用现成的笔记软件或平台,并且最好是所见即所得的。这里根据自己的使用体验推荐几个平台(排名不分先后):

Typora
MarkText
Vnote
注意:前两个都完全支持所见即所得模式,但Vnote并不是完全支持,具体请去官网查看介绍。
推荐一个Markdown入门教程

搭建步骤

准备工作
  1. 注册一个腾讯云账号完成实名认证。
  2. 腾讯云开发静态托管服务自带域名,但如果需要自定义域名,可以在腾讯云购买一个你喜欢的域名。
    注意,域名用于建站的话是需要备案的,且备案完成了才能被访问。

在本地部署hugo写作环境

首先,我们先安装hugo:
点击这里下载对应你系统的hugo版本,个人建议下载extend版本,比如我是Win10系统,那么就下载下图中圈起来的版本:
https://gitee.com/cindycyber/blog-pic/raw/master/img/20210324211559.png

然后,我们用hugo命令创建一个blog项目(注意设计命令行的操作最后都在管理员模式下运行):

hugo new site myBlog && cd myBlog

然后我们先创建一个测试的文章:

hugo new posts/my-first-post.md

最后,直接在目录中运行:

hugo server

在浏览器打开http://localhost:1313/即可查看效果。
此时的主题样式为默认主题,如果不喜欢的话,可以自行在github上找到开源的hugo主题,并应用到你的博客中。也可以在hugo官方的主题站点找自己喜欢的。
接下来以我的博客主题为例,演示一下如何应用自定义主题:(有空补)

创建云开发按量计费环境

静态托管部署 我们进入腾讯云的云开发(cloudbase)控制台,选择开通一个云环境:

https://postimg.aliavv.com/picgo/20200427110420.png
这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。创建完成后,点击进入我们刚刚创建的云环境,进入云环境管理界面:

https://postimg.aliavv.com/picgo/20200427110426.png
在云环境管理界面,在右侧的网站托管中,我们可以将刚刚项目中生成好的静态页面给上传上去。当然,手动上传显得不太友好,我们也可以借助 cloudbase cli 以命令行的方式执行上传。

本地配置云开发环境 接下来的步骤请在CMD管理员模式中进行,否则可能会失败。下图中的终端我使用的是Windows Terminal,使用哪个看个人喜好,但一定要以管理员模式启动
首先,安装cloudbase cli:

npm install -g @cloudbase/cli

执行登录命令:

tcb login

在弹出的页面确认授权:
https://postimg.aliavv.com/picgo/20200427110511.png
接着,在hugo-site中将public目录中的文件给部署上去:

cloudbase hosting deploy ./public  -e EnvID

这里的EnvID替换为刚创建好的环境ID。 https://gitee.com/cindycyber/blog-pic/raw/master/img/20210324165251.png
腾讯云云开发的静态网站托管有默认域名可供访问,位置如下图所示: https://postimg.aliavv.com/picgo/20200427110535.png

通过默认域名,我们就能访问博客咯。

自定义访问域名 当然也可以绑定自己的自定义域名,步骤如下:
打开 CloudBase 控制台,在 HTTP 访问服务中,点击「添加域名」,添加自定义域名以及配置 HTTPS 证书。
https://main.qcloudimg.com/raw/88ab1324d6798f3faab223e51928a271.png

注意
自定义域名需要备案,提前完成域名的 ICP 备案,如果是在腾讯云 购买,可以在这里备案。
然后把域名的 CName 配置为 CloudBase 控制台上提供的域名。 例如,域名为 foo.com,可以将域名的 CName 记录设置为 foo.com.cdn.dnsv1.com(这是腾讯云开发控制台上提供的,设置后过会儿才生效)。

其他注意事项及提示

Markdown写作工具
我使用的是vscode,用Markdown写了不少文章了,并不太需要在写作时一直预览,所以我只看代码就行,需要预览的话,vscode也有插件支持。然后由于写作的Markdown是直接发布到博客上,博客里面有一些内置的短代码,配合vscode设置代码片段会使得写作效率大大提高。
画风大概是这样子:
https://gitee.com/cindycyber/blog-pic/raw/master/img/20210324211217.png
图床搭建教程 有空补。
一些提高博客维护效率的技巧 有空补。

参考资料

腾讯云大学
云开发文档HTTP访问服务
LoveIt文档

后记

博客到这里就基本搭建完成了。之前搭建博客的时候经常去折腾美化,我想说的是,美化是个无底洞,好好专注于内容输出和内容质量才是最重要的。