使用Hugo框架搭建博客的过程 - 前期准备

前言

这篇教程介绍了如何搭建这样效果的博客。

所需步骤

可以从这样的角度出发：

1. 注册域名。
2. 使用CDN加快网站访问速度。
3. 网站内容需要部署在服务器或对象存储平台上。
4. 重要的是放什么内容。博客需要选择框架，或自己开发。
5. 框架确定后，选择主题，或自己开发。
6. 配置主题。
7. 发表第一篇Hello World！

在这个过程中，前期准备阶段包括：框架选择、主题选择、注册域名、备案和CDN配置。

博客框架

框架选择

1. Wordpress
   
   缺点：不安全。
   
   主题推荐：Sakura
2. Hexo
   
   缺点：渲染生成文章速度不如Hugo。
   
   主题推荐：matery
3. Hugo
   
   The world’s fastest framework for building websites.

结论

1. 选择Hugo框架。
2. 静态博客方便备份。
3. 用Markdown写文章，方便以后迁移。
4. 缺点，使用对象存储服务需要支付流量费，存在被DDOS的风险。

下载

1. Hugo和Hugo extend区别
   
   Hugo extend支持Sass/SCSS。下载地址
2. Windows可考虑使用scoop下载, 安装与升级很方便。

Hugo主题

LoveIt

功能很全面的一个主题，支持很多功能，节省了不少自己折腾的时间。LoveIt主题介绍

安装主题有两种方案，如果不修改主题配置和模板，可以直接添加添加子模块，这样比较简单。

修改主题会麻烦一些，但是可以让自己的博客与众不同。需要将Fork到自己的仓库，有一个缺点，fork后添加的submodule是自己的仓库，使用Dependabot需要手动和上游同步之后，才会触发blog仓库更新检查。所以不适用Dependabot。

1. 不修改主题模板
   
   添加子模块到blog仓库的themes目录下。
   
   git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

   可设置Dependabot自动合并主题更新，参考：About Dependabot version updates和Automate Theme Update。

2. Fork主题后进行DIY

   1. fork主题到自己的仓库。
   2. 添加子模块：
      
      git submodule add <自己仓库的url> <path>
   3. 设置上游进行同步，在主题目录中执行
      
      git remote add upstream <上游主题的url>

toha

toha是一个非常适合做个人简历的主题。

注册域名

万网注册域名。

配置DNS解析，域名邮箱解析等可能存在冲突。

参考DNS解析冲突规则

HTTPS证书

使用HTTPS证书避免HTTP劫持风险，劫持https请求需要伪造证书。

阿里云可申请免费HTTPS证书，但是一个子域名需要单独申请一个证书。

Chrome浏览器HTTP网站显示“不安全”，是怎么回事?

谷歌从Chrome 56版本浏览器开始对使用HTTP协议传输密码信息的网站进行“不安全”警告；而2018年7月，谷歌Chrome 68将对所有HTTP网站显示“不安全”警告。随着Chrome浏览器的版本升级，会有越来越多的用户看到HTTP网站的“不安全”警告。来源：https://www.sohu.com/a/242732942_188485

备案

• IPC备案
• 公安备案

如果在万网购买的域名，备案过程很简单，按要求填写信息，上传照片即可。注意照片要合要求，否则可能会被打回来重新上传。

香港，国外的服务器不需要备案。

CDN

购买CDN资源包，加速域名访问。静态博客不需要购买动态请求次数。

以上步骤完成后，将域名解析到CDN，CDN加速源站或对象存储服务（在部署阶段介绍）。访问域名，确定CDN是否加速。

1. 通过ping命令查看IP是否为CDN的IP。
2. 打开Chrome控制台，查看返回包头是否有X-Cache字段。

参考

• LoveIt主题文档
• 阿里云帮助文档
• Windows软件包管理工具：Scoop