blog搭建和启用

记录建此博客的过程。包括前后端技术及决策的点。
完全从0开始。

方案比较和选择

需求：简单的，最好不花钱的。数据库等目前不需要。

自我扫盲：博客构成

写文章，现在通常用markdown，xxx.md。
→ 需要有东西将.md文件编译成html/css静态文件，可以被浏览器识别的文件。
这一步就是为什么要找博客搭建平台，hugo、wordpress等平台基础功能,以及静态平台主要功能就是这个。

→ 生成的html/css静态文件需要有网站间运行。hugo hexo这类静态平台不包，要自己解决，可以自己搭后台也可以托管给专门的服务器。有的大型的平台包这部分，包括提供数据库等。

自创抽象博客架构：
【 [前端] +（后端）+ [网站空间] +（其他：域名，（图床，加速器等））】
【】便是一个博客。[]内为必要内容，（）内为可要可不要内容，越（）越不重要。我大概理解。

• 前端｜Frontend
  必要。废话前端展示内容。
  需要将文章文本（现在一般是markdown），转换成前端页面。

• 网站空间｜Hosting
  必要。布在网上运行，别人才能访问。
  常见的网站空间购买形式有：共享主机，VPS，云托管和专用主机。

• 后端 ｜ Backend
  大型站需要。需要数据库存数据之类。可在后台界面进行操作。

• 域名 ｜ Domain Name
  流量大需要。可通过域名访问而不是ip地址。一般得买，其实是租，域名不能买断。

• 其他

  • 图床，存图的。可能还需要压缩图的。以及提高访问速度的
  • 评论区，适合中国宝宝体质的麻烦部分。

部署方式

根据不同前后端选择方式来选择网站空间。

从方便到麻烦，按自己理解，粗粗排序，不精确！：
全自动大型内容管理系统 > 动态模式带后台 > 静态模式带框架 > 纯纯自己手搓

• 大型网站一键部署，比如用Ghost。太重了。

• 自己一键搭，比如wordpress、halo等框架，还带数据库。目前不需要。

• 动态网站，意思是带后台管理，依赖服务器和数据库，动态生成html页面。也不需要。

• 静态模式，本地编辑静态文件，静态生成html。轻。但每增删改一个页面，都得重新上传服务器。 有的功能比如评论，得自己搭。

  • 关于页面，自动搭博客框架很多，比如Jekyll，hexo，hugo等静态网站生成器带的框架。也可以自己用vue，react等写。
  • 后端，也有框架，可以自己写。一般动态网站要买域名和hosting。

  静态页面资源少，可以免费部署。一般这几种托管/发布方式：自己的 vps 主机 / GitHub Pages / Vercel等(Serverless 平台)。然后通过github仓库关联。

• 还有不用懂代码的，gridea，用过，感觉不太好用，主题也限制比较多。

最后选择

→ 功能上不需要太重
✔︎ 使用静态。淘汰wordpress、halo等动态平台

→ 静态里尽量快。高人气平台速度：Hugo (golang) > Hexo (Node.js) > Jekyll (Ruby)
✔︎ 使用Hugo。

→ 托管： 选国外的，国内收录、访问速度等不优先考虑，先搭起来再说。
✔︎ 使用Github Page托管。

静态 Hugo + Github Page

优点：轻，快，方便部署，便宜。而且是使用比较喜欢的golang语言。
缺点：速度慢。百度不收录检索。无法做CDN加速。发文章麻烦。慢慢用着调整，不行后续再换。

github page 限制：

• 单个文件大于50MB将受到警告。
• 单个文件大于100MB无法上传。
• 仓库大小「强烈建议」少于5GB。
• 每小时可构建10次。
• 每月流量100GB。

本地搭建

需求：
简约。一定要有文章大纲显示（TOC ）。不要纯横版，两边特别浪费 看着还不紧凑。

hugo必须一开始就选择主题，于是挑了一圈。最后选定了eureka

搭建步骤

下载，基本不用复杂安装 —> 选主题。主题配置好 —> 文章发布流程 —> 启动服务

1. 下载brew install hugo
   下载前还要在终端翻墙，参见安装存档
   验证: hugo version

   更新版本：
   brew update
   brew upgrade hugo
   hugo version
   

2. 初始化blog
   hugo new site <yourblogname>
   cd 进去，观察它结构，顺便下载 brew install tree, 直接用tree命令看

3. 安装。必须安装某个主题就在这里了。一般选的主题都会有说明如何安装，这里抽象一个通用代码。

   git init
   
   git submodule add <GITHUB URL> themes/<THEME NAME>
   # 这里的GITHUB URL是该主题提供给你的，它仓库地址。 THEME NAME是你自己自由起的名字，一般就命名为该主题名字。
   

   搜了一圈下载有两种命令，git clone，git submodules，又搜了一圈区别。
   概括就是sub方式比较严谨安全，此命令隔绝原版来拉代码，保证自己拉的分支和原作master不起冲突。那用这个命令。
   

   因为后面在.gitignore里添加了theme文件夹，导致后面拉theme要使用：
   git submodule add -f <GITHUB URL> themes/<THEME NAME>

4. 根据各个主题要求操作，比如可能主题代码content中没内容，要去theme文件夹中复制，等等。然后就可以自己配置了。
   however，最后我自己写了主题。

5. 本地调试运行网页
   流程：

   # 新生成一篇文章
   hugo new posts/hello-world.md
   
   # 编译
   hugo
   
   # 启动服务
   hugo server
   

   💡 要注意的是：

   • new步骤：
     new 后面的路径是从content为根的。所以此文章生成路径 hugo根目录/content/posts/hello-world.md，需要hugo下有content文件夹，content就是放博文的。
     之所以又加一层posts文件夹，是因为hugo的结构，content下放的是所有内容。content下一级文件夹，相当于navigation的分类，可以自定义各种分类，所有文章都放在posts。但是如果有人有自定义其它的栏目，比如about、friend，或者将技术和非技术文章分开放，或者添加momes，书影音等项目，可以在content下建立相应的文件夹。
     hugo的文章都需要有一些文章头部设定的声明，但不用担心，使用此命令生成的.md自动带，当然自己外面写好，添加头部复制进来也可以。这种简单的事情，搜了一圈没弄清。
   • server步骤：
     要在根目录运行。默认地址 http://localhost:1313/
     还有一些别的可用命令，比如 后缀-D，草稿可见。
     我喜欢用hugo server --disableFastRender，可以一改动就即时看到渲染。

发布文章 部署服务

hugo有两种发布方式。

1. 使用github 唯一的个人主页仓库发布。必须创建一个 .github.io 仓库来托管生成的静态页面。
   发布后域名为https://<USERNAME>.github.io，config里的baseUrl也要设成https://<USERNAME>.github.io

2. 创建普通的项目仓库，通过项目主页发布。发布后域名为https://<USERNAME>.github.io/<PROJECT_NAME>。config里的baseUrl也要改成这个。

一般建议通过个人主页发布，因为第二种方法常出bug。

首次发布要额外设置的

• 创建个人主页仓库。仓库名必须为github名字。分支要和本地一样，现在好像默认都是main。

• 因为此仓库只存静态页面，即写完blog，运行 hugo 之后编译成的，存在 public 文件夹里的文件。所以需要单独将public/ 专门设 git init 以便提交。但是我记得git仓库不能嵌套.git，而这时 public/ 的父级已经是git包里。于是又踟蹰了，并且思考了一些，那我前端代码的layout等部分要单独建仓库存吗？我博文.md的内容要单独建仓库存吗？之类的问题。

最终设置是，在 myblogsite的大文件夹，添加.gitignore，把 content/ 和 public/ 屏蔽掉。因为我自己写主题，但是下了一堆别人的主题在 themes/ 里学习，所以也把这个文件夹屏蔽掉。然后：

cd public
git init # 创建子层本地仓库
git remote add origin <SSH path>

接下来的步骤就是最基本的，每次发文章都需执行的步骤。

发布文章步骤

  #（写文章）

  # 编译
  hugo

  # 进public
  cd public

  # 发布
  git add .
  git commit -m '备注'
  git push origin main

多试几次就会觉得麻烦，有自动脚本可以执行这个。
再嫌麻烦之后可以试 github actions自动部署。
一股脑丢这些相似的名词容易晕，github page是托管编译的静态页面，并发布的。github actions是帮忙自动部署和管理的，相当于高阶自动脚本帮跑上面那个编译发布步骤。

自动化脚本

官方提供的。复制之，保存在 deploy.sh文件中。

#!/bin/sh

# 任一步骤执行失败都会终止整个部署过程
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# 构建静态内容
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# 切换到 Public 文件夹
cd public

# 添加更改到 git
git add .

# 提交更改
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
msg="$*"
fi
git commit -m "$msg"

# 推送到远程仓库
git push origin main

用github action

// todo

后续可选搭建的

域名

// todo

评论系统

// todo

图片管理

// todo

待整理

参考：https://immmmm.com/

免费的个人博客系统搭建及部署解决方案 Hugo + GitHub Pages + Cusdis

我是怎么写博客的