建站 2547 字 2 分钟

建站

博客的第一篇文章，关于建站

前言

之前也建过几次博客，不过也都也荒废了，一来是没有什么表达欲，二来是管理起来也确实麻烦，那时候作为小白不会玩服务器，着实是出了很多麻烦，久而久之也就动力全无了

不过这些事情在 vibe 的辅助下都方便了不少，加之有了经验也有了构思，大概几十轮对话也就完善了，这篇文章主要讲讲构思

框架

考虑到博客不会出现太多的动态内容和后台管理的麻烦，所以主要采用的是 hugo 的静态页面，以前听说过很多次这个博客工具了，但这也是第一次用上

之前有考虑过用 WordPress、VuePress 或者自己写好 vue 并对接一个后端的 CMS，但不是太重就是太过于麻烦，这些工具确实功能更全但是很多功能繁琐且没必要

一个好的开发流程应该遵循奥卡姆剃刀原则，“如无必要，勿增实体”，毕竟在 vibe coding 的时代下，推翻重构并不是一件很麻烦的事情，过度提前设计反而会引入更多臃肿的技术债

样式

我比较喜欢极简风格，确实好看，也更适合我这种懒人

不过极简风的缺点是不够灵动，所以添加了一些动效，但也添加的极为克制，过分的动效会让眼花缭乱，并且卡顿感和阻尼感也会更强

我觉得在博客中，“快”永远比“美”更重要。当动效的“表演时间”超过了用户的“等待时间”，它就从一种美化变成了一种负担。

其他地方也融入了一些小巧思：

  • 顶部是很薄的固定导航，存在感低，不抢正文
  • 主内容区比较宽松，段落和模块之间留白很多
  • 文章样式接了 github-markdown-css 的浅色文章样式
  • 首页、分类页、文章页都偏“内容编排”，而不是卡片堆满的资讯站
  • 导航、文章列表、返回链接都做得比较“轻”，像排版元素，不像功能按钮
  • 动效添加的是轻微 micro-interaction，更像页面“活一点”，不是明显动画感

开发

关于开发值得提到的一点是，用到了 bash 脚本作为统一的管理方式

而后通过 start|stop|status|test|help 的方式来统一管理命令，毕竟记太多命令也是件十分头疼的事情

使用方式如下

➜  blog git:(main) ✗ ./service.sh help  
Usage: ./service.sh {start|stop|status|test|help}

Commands:
  start   Start the local Hugo development server in the background.
  stop    Stop the running Hugo development server.
  status  Show whether the Hugo development server is running.
  test    Run a production Hugo build for verification.
  help    Show this help message.
➜  blog git:(main) ✗ ./service.sh status
running pid=17463 url=http://127.0.0.1:1313/ log=/Users/zzy/Develop/blog/.service/hugo.log
➜  blog git:(main) ✗

部署

代码主要分为三个地方，本地、ecs 云服务器和 GitHub 仓库

本地部署代码，大体流程是通过 git action 在 push 的时候触发 deploy 流程，通过 ssh 方式上传并构建

  1. 首先肯定是建仓，把整个 Hugo 项目放进 GitHub 仓库，作为唯一代码来源。以后所有内容修改、样式调整、模板修改，都是先在本地完成，再提交到仓库。
  2. 然后在 GitHub Actions 里配置工作流。它的作用是：每次你 push 到 main，GitHub 就会在一台全新的临时机器上安装指定版本的 Hugo，然后执行生产构建，把网站编译成 public/ 静态文件。
  3. GitHub Actions 构建完成后，通过 SSH 连接阿里云服务器，把 public/ 目录里的内容同步到服务器。这里不是把源码传上去再现场构建，而是直接上传已经生成好的静态产物，这样更稳定，也更简单。
  4. 阿里云服务器上用 nginx 托管静态文件。部署时采用 releases/current 结构：每次上传一个新版本目录，再把 current 软链接切过去。这样发布过程更安全，回滚也方便。

最终本地负责开发，GitHub 负责构建，阿里云负责托管，nginx 负责对外提供访问。整个系统没有传统后端应用，核心就是 “写 Markdown -> Hugo 编译 -> Actions 自动部署 -> nginx 提供静态站点”。

deploy.yml

deploy.yml 做的事很单一：每次 push 到 main，自动构建 Hugo，并把生成的静态文件部署到阿里云。

流程按顺序是：

  1. 监听 main 分支的 push
  2. checkout 仓库代码
  3. 安装指定版本 Hugo 0.163.3
  4. 安装 rsync
  5. 执行生产构建：
  6. hugo –environment production –config hugo.toml,hugo.production.toml –minify
  7. 从 GitHub Secret 里取出 ALIYUN_SSH_KEY，写成临时 SSH 私钥文件
  8. 用 SSH 在服务器上创建部署目录 /var/www/blog/releases
  9. 用 rsync 把本次构建出的 public/ 上传到：
  10. /var/www/blog/releases//
  11. 把服务器上的 current 软链接切到这个新版本
  12. 顺手清理过老的 release，只保留最近几份

GitHub Secret 设置

值得一提的是 GitHub Secret 的设置

为了保证 ecs 的连接信息不被泄露，本地的 aliyun_macos.pem 不能直接被 GitHub 用，所以要把它的内容存进 GitHub Secret，再在 workflow 里恢复成 SSH key 文件。

  1. 首先我们需要先从阿里云的控制中创建一个新的密钥对，并绑定到实例上
  2. 去 GitHub 仓库，通过如下路径找到repository secret的配置，新建一个ALIYUN_SSH_KEY并将前面获取到的 pem 文件复制进去
Settings → Secrets and variables → Actions → New repository secret

结尾

目前网站的功能也差不多完善了，样式也都满意，不过现在还是用的 ip 网址，还不够优雅，后续会把自己买的域名用上，也可以再水一篇文章了

返回文章列表