skip to content
Logo 裁晨

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

/ 4 min read

Table of Contents

前言

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

1682862962526.png

阅读须知:

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

astro 部分

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

https://astro.build/themes

本文使用如下模板

1682863616368.png

拉取主题模板源码

https://github.com/chrismwilliams/astro-theme-cactus

安装依赖

pnpm i

运行项目

pnpm run dev

效果如下

1682863716162.png

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

1682863894178.png

drone 自动化项目部署部分

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

1682864177914.png 1682864129829.png

编写 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 上的项目

1682864962069.png 打开 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 优化

参考文档