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

前言

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

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

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

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

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

在线访问

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

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域名即可。

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

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

Github配置

如图所示：

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

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

如何创建文章

部署完成后，如果上传文章呢，我之前的博客是在后台管理系统中上传文章，这个静态博客当然是不存在后台管理系统的，所以上传文章就需要手动去讲文章放到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私钥

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

打包后的文件直接丢进服务器的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上就能自动上传到服务器完成构建并运行重新项目。