如何简单快速地搭建一个静态博客

博客的作用:

1. 浪费时间

2. 装逼

3. 感动自己

为了充分发挥博客的第 2 点作用, 我研究了如何快速的把自己的笔记内容, 轻松地转化为博客. 说实话, 本来以为不难, 结果属实有点费劲嗷. 弄了整整一天, 才算是有点结果. 所以也证明了, 没事不要做感动自己的事.😇

用到的软件和技术

1. Typora: Markdown 编辑器, md 格式文本是快速搭建博客的基础, 请习惯 md 记笔记的方式.
2. Hugo: 渲染器, 能够把 md 格式的文本渲染成目标主题的 html 静态页面.
3. git 和 GitHub: 把渲染好的页面上传到 GitHub 仓库.
4. Netlify: 部署工具, 把 git 仓库部署在 Netlify 注册的账号中.
5. PicGo: 上传图片到图床的开源工具, 配合 Typora 使用.

流程和细节

我用的是 mac , 所以流程基于 macOS. 不过 Windows 和 Linux 也大差不差.😉

1. 首先需要安装 Homebrew , 然后在终端任意目录输入 brew install hugo
   • 安装完成后在任意目录打开终端输入 hugo version 测试是否成功安装.
2. 在终端任意目录输入 hugo new site quickstart.
   • 此时会在当前目录下生成一个 quickstart 文件夹.
   • 该文件夹下包含了静态网站的所有文件
3. 需要安装 git , 安装完成后在刚才的目录下输入如下代码来设置网站的主题

# 切换到 quickstart 目录
cd quickstart
# 在 quickstart 目录内初始化 git
git init
# 创建一个 git 子模块(具体为啥是子模块, 还没研究明白), 并保存在 themes 文件夹内
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# 更改 quickstart 目录下 config.toml 的内容
echo theme = \"ananke\" >> config.toml

4. 将已经写好的 .md 文件, 放入 quickstart/content/post 目录下, 并且在终端当前目录输入 hugo.
   • 此时, .md 文件就已经被 hugo 渲染成了带有目标主题的静态 html 页面.
   • 渲染好的页面会存在固定文件夹内, 此项目是在 public 下.
5. 开启 hugo 服务, 来预览刚刚渲染好的页面, 在终端 quickstart 目录下输入 hugo server -D.
   • 在浏览器输入地址 http://localhost:1313/ 查看自己的博客.
6. 用任意文本编辑器打开 quickstart 目录下的 config.toml 文件.
   • 后期按需求进行更改

## 自己购买的域名前缀
baseURL = "https://example.org/"
languageCode = "en-us"
## 博客的名称
title = "My New Hugo Site"
## 上面刚刚更改过的主题
theme = "ananke"

小结

此时, 渲染功能已经设置好了. 每次只需要将写好的 .md 文件复制一份到 post 文件夹下, 再在终端运行 hugo 就可以了. 但是, 渲染好的博客只能在本地浏览. 如果想要公开博客, 就需要完成博客的部署.😋

7. 将博客托管到 GitHub , 确保自己有GitHub 账号, 并且在当前电脑创建过 ssh-key.

   • 首先在 GitHub 中创建仓库 hugo-quickstart .
   • 然后在本地的 quickstart 中打开终端, 输入一套:

   # 1. 初始化 git 仓库
   git init
   # 2. 添加所有文件到 git 仓库 stage
   git add .
   # 3. commit 所有文件变化
   git commit - m"Initialize the blog."
   # 4. 添加刚才在 GitHub 中创建的远程仓库
   git remote add origin git@github.com:xxxxxx/hugo-quickstart.git
   # 5. 把本地的 master 分支推送到远程并 通过 -u 参数与远程的 master 分支关联
   git push -u origin master
   

   • 之后每次添加或更改内容, 实际上就是重复上面的步骤 4 , 然后再重复步骤 7 的命令的 2, 3, 5. 这样就能实时的把渲染好的页面都同步到远程的 GitHub 仓库中.
   • 因为之后存在这种重复的步骤, 我们可以写一个简单的脚本程序 deploy.sh 来避免重复性的工作.😉

   #!/bin/bash
   
   echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
   
   # 渲染页面
   hugo
   # stage 所有文件变化
   git add .
   # 日期变量
   msg="rebuilding site `date`"
   
   if [ $# -eq 1 ]
   
     then msg="$1"
   
   fi
   # commit 文件变化, 并输出日期
   git commit -m "$msg"
   # 推送到远程仓库
   git push origin master
   

   • 在 quickstart 目录下打开终端, 并且输入 ./deploy.sh 即可运行上面的脚本程序.

• 注意😅: macOS 首次使用脚本程序, 可能遇到权限不够的情况, 需要怎加权限. 在 quickstart 目录打开终端, 输入 chmod a+x ./文件名.

8. 申请 Netlify 免费空间, 到官网可以直接使用 GitHub 账号绑定注册. 然后, 需要创建一个新站点并绑定在 GitHub 中的 hugo-quickstart 仓库.
   • 所有选项都跟随默认.
   • Netlify 会随时监控 GitHub 中 hugo-quickstart 的变化, 并实时部署和更新博客.
   • Netlify 可以给博客设置域名和 https 加密证书, 这些额外的功能这里不再赘述.
9. 访问 Netlify 给的网站地址, 就可以进入到自己博客了.

大功告成🍺

至此, 一个简单的博客就搭建好了. 以上所有步骤实际上是设置了一套自动化程序. 现在我们需要做的, 已经缩减到了必不可少的三步:

1. 通过例如 Typora 的 Markdown 编辑器撰写笔记或者博客内容, 并存储为 .md 后缀的文件.
2. 把写好的 .md 文件复制到 quickstart/content/post 文件夹内.
3. 回到 quickstart 目录下, 打开终段并输入 ./deploy.sh 来运行脚本程序.

往复循环以上三步, 就做到更新我们的博客.

27/11/2021