Hugo+Cloudbase搭建个人博客

1. Hugo

Hugo是由Go语言实现的高性能静态网站生成器。简单、易用、高效、易扩展、快速部署。

1.1 安装Hugo

1

brew install hugo

1.2 创建网站

1

hugo new site mywebsite

1.3 安装&配置主题

LoveIt 这个主题很不错，将其下载到网站themes文件夹下

1

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

关于该主题的配置可参考主题作者的博客

1.4 创建新文章

1

hugo new posts/first_post.md

默认情况下, 所有文章和页面均作为草稿创建. 如果想要渲染这些页面, 需要删除属性 draft: true, 或者设置属性 draft: false

1.4 本地部署

1
2
3
4
5

hugo server

# 实时预览修改
hugo serve --disableFastRender

1.5 HTML渲染

在项目根目录下直接使用 hugo 命令，会生成 public 目录,这个目录就是我们编译生成的静态页面

2.腾讯云静态网站托管

2.1 为什么是用腾讯云静态网站托管

生成的html静态网页总是需要部署的，以前的Hexo生成的页面我是方gitpage上，但是gitpage访问速度较慢，后面打算用google的firebase部署，但是搞定了终端代理的问题之后，上传不了，在解决问题的过程中看到了有贴子说可以用腾讯云静态网页托管服务，最后转而用腾讯云静态网页托管服务，享受腾讯云CDN,网站访问速度确实快。

2.2 什么是Tencent CloudBase，TCB,CloudBase CLI

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务。和FireBabse差不多,详情看文档。

3. CI/CD自动化部署

每次写完文章都要来一串命令，将页面上传到CloudBase，很费事，也容易出错，每次还要去复制环境ID。所以我们可以集成 CI/CD 来进行部署。这里我选择了 Gitlab 自带的 CI/CD 功能。方便快捷。

3.1 什么是CI/CD

CICD 是 持续集成（Continuous Integration）和持续部署（Continuous Deployment）简称。指在开发过程中自动执行一系列脚本来减低开发引入 bug 的概率，在新代码从开发到部署的过程中，尽量减少人工的介入。这里的应用场景是，git提交后，gitlab上定义好的脚本，自动将我们的项目部署到CloudBase上，不要我们每次都手动上传。

3.2 Cloudbase+gitlab CI/CD自动化部署

详情可参考打通GitLab CI/CD到腾讯云的静态网站托管，这里只贴我的部署脚本如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

image: node:12.16.2
stages:
  - deploy

deploy:
  stage: deploy
  script:
    - npm i -g @cloudbase/cli
    - tcb login --apiKeyId $SecretId --apiKey $SecretKey
    - tcb hosting:deploy public -e $EnvId
  only:
    - master