使用astrojs和drone实现个人网站生成与自动化部署
/ 4 min read
Table of Contents
前言
最近想将自己的学习以及生活日常整理一下,经过寻找发现,astro很适合 Md 文件内容发布
阅读须知:
- 了解 react,astro 使用 jsx 编写
- 了解 docker,以及拥有自己的服务器,拥有一个 gitee 账号,或者 github 账号
- 开发环境:window,node:v16 .15.1,pnpm:v7 .9.0
astro 部分
在 astro 官网主题找一个喜欢的风格模板
本文使用如下模板
拉取主题模板源码
https://github.com/chrismwilliams/astro-theme-cactus
安装依赖
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: bridgeservices: # 数据库服务 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: pipelinetype: dockername: 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]https://astro.build/
- [drone]https://www.drone.io/