基于Astro开发的Fuwari静态博客模版配置CICD流程

前言

同往常一样，上班摸鱼的时候，就喜欢逛逛随机逛逛别人的博客，然后有一个博客的主题让我有点心动。

我自己也是部署了博客的，我目前的博客网站是：ZY的博客，已经安稳运行了800多天。不过我的博客有个缺点就是加载很慢，主要原因呢是因为静态资源的关系，虽然有一小部分我使用了七牛云的cdn服务，但还是无法解决访问慢的问题。加上本身的服务器带宽也不大，只有3M的带宽。种种原因导致我的博客访问很慢，然后就遇到了今天要说的这个博客，这是一个静态博客，访问起来速度会快很多。

这个博客是基于Astro开发的一个博客主题模版，GitHub上叫fuwari。

先来放一张博客的图片，我觉得这个主题还是很好看的。

在线访问

目前我的新博客也已经部署到服务器上了，地址为：

ZYBlog https://blog.pljzy.top/

欢迎大家访问我的新博客！

博客的不足

如果拿这个博客和我目前的博客对比，我认为的不足点有以下几点：

评论功能还未完成；（已集成）
没有友情链接功能；

fuwari的开发者不知道什么时候会更新评论功能，不过我在翻阅Pull requests时，发现有一个关于评论的合并请求：https://github.com/saicaca/fuwari/pull/406。

我也是花了时间去实验了一下，发现我还得重新注册个域名，总的来说还是比较麻烦的。后面发现他这种办法是针对于没有服务器的博主，我有自己的服务器完全可以找一个开源的评论系统集成到fuwari中去就行了。

后续我在博客集成了Twikoo评论系统，后面我再单独出一篇文章讲如何集成评论系统。

总之我觉得Astro的自由度很高，支持很多语言如：React、Preact、Svelte、Vue、Solid等，可扩展性很高，完全可以根据自己的想法去修改博客的内容。

如何部署

下面来讲一讲如何部署一个这个博客，Astro的文档很详细，这里就拿部署到GitHub上来作为例子。

部署文档：部署你的 Astro 站点至 GitHub Pages | Docs https://docs.astro.build/zh-cn/guides/deploy/github/

部署文档里面说的很清楚，我这里就不再复述了，如果只是单纯的部署到GitHub Pages上，跟着官方文档去做，一般不会出现问题。

使用自己的域名

总所周知，Github Pages部署后会给你一个Github.io域名，如果想使用自己的域名则需要做一点修改。

首先修改代码中的astro.config.mjs文件，将site指向你的域名，要注意的是不要为 base 设置值。

import { defineConfig } from 'astro/config'

export default defineConfig({

  site: 'https://example.com',

})

域名解析

代码改完之后，需要为你的域名添加域名解析，以阿里云域名为例。

顶级域名：需要添加A类解析，将你的顶级域名指向Github.io域名的ip地址，获取ip地址，本地控制台ping一下github.io域名即可。

如果是二级域名，比如我的blog.pljzy.top,那么则需要添加的是CNAME类型的解析，将blog.pljzy.top域名直接解析到Github.io上去就行了。

Github配置

如图所示：

Source选择GitHub Actions，Custom domian填入自己的域名，然后强制HTTPS打开。

如何创建文章

部署完成后，如果上传文章呢，我之前的博客是在后台管理系统中上传文章，这个静态博客当然是不存在后台管理系统的，所以上传文章就需要手动去讲文章放到posts目录下。

注意分为带展示图的文章和不带展示图的文章。

posts指代Src->Content->posts

带展示图

在posts目录下创建文章目录guide，cover.jpeg就是首图，index.md就是文章。

guide/

├── index.md

└── cover.jpeg

不带展示图

不带展示图的文章就只需要在posts下创建md文件即可。

posts/

└── index.md

注意

需要注意的是，md文件需要再开头添加上标识，用于展示文章的标题、时间、首图、分类、标签等信息。

---

title: My First Blog Post

published: 2023-09-09

description: This is the first post of my new Astro blog.

image: ./cover.jpg

tags: [Foo, Bar]

category: Front-end

draft: false

lang: jp      # Set only if the post's language differs from the site's language in `config.ts`

---、

步入正题CICD

CICD简述

CI/CD（持续集成/持续交付或持续部署）是一种自动化软件开发和交付流程。

持续集成（CI）：开发者提交代码后，自动触发构建和测试（单元测试、代码扫描等）。
持续交付（CD）：生成可部署的产物（如Docker镜像），等待人工确认发布。

简言之，CI/CD通过自动化实现从代码提交到发布的快速、可靠流程。

deploy.yml

上面扯了很多，还没有开始讲CICD。部署到GitHub Pages时，Astro官方文档给了一个通用的Github Action模版。

使用这个模版就可以完成简单的CICD流程，我们只需要在本地的Src->Content->posts中创建文章，或者把文章目录移入该目录下，然后commit提交，push推送，GitHub Action会自动帮我们完成打包+部署。

name: Deploy to GitHub Pages

on:

  # 每次推送到 `main` 分支时触发这个“工作流程”

  # 如果你使用了别的分支名，请按需将 `main` 替换成你的分支名

  push:

    branches: [ main ]

  # 允许你在 GitHub 上的 Actions 标签中手动触发此“工作流程”

  workflow_dispatch:

# 允许 job 克隆 repo 并创建一个 page deployment

permissions:

  contents: read

  pages: write

  id-token: write

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout your repository using git

        uses: actions/checkout@v4

      - name: Install, build, and upload your site

        uses: withastro/action@v3

        # with:

          # path: . # 存储库中 Astro 项目的根位置。（可选）

          # node-version: 20 # 用于构建站点的特定 Node.js 版本，默认为 20。（可选）

          # package-manager: pnpm@latest # 应使用哪个 Node.js 包管理器来安装依赖项和构建站点。会根据存储库中的 lockfile 自动检测。（可选）

  deploy:

    needs: build

    runs-on: ubuntu-latest

    environment:

      name: github-pages

      url: ${{ steps.deployment.outputs.page_url }}

    steps:

      - name: Deploy to GitHub Pages

        id: deployment

        uses: actions/deploy-pages@v4

使用自己的服务器

考虑到Github Pages的访问速度时好时坏，非常的不稳定,想部署到自己的服务器上。部署的方式有很多种，直接将打包后的文件丢入Nginx中，或者使用Docker构建容器去部署。

这样做都行，但是我每次添加文章，都要重新去build代码，然后上传到服务器，很麻烦。

聪明的网友已经发现解决办法了，上面我们是不是讲过GitHub Action流程可以完成简单的CICD，即本地编写文章-push代码-GitHub自动构建打包部署。

那我们只需要稍微修改一下deploy.yml文件，然后在Github配置一下连接服务器的ssh私钥即可。

SERVER_IP：服务器外网ip地址
SSH_USERNAME：登录用户名
SSH_PRIVATE_KEY：ssh私钥

打包后的文件直接丢进服务器的Nginx目录下

使用这份deploy.yml文件就行了，根据自己的实际情况修改挂载目录和端口。

name: Deploy with Volume Mount

on:

  push:

    branches: [main]

  workflow_dispatch:

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout

        uses: actions/checkout@v4

      - name: Install and Build (Astro)

        uses: withastro/action@v3

      - name: Upload Files to Server

        uses: appleboy/scp-action@v0.1.6

        with:

          host: ${{ secrets.SERVER_IP }}

          username: ${{ secrets.SSH_USERNAME }}

          key: ${{ secrets.SSH_PRIVATE_KEY }}

          source: "dist/*"

          target: "/www/wwwroot/default/newblog"  # 直接上传到挂载目录

      - name: Start/Restart Container

        uses: appleboy/ssh-action@v1

        with:

          host: ${{ secrets.SERVER_IP }}

          username: ${{ secrets.SSH_USERNAME }}

          key: ${{ secrets.SSH_PRIVATE_KEY }}

          script: |

            # 直接运行Nginx容器并挂载目录

            docker stop astro-app || true

            docker rm astro-app || true

            docker run -d \

              --name astro-app \

              -p 4321:80 \

              -v /www/wwwroot/default/newblog:/usr/share/nginx/html:ro \

              nginx:alpine

使用Docker部署到服务器

使用Docker相对来说麻烦一点，使用这份deploy.yml文件就行了，然后需要常见DockerFile、docker-compose.yml、default.conf这3个文件，博主就是采用的这种方式。同样注意根据自己服务器的实际情况修改目录和端口。

deploy.yml

name: Docker Compose Deploy

on:

  push:

    branches: [main]

  workflow_dispatch:

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout

        uses: actions/checkout@v4

      - name: Install and Build (Astro)

        uses: withastro/action@v3

      - name: Debug file existence

        run: |

          ls -la

          ls -la dist/ || echo "dist/ not found"

          ls -la docker/ || echo "docker/ not found"

          test -f docker-compose.yml && echo "docker-compose.yml exists" || echo "docker-compose.yml missing"

      - name: Upload Files to Server

        uses: appleboy/scp-action@v0.1.6

        with:

          host: ${{ secrets.SERVER_IP }}

          username: ${{ secrets.SSH_USERNAME }}

          key: ${{ secrets.SSH_PRIVATE_KEY }}

          source: "dist/*,docker/*,docker-compose.yml"

          target: "/www/wwwroot/default/newblog"

      - name: Deploy with Docker Compose

        uses: appleboy/ssh-action@v1

        with:

          host: ${{ secrets.SERVER_IP }}

          username: ${{ secrets.SSH_USERNAME }}

          key: ${{ secrets.SSH_PRIVATE_KEY }}

          script: |

            cd /www/wwwroot/default/newblog

            docker-compose down

            docker-compose up -d --build

            docker system prune -f

DockerFile

FROM nginx:alpine

# 删除默认配置

RUN rm /etc/nginx/conf.d/default.conf

# 复制自定义配置

COPY ./nginx/default.conf /etc/nginx/conf.d/

# 复制构建好的静态文件（由CI/CD流程完成）

WORKDIR /usr/share/nginx/html

# 暴露端口

EXPOSE 4321

docker-compose.yml

version: '3.8'

services:

  web:

    build: ./docker

    ports:

      - "4321:4321"

    volumes:

      - /www/wwwroot/default/newblog/dist:/usr/share/nginx/html:ro

    restart: unless-stopped

default.conf

server {

    listen       4321;# 配置端口

    server_name  0.0.0.0; # 修改为docker服务宿主机的ip

    location / {

        root   /usr/share/nginx/html;

        index  index.html index.htm;

        try_files $uri $uri/ /index.html =404;

    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

        root   html;

    }

}

无论采用上述那种方式，我们只需要在本地创建文章然后提交到git上就能自动上传到服务器完成构建并运行重新项目。

吐槽一下

Github Action调试起来还是挺费劲的，博主整整调试了10几次才完成CICD，有各种原因会导致部署失败。

效果演示

修改代码后直接提交git，就能完成构建部署。

在Github Action页面可以看到有3个流程，分别是代码检查、构建检查、以及最后的推送到服务器构建，代码检查和构建检查是fuwari模版自带的无需修改。