静态博客入门

第一次参加公司的线上直播活动，分享了一下如何搭建自己的静态博客，很基础。本文将其记录下来，将 ppt 的内容整理成 markdown 。

折腾多年，心路历程

说到博客，我不一定有在座的各位接触时间长，所以也谈不上精通，这次分享的初衷是让没接触过的同学了解这个事物，与博客老玩家们分享一些心路历程。我正式关注到博客（准确的说是技术类博客）可以追溯到 2013 年，当时 iOS 越狱挺火的，我那时候对刷机感兴趣，就到处翻教程，跟着各种教程一通折腾。

接着自然而然关注到了 Jay Freeman ，他是 Cydia 的作者，Cydia 相当于是一个越狱后的软件市场，大家在给 iOS 设备越狱后可以通过 Cydia 订阅各种软件源，给系统安装各种有趣的插件。当时为了在 iOS 设备上搭建一个 Java 开发环境，就翻到了 Freeman 的博客，黑客简洁风带点艺术感。顿时感觉在网络上有个自己的小地盘是一件很酷的事情。从此开始我的博客折腾之路，一开始接触的是 WordPress ，这算是当时很流行的博客管理系统了。我仗着学生优惠，从阿里云租了一台便宜的云主机，注册了一个带点中二气息的域名，上线了我的第一个博客。从看书了解 Linux 基本操作，配置 DNS 解析，翻官方文档下载安装配置，找教程配置插件、魔改插件，一通操作，把博客给搭建起来，有些炫酷，成就感都溢出来了。诶，话题扯远了，回到正题。

为什么开发者需要写博客

我把自己写博客的目的总结成三点：

整理学习成果或这踩坑记录，作为开发者要不断的学习，跟紧行业动态，总结记录一些能加深自己对新技术的理解；踩过的坑，留个记录，就像错题本一样，同一个错误不要犯两次。
更好的介绍自己或者自己的产品，如果你拥有丰富的开发经验，踩过大量的坑造过许多牛逼的轮子，开发历程、使用说明等等都记录在博客里，这有助于推广你的产品，同时记录你成就的博客也可以成为你在网络上的一张名片。
一种生活方式，就像有人喜欢在豆瓣写日记，在朋友圈晒自拍，博客也不仅仅只有技术干货，也可以加入你的生活点滴，做个有趣有温度的开发者。

聊聊静态博客

静态博客本质上就是一类静态网站，静态网站由静态页面组成。

静态页面: 也称平面页面或者固定页面，是一种完全按照存储的方式传送到用户的浏览器的网页；
动态页面: 动态页面是由 Web 应用程序生成的页面；

静态网站为所有用户展示相同的内容，而动态网站根据请求参数、请求方式等，为用户呈现不同的内容。

静态网站的优势

更加安全: 静态网站不依赖于后端应用程序，相比动态网站能提供更高的安全性；
更高性能: 静态网站的内容都是固定文件内容不需要经过计算产生因此拥有更高的性能；
部署简便: 静态网站也少有或者没有对数据库以及其他应用服务的依赖，即部署简便；
费用更少: 静态网站不需要云主机，只需要云存储，因此搭建开销很低；

但是静态网站的劣势也很明显，即所有的动态功能都得由客户端执行。而考虑下博客的使用场景，博主完成文章后，仅需要将其渲染成为网页呈现给读者。并不涉及频繁的变更，静态网站完全可以满足作为博客的需求。现在越来越多的开发者都选择使用静态博客。

从博主完成文本，到变成网页呈现给读者，博主不一定懂得网页开发，也不一定能设计出具有美感的网页。大家都知道包含文字、链接和图片的富文本远比纯文本表现能力更强。因此任何一个博主都更愿意用富文本来表达自己的想法。

难道当一个博主的门坎很高吗？

Markdown

Markdown 在维基百科上的介绍：https://zh.wikipedia.org/wiki/Markdown

轻量级标记语言（lightweight markup language）
允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML （或 HTML）文档。

好用的编辑器推荐

我个人正在用的是 vscode ，因为其插件丰富且跨平台，在 Markdown 编辑上还支持实时预览，对我来说完全够用。

使用 Markdown 我们就能用纯文本格式表达富文本内容，接下来的事情就好办了，只需要按照约定规则将 Markdown 文档“翻译”成静态网页就行了，目前生成静态博客的工具也有许多，像 Hexo， Jekyll 和 Hugo 。

下面介绍我正在实用的 Hugo 。

Hugo

Hugo 官网的介绍：https://gohugo.io/about/what-is-hugo/

Hugo 是 Go 语言编写的高性能的静态网站生成器。
适用群体:
- 极简主义，只需要文本编辑器即可进行写作的人。
- 希望自己编写自己的网站而不必担心设置复杂的运行时，依赖项和数据库的人。

从 0 开始搭建一个静态博客

官方文档十分得详细，提供了多种安装方式，而我总结了一份足够简洁的教程，可以快速完成体验。

好，我来实机演示一下：

安装 Go

# 下载二进制包
wget https://golang.google.cn/dl/go1.15.2.linux-amd64.tar.gz

# 解压到系统目录
sudo tar -C /usr/local -xzf go1.15.2.linux-amd64.tar.gz

# 配置环境变量
cat <<EOF >> ~/.profile
export GOPATH=\$HOME/go
export PATH=\$PATH:/usr/local/go/bin:\$HOME/go/bin
EOF

# 使改动立即生效
source ~/.profile

# 检查是否安装成功
go env

可以参考官方教程 https://golang.google.cn/doc/install

安装 Hugo

使用 go get 方式安装

# 配置 go proxy 加快下载速度
export GOPROXY=https://goproxy.cn,direct

# 启用 go mod 模式
export GO111MODULE=on

# 拉取目前最新稳定版本
go get github.com/gohugoio/hugo@latest

# 检查 hugo 安装是否成功
hugo version

依然可以参考官方教程 https://gohugo.io/getting-started/installing

配置 Gitlab CI，发布到 Gitlab Pages

创建一个 Gitlab 账号，略。

blog 目录下添加一个 .gitlab-ci.yml 文件

参考 https://gitlab.com/pages/hugo/-/blob/master/.gitlab-ci.yml

修改配置文件中 vim config.yml

baseURL = “https://carban14.gitlab.io”

假设我用户名是 carban14

新建一个项目 carban14.gitlab.io

设置中打开 Settings - General - Visibility, project features, permission - Pages - Everyone

访问 https://carban14.gitlab.io/ 即可看到页面

别忘了，需要发布的文章顶部将 draft 置为 true 。

(可选）云主机部署

Nginx 配置

sudo apt install nginx -y

cat <<EOF >> /etc/nginx/sites-enabled/default
server {
        listen 80;
        listen [::]:80;

        server_name blog.carban14.xyz;

        root /home/shank/demo/_pub;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }
}
EOF

Github Action (可选)

deploy.yml

name: Deploy

on:
  push:
    branches: [ master ]

jobs:
  hugo:
    name: Hugo
    runs-on: ubuntu-latest
    steps:
    - name: Compile content on the server
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        script_stop: true
        script: |
          cd blog.carban14.xyz
          git pull
          hugo --destination=./public

自己动手编写一个静态页面生成器

如果说你不满足于现有的静态博客生成器，或者你希望进一步锻炼自己的动手能力，那么也可以考虑自己设计一个静态页面生成器，这样能实现更高程度的定制化需求。下面的内容，我尽力避免有关编程语言的细节。

我设计一个简单的静态博客生成工具，实现两个最基本的功能：输入 Markdown 文件产生静态网页；首页按时间倒序排列文章标题和链接。

摸清原理

静态页面的生成，通常包括以下几个步骤：

读取源文件（约定为 Markdown 格式）
资源预处理
模版引擎渲染
生成目标文件

设计静态页面生成器

确定需求:

输入 markdown 文件产生静态网页；
首页按时间倒序排列每篇文章标题和链接；

模块设计:

CLI 命令行界面；
DataSource 数据源：支持文件目录读取；
Generators 生成器：生成首页列表和文章页面；

详细设计:

演示代码放在了 Gitlab 上: https://gitlab.com/carban14/blog-generator

我借助一个第三方库实现 Markdown 转 HTML ： github.com/russross/blackfriday

写在最后

最后有人可能要问，折腾这些有没有用？

先说结论，我觉得这是有用的，自己亲自搭建博客能带来成就感，想到自己的博客可以被全世界访问，对自己发布的内容会严谨些，为了将一个概念表达准确，要去翻阅资料，这个过程就是在提升自己，总的来说它对你来说是有益处的。

是否需要重复造轮子呢？在工作中是不推荐重复造轮子的，那是为了保证工作完成质量和效率。而自己的小项目，造一些轮子能促使自己将问题考虑全面，进而提升自己的编码能力。

另一方面写博客嘛，重点就放在产出的内容上，如果只是把网站整得花里胡哨的而没有有价值的信息，等到最后自己的热情退去了，网站也就荒芜了。

所以，第一次折腾可以尽可能把需要的功能都配置好，自己看了心里舒服，进而有往上面添砖加瓦的动力。以后专注于产出内容，写得越多，质量也会慢慢提高，看的人越多，就会有人评论，有人互动，继而又能促使你提升，你的内容会更好，这是个积极的循环。

感谢大家的观看，本次分享就到这里。

静态博客入门

2021/09/17