跳到正文
裁晨的Blog

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

最近想将自己的学习以及生活日常整理一下,经过寻找发现,astro很适合 Md 文件内容发布,阅读须知:1. 了解 react,astro 使用 jsx 编写

技术 1 分钟阅读

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

1682862962526.png

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

https://astro.build/themes

1682863616368.png

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

pnpm i

pnpm run dev

1682863716162.png

1682863894178.png

1682864177914.png 1682864129829.png

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

1682864962069.png 打开 Trusted 并保存

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

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/

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