使用astrojs和drone实现个人网站生成与自动化部署

前言

最近想将自己的学习以及生活日常整理一下，经过寻找发现，astro很适合Md文件内容发布

阅读须知：

1. 了解react,astro使用jsx编写
2. 了解docker，以及拥有自己的服务器，拥有一个gitee账号，或者github账号
3. 开发环境：window,node:v16.15.1,pnpm:v7.9.0

astro部分

在astro官网主题找一个喜欢的风格模板

astro.build/themes

本文使用如下模板

拉取主题模板源码

github.com/chrismwilli…

安装依赖

pnpm i

运行项目

pnpm run dev

效果如下

在项目的src/content/post目录下编写md文件进行创作

drone自动化项目部署部分

在gitee个人设置中创建第三方应用获取Client ID和Client Secret并授予一下权限

编写dokcer-compose.yml

version: "3.9"
# 创建自定义网络
networks:
  drone:
    name: drone
    driver: bridge
services:
  # 数据库服务
  db:
    image: postgres:latest
    container_name: drone_db
    restart: always
    networks:
      - drone # 加入到drone网络
    ports:
      - "7931:5432"
    environment:
      - POSTGRES_USER=drone # PGSQL默认用户
      - POSTGRES_PASSWORD=drone # PGSQL默认密码
      - POSTGRES_DB=drone # PGSQL默认数据库
    volumes:
      - /volumes/drone/db:/var/lib/postgresql/data
  # Drone Server 服务
  server:
    image: drone/drone:2.8.0 # 目前drone最新版本为 2.8.0
    container_name: drone_server
    restart: always
    networks:
      - drone # 加入到drone网络
    ports:
      - "3000:80"
    environment:
      - DRONE_SERVER_PROTO=http # 访问协议，创建webHooks和重定向
      - DRONE_SERVER_HOST=x.x.x.x:3000 # 主机名称，创建webHooks和重定向
      - DRONE_USER_CREATE=username:此处名称与gitee账号名称需要保持一致,admin:true # 管理员账户
      - DRONE_DATABASE_DRIVER=postgres # 数据库类型
      - DRONE_DATABASE_DATASOURCE=postgres://drone:drone@db/drone?sslmode=disable # 数据库连接
      - DRONE_GIT_ALWAYS_AUTH=true # 使用 oauth 身份验证信息拉取代码
      - DRONE_RPC_SECRET= #与 drone server 通讯的密钥
      - DRONE_GITEE_CLIENT_ID= #gitee上面申请的clientId
      - DRONE_GITEE_CLIENT_SECRET= #gitee上面申请的client secre
    volumes:
      - /volumes/drone/server:/data
      - "/www/wwwroot/drone.whwan.top:/www/wwwroot/drone.whwan.top"
      - "/var/run/docker.sock:/var/run/docker.sock"
    depends_on:
      - db
  # Drone Docker Runner
  runner:
    image: drone/drone-runner-docker:1.8.0 # 目前drone-runner-docker最新版本为 1.8.0
    container_name: drone_runner
    restart: always
    networks:
      - drone # 加入到drone网络
    ports:
      - "7930:3000"
    environment:
      - DRONE_RUNNER_NAME=docker-runner
      - DRONE_RUNNER_CAPACITY=10 # 限制runner可执行的并发管道数量
      - DRONE_RPC_PROTO=http # 访问drone server 协议
      - DRONE_RPC_HOST=x.x.x.x:3000 # 访问drone server 服务器地址
      - DRONE_RPC_SECRET=#与 drone server 通讯的密钥
      - DRONE_UI_USERNAME=admin # Drone Runner 的 UI 用户账号
      - DRONE_UI_PASSWORD=admin # Drone Runner 的 UI 用户密码
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock"
    depends_on:
      - server

运行

docker-compose -f dokcer-compose.yml  up -d

配置项目运行

访问上边dokcer-compose.yml中配置的DRONE_RPC_PROTO地址，并进行gitee的OAuth授权后即可看到gitee上的项目

打开Trusted并保存

上边dokcer-compose.yml中DRONE_USER_CREATE字段若与gitee账号名不一致可能没有该选项

在项目根目录下创建.drone.yml文件

kind: pipeline
type: docker
name: blog

trigger:
  event:
    - push

volumes:
  - name: blog
    host:
      path: /app/blog #将编译好的文件映射到宿主的该目录下

steps:
  - name: npm-package
    image: node:latest
    volumes:
      - name: blog
        path: /app/blog
    commands:
      - npm install -g cnpm --registry https://registry.npm.taobao.org
      - cnpm install
      - npm run build
      - rm -rf /app/blog/*
      - cp -r dist/* /app/blog/

使用nginx将网站访问目录设置为/app/blog目录即可完成访问

结语

以上便是编写文章并实现自动化部署的流程，使用静态网站部署能加快网站访问速度以及SEO优化

参考文档

• [astro]astro.build/
• [drone]www.drone.io/