前言

为什么要写作

1. 职场积累的输入输出，不记录下来则会忘记。

2. 个人的成果需要有更多的展示平台，IT 是手艺活，需要有自己的作品。

3. 写作是很好的学习方式，通过写作倒逼自己学习，而不是一味看各类文章，看只是一部分，如果要深入理解知识，必须自己写出来。

为什么要搭建个人博客

1. 我也有微信公众号、小红书等平台，这类的公共平台有流量和关注，可以好好维护。

2. 随着网络的发展，监管随之而来，个人网站更自由，是更好的文章归类的地方，并且自己维护更加放心，不想自己的心血有朝一日 404

搭建个人博客的流程

厘清步骤

1. 购买云服务器（时间久一些，最低配置）

2. 购买域名（云服务器厂商是同一个云服务厂商）

3. 备案（2 个）：ICP 域名备案、公安的备案

4. 云服务器做好登录配置，安装配置 nginx、https

5. 选择博客的静态网站生成器，选择主题，制作第一个博客，更新到服务器。

接下来，就是每一个步骤的细致拆解，对于一个开发工程师来说，其实是很简单的，但简单不意味着可以立马手到擒来，我工作了 5 年+了，现在才明白：简单的事情细致的做，做好、做对，坚持做正确的事情，就很棒了。

购买云服务器

云服务网站操作使用

• 阿里云、腾讯云的 web 网站大而全，模块、功能很多，不过提示、说明、购买操作等都很方便，在首页中间的搜索直达很方便，我们使用的一般就几个：云服务器、域名、备案，输入这些关键词就可以命中对应的功能模块，多花点时间浏览页面，时间久了就熟悉了。

• 后续的说明不会一步一步截图说明步骤流程，我自己在找教程做网站的时候，那种一步一步的教程看似有用，但网站会更新，很多操作就没用了，实际上是要弄清楚做这些事情的来龙去脉。

云服务器和轻量应用服务器的区别

• 云服务器适合架构复杂的应用场景，如高并发网站、大型游戏、复杂分布式集群应用、视频编解码、大数据分析、机器学习、深度学习等；

• 轻量应用服务器更适合简单一些的单机应用，例如企业网站、博客、商品展示类网站、微信小程序、通用 Web 应用场景、移动端 APP、小程序、云盘、图床、云端开发测试环境及学习环境等。

以上，我选择的是云服务器，可以 DIY，至于配置，越便宜越好。

可选择的云服务器厂商很多，比如：阿里云、腾讯云、华为云、移动云、联通云、金山云，我觉得选择大牌、便宜的即可，我挑选了便宜的腾讯云，我们做的是长远的事情，要看 10 年的，所以大公司的更保险一些。

配置和价格如下

价格说明

• 所需要购买的是：CPU 内存、带宽、磁盘，这 3 样都需要，价格单独计算，不过合并打包一起后，购买更便宜，我们做长久打算的话，这种付费都是预付费，如果预知未来这些是涨价的情况下，则趁着活动价直接买断 5 年、10 年的价格，这样性价比更高。

• 各类活动：双十一、六一八的时候，阿里云、腾讯云有做活动，新老顾客都有，但最优惠的是新人活动，我的 2018 年已经用掉了好几个云厂商的新人优惠，所以这次购买的贵了一些。

配置合计

• 操作系统：阿里云或者腾讯云维护的 Linux 系统（TencentOS），可更新，有维护，免费

• CPU 和内存：2 核、2GB，也是最便宜的，收费

• 带宽：1Mbps，有公网 IP 可访问，收费

• 系统盘：高性能云硬盘网络，这里有不同价位的，估计是材质不同吧，我选择了最便宜的，收费

• 总计价格：购买的时候 1314 元 5 年，772.2 元 3 年，1314 平均后是 21.9 元/月，772.2 平均后是 21.45 元/月，我觉得对于一个简单的个人博客网站而言，22 元/月是能接受的。

购买域名

• 域名最多买 10 年，前几年不需要续费，最后一年估计会提醒续费。

• 顶级域名是后缀，比如 com cn vip top 等等，价格不一样。

• 我买的是 10 年的，xiaoqiuqiu.cn，价格也比较透明，330+，也是中等价格。

• 20 年前很多公司开始炒作、囤积域名，所以很多短小、顾名思义的域名都在这些公司手上，不过现在域名不再重要，我们挑选合适的即可。

• 很多年前，阿里云收购了万网，腾讯收购 DNSPOD，都开始做域名生意。

为什么域名购买和服务器购买需要在同一个平台

域名备案的操作需要有一个依托的服务器，假如：域名在阿里云，云服务器在腾讯云，则数据无法打通。域名和服务器都在阿里云或者都在腾讯云的话，两者一绑定，数据一关联，页面操作会简单很多。

ICP 备案（管局审核）

• ICP 是 Internet Content Provider 的简称，做网站相当于是网络服务提供商，这个是工信部在管理，备案信息网站是：https://beian.miit.gov.cn
  

• 域名和云服务器都在在腾讯云，则备案很方便，备案主体可以是个人、公司，都要填写真实信息，首先腾讯云审核一遍，再提交到工信部审核，个体（个人、公司）无法直接去工信部审核，需要有对应有资质的公司作为中介才行，所以绑定某个云服务厂商最方便。

• 备案的个人信息很全，所以网站不能有不良信息，否则很危险，所以国内的危险网站都是在东南亚，那里的网络监管猜测就是很宽松。

• 不需要购买备案服务，这都要钱，根据操作手册一步一步填写提交，难度很低。整套流程在 5-8 个工作日，最后审批的 ICP 备案号和省份绑定，比如腾讯公司官网下面的备案号是：ICP 备案/许可证号：粤 B2-20090059，我的备案号在 > https://xiaoqiuqiu.cn 可看到。

公安备案（完成 ICP 备案后操作）

• 全称是：全国公安机关互联网站安全管理服务平台，网址是：https://beian.mps.gov.cn，这个是公安部的备案
  

• ICP 网站备案成功后，网站开通之日起 30 日内可以去公安部完成备案

• 和 ICP 备案一样，也是填写一大堆的真实信息，提交审核，等待 1-3 个工作日。

配置服务器

配置 https

https 是可配也可不配，但我认为现在正经网站都要用到 https 了，而且也很简单，所以就配置了，否则浏览器都会说这网站不安全。

1. 在腾讯云中可以申领免费的 1 年的 https 证书，如果是多年的而且证书更全的那种就要收费了，而且收费很贵，我们博客只需要 1 年 1 年自己手动维护即可。

2. 搜索框中搜索「SSL 证书」，有按钮「申请免费证书」，根据操作实名填写信息，等待审核，几分钟就审核通过，再把证书文件下载到本地。

3. 看描述是腾讯云最多只有 50 份免费证书，但七牛、阿里云等其他各式各样的厂商都可以申请证书，数量不用担心。

4. SSL 证书和域名绑定，这样域名就可以通过浏览器的安全校验了。

服务器配置注意事项

其实，云服务下来后，就可以直接使用了，备案的 2 个步骤可以同步进行，因为使用公网 IP 登录服务器是没有什么限制的，就我使用的几天来看，有几点需要配置和注意（具体的配置步骤，就不写了，可以自行搜索查询）。

1. 开通常用的端口，在「服务器列表-安全组」里面，可以使用推荐的规则，入站、出站都开着，ICMP、SSH 等，端口有：80、22、3389，就是说 ssh http https 都要开启，否则网页无法访问。

2. 增加自定义 ssh 登录用户，比如名字是 abc，关闭 root 的 ssh 登录，因为我们没有购买安全监控，很多国外 IP 会扫描各类云服务器 IP，使用 root 碰撞尝试登录后台。

3. 使用 yum 安装 nginx，因为大部分博客是静态 html 页面，需要 nginx 来做反向代理，指向基础的 index.html 页面。

nginx.conf 的配置

以下是需要注意的点，具体的操作也是单独各自百度查询处理，配置这些就是为了：用 443 端口访问服务器，通过 nginx 得到实际的 index.html 文件，再在浏览器中渲染 dom 展示出来。

1. 80 端口重定向到 443 端口，这样就强制使用 https，而不是 http 了，浏览器网址栏就有个安全的小锁。

2. 上传 https 的安全证书（pem key 后缀）到某个自定义路径，nginx.conf 配置中 ssl_certificate 的值就放 pem 文件的绝对路径，ssl_certificate_key 就放 key 证书的绝对路径。

3. 自定义错误页，出错了可以有好看的错误页

4. server_name 绑定域名，root 存放静态博客的绝对路径

5. 关闭浏览器缓存 no-store, no-cache 等等

使用博客网站生成器生成网站

博客形态的静态站点生成器有：Jekyll、Hugo、Hexo，这些都是国外的网站，网站中有各个用户制作的主题，原理大多类似，原理：有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 或者 Liquid 转化成一个完整的可发布的静态网站，可以上传到服务器中。

在这样的博客站点中，需要有对应的代码环境执行命令，在自己的电脑（Windows or macOS 系统）生存 html css js 文件，然后再上传到服务器中，服务器就不需要对应的 Node.js or python 环境了。

一开始我选用的是 docsify 来生成网址，这是 Vue.js 开发的的小清新绿色背景网站，缺点是扩展性不强，左侧树无法自定义多种左侧树，而且没有标签云，所以放弃。

最后选用的是 hugo，主题是: Next，安装环境，下载主题，然后修改为自己的配置、logo 等等，本地的配置就改好了。PS: 如果 github 不好上，可以考虑 gitee

hugo 安装步骤

1. 安装好准备 Git Node.js 的本地环境

2. 在 hugo 官网安装 hugo，这有 2 种，一种是 hugo，另一种是 hugo extended，extended 是 hugo 的复杂版本，功能更多，直接装 extended，就要去 github 的 releases 找安装包，我的是 macOS，安装文件是：hugo_extended_0.118.2_darwin-universal.tar.gz，附上网址：https://github.com/gohugoio/hugo/releases，选择合适的版本和操作系统，下载即可。
   

3. 在 hugo 官网下载主题（theme），放到 hugo 的目录中，相当于 hugo extended + next theme 就起效果了，所谓的主题就是已经做好的 css 样式的合集。

参考的文档

https://lisenhui.cn/blog/upgrade-blog-use-new-theme.htmlhttps://themes.gohugo.io/themes/hugo-theme-next/https://gohugo.io/getting-started/quick-start/https://gitee.com/hugo-next/hugo-next-docshttps://github.com/gohugoio/hugo/releases

一些具体的配置

• 我们需要把 config.toml 和 content 文件夹复制到我们的新建的站点目录下

• config.toml 是配置文件，在里面可以定义博客地址，构建配置，标题，导航栏等等。

• themes 是主题目录，可以下载喜欢的主题，然后配置在 config.toml 里面。

• content 是博客文章的目录。

• static 是博客的静态资源，比如图片

• public 是编译后的目标文件的目录。

• 注：当前目录是你的源文件，也就是包括一堆模版，博客源文件（markdown），配置文件，图片的一个源文件的集合。 最终展示在网页的是目标文件，也就根据你的资源和配置，最终生成的一个个包括 css，js 的 html 网页。

• 在终端中执行：hugo server --buildDrafts，以上为默认启动，--buildDrafts 用于是否显示草稿文章，其他的 hugo 命令，可以 hugo --help 看下，或者直接看文档。

静态博客和动态博客的区别

• 静态网站：网站的 html 结构和链接的文章都已经固定了，自己电脑做好结构和目录，然后使用 xftp 等软件远程上传到服务器。

• 动态网站：有交互，有登录、评论、收藏、用户系统、管理系统等，需要维护：管理端前端代码、用户端前端代码、服务器后端代码、MySQL、Redis，如果有全文检索则还有 ES 等等，如果仅有一台服务器，则安装这些环境就不太够用了。

• 静态网站简单，是输出展示型的；动态网站复杂，可以搜集：用户数据、流量数据等，当然是动态网站好，但是机器不够用啊。如果未来感觉到网站越来越好，那从静态网站迁移到动态网站就可以了。