✏️
ougege
  • README
  • Docs
    • index
    • Articles
      • AI
        • 体验Chrome AI
        • 体验Cloudflare Workers AI
        • 体验deepseek
      • CSS
        • CSS优化-PurgeCSS
        • 实用效果
        • 开发常用样式
      • Deepin
        • deepin20安装mysql
        • deepin使用tensorflow入门机器学习
        • deepin安装cuda和cuDNN
        • deepin安装lamp
        • deepin安装nvidia驱动
        • deepin安装oh my Zsh
        • deepin安装p7zip
        • deepin换源
        • 安装deepin系统后要做的事
      • Docker
        • CI/CD搭建配置
        • deepin搭建docker环境
        • docker安装和使用gitlab
        • docker搭建nginx+php环境
      • Essay
        • IOS申请邓白氏编码
        • Markdown-Mermaid
        • Markdown Use
        • webview白屏的问题查找和修复
        • 前端开发对接问题和解决办法汇总
        • 国务院机构改革方案
        • 国家级智库
        • 实用网站推荐
        • 常用Markdown数学公式语法
        • 强烈推荐前端要安装的vscode扩展
        • 新建销售计划-页面卡死问题分析
        • 海淘入坑手册
        • 竞品研究
        • 足球知识速成
      • Git
        • GitBook安装和常用命令
        • GitKraken免费版本
        • Git安装和配置
        • Git异常处理
        • Git Worktree使用
        • 前端工程化相关的实用git命令
      • JS
        • ESM模块导出方式对比
        • Emoji多端统一处理
        • JS发布订阅模式
        • JS性能优化
        • JS标准内置对象
        • JS链式调用原理
        • Promise介绍和使用
        • Range的使用
        • Vue+Oauth登录实现
        • Vue实现富文本插入Emoji
        • chrome扩展入门
        • es5新特性
        • es6常用特性
        • es常用片段
        • uniapp使用eslint校验代码
        • 与移动端通信
        • 优秀js库moment
        • 使用vue-socketio
        • 实现一个中间件
        • 小程序webview调试
        • 常用snippets
        • 常用正则
        • 常用的设计模式
        • 微信jssdk封装使用
        • 浏览器宏任务和微任务
        • 浏览器的5种Observer
        • 深入理解赋值、浅拷贝、深拷贝
        • 解析vue指令clickoutside源码
        • 键盘事件与KeyBoardWrapper交互
        • 高德地图常用方法封装
        • 高阶函数片段
      • Network
        • 使用Lighthouse分析前端性能
        • 前后端启用https
        • 宝塔nginx安装ngx_brotli
        • 比较gz与br加载速度
        • 浏览器https提示不安全
        • 浏览器提示HSTS
        • 简单使用tcpdump
        • 静态资源gzip优化
      • Node
        • CommonJS模块导出方式对比
        • Taro command not found 多平台解决方案
        • koa使用和API实现
        • node安装报错Unexpected-token
        • 使用nvm和nrm
        • 使用uniapp给小程序添加云函数
        • 使用verdaccio搭建本地npm仓库
        • 使用vue-cli搭建vue项目
        • 安装Node.js和npm配置
        • 编译成cjs和mjs的思路解析
        • 让你的npmPackage同时支持cjs和mjs
        • 通过GithubAction将内容部署到vps
      • Python
        • Python源管理
        • Python版本管理
        • mitmproxy抓包
        • 微信公众平台开发爬坑经历
      • Shell
        • Ubuntu安装deepin桌面环境
        • Ubuntu安装flatpak软件
        • Ubuntu安装wireshark
        • Ubuntu常见问题汇总
        • dell G3装系统无法识别第二块硬盘
        • linux下virtualbox用gho还原系统
        • mysql常用命令
        • navicat连接一键集成环境的mysql
        • nginx常用命令
        • pm2常用命令
        • virtualbox虚拟机和宿主机互相复制粘贴
        • vps内资源通过mega快传到本地
        • vps报错temporary failure in name resolution
        • vscode修改文件监控数
        • windows+linux双系统引导修复
        • zsh常用插件和命令
        • 一键搭建ChatGPT web版
        • 使用V2ray,CloudFlare Warp解锁GPT
        • 使用vscode进行java开发
        • 利用zx和SSHKey发布代码到服务器
        • 反爬虫一些方案总结和尝试
        • 安装1Panel
        • 安装Bt面板
        • 安装Ubuntu22.04后要做的事
        • 无显示器linux设置默认分辨率
        • 特别实用的shell命令
        • 解决linux安装xmind缺少依赖报错
      • Standards
        • CSS格式化之stylelint
        • CSS规范
        • HTML规范
        • JS规范
        • commit规范
        • 使用husky+commitlint规范代码提交
        • 使用semantic-release自动管理版本号
        • 命名规范
        • 图片规范
        • 版本编号规范
      • Wall
        • 科学上网-Cloudflare-Pages
        • 科学上网-Cloudflare-Warp
        • 科学上网-Geph
        • 科学上网-RackNerd
        • 科学上网-Slicehosting
        • 科学上网-Surfshark
        • 科学上网-Tor
        • 科学上网-XX-NET
        • 科学上网-heroku
        • 科学上网-shadowsock
        • 科学上网-v2ray使用
        • 科学上网-v2ray搭建
        • 科学上网-浏览器代理
        • 科学上网-让终端走代理
      • Windows
        • SourceTree破解免登录(windows版)
        • git bash交互提示符不工作
        • nexus 7 2013 wifi 刷机
        • tree命令生成文件目录
        • 利用charles抓包app
        • 安装Openssl
        • 安装msi文件报错2503和2502
        • 神器vimium使用说明
        • 自用host
        • 解决win10扩展出来的屏幕模糊
        • 解决安装Adobe Air时发生错误
    • Snippets
      • zsh
        • docker
        • extract
        • git-commit
        • git
        • mysql-macports
        • npm
        • nvm
        • pip
        • pm2
        • systemd
        • ubuntu
        • vscode
Powered by GitBook
On this page
  • 创建Action文件
  • 配置 Action 环境变量
  • 仓库添加环境变量
  • 配置github pages
  • 配置action scp 部署到vps
  • 参考

Was this helpful?

  1. Docs
  2. Articles
  3. Node

通过GithubAction将内容部署到vps

Previous让你的npmPackage同时支持cjs和mjsNextPython

Last updated 10 months ago

Was this helpful?

创建Action文件

在项目根目录创建 .github/workflows/ci.yml

# 标题
name: GitHub Actions 部署 vitepress 博客
# 触发时机:表示推送master分支时触发
on:
  push:
    branches:
      - master
# 设置时区
env:
  TZ: Asia/Shanghai
# 任务列表
jobs:
  build-and-deploy:
    # 运行环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
    # 步骤1:安装Node.js
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 20
    # 步骤2:检出代码
    - name: Checkout
      uses: actions/checkout@v4
      with:
        # 保留 Git 信息
        fetch-depth: 0
    # 步骤3:安装yarn
    - name: Install yarn
      run: npm install -g yarn
    # 步骤n:删除node_modules,替换或更新包时使用
    # - name: Delete node_modules
    #   run: rm -fr node_modules
    # 步骤4:安装依赖
    - name: Install dependencies
      run: yarn install
    # 步骤5:删除cache和dist
    - name: Clean up cache and dist
      run: |
        rm -rf Docs/.vitepress/cache
        rm -rf Docs/.vitepress/dist
    # 步骤6:构建VitePress
    - name: Build VitePress
      run: yarn run build
    # 步骤7:部署到Github Pages
    # - name: Deploy to Github Pages
    #   uses: peaceiris/actions-gh-pages@v3
    #   with:
    #     github_token: ${{ secrets.VITEPRESS_BLOG_TOKEN }} # 自定义的action环境变量
    #     publish_dir: .vitepress/dist # 指定部署目录
    #     publish_branch: gh-pages # 指定部署分支
    #     dotfiles: true # 允许使用.gitignore文件
    # 步骤8: scp部署到 vps
    - name: Deploy to VPS
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SERVER_HOST }} # 服务器地址
        username: ${{ secrets.SERVER_USER }} # 服务器用户名
        port: ${{ secrets.SERVER_PORT }} # 服务器端口
        key: ${{ secrets.SERVER_SSH_KEY }} # 服务器SSH 密钥
        # password: ${{ secrets.SERVER_USER_PASSWORD }} # 服务器用户密码
        strip_components: 2 # 跳过指定目录
        source: 'Docs/.vitepress/dist' # 源目录
        target: ${{ secrets.SERVER_TARGET }} # 目标目录

配置 Action 环境变量

  1. 右上角头像 => Settings => Developer Settings => Personal access tokens => Tokens(classic) => Generate new token

::: warning 注意 存储生成的 token ,请妥善保管,永远只出现一次。 :::

仓库添加环境变量

  1. 打开仓库主页 => Settings => Secrets and variables => Actions => New repository secret => 填入变量名和 token

  2. 推送本地代码,github action 检测到 ci.yml 文件,自动触发部署,将编译后的 dist 部署到 gh-pages 分支

配置github pages

  1. 打开仓库主页 => Settings => Pages => Source => 选择 gh-pages 分支 => Save

配置action scp 部署到vps

  1. 登录 vps ,生成 SSH 秘钥

    # 生成ssh秘钥
    ssh-keygen -t rsa -b 4096 -C "github-actions-node"
    # 将公钥复制到服务器的authorized_keys文件中
    cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_keys
  2. 配置 Actions Secrets

    # 打印私钥,复制粘贴到github action环境变量中,命名为SSH_KEY
    cat /root/.ssh/id_rsa

参考

vitepress_blog_token
github_pages

参考文档
GitHub Actions 入门教程
Github 管理个人访问令牌
通过 Github Action 将 GitHub 上的内容部署到 VPS
使用 GitHub Actions 在代码更新时自动部署代码到 VPS
vitepress项目使用github的action自动部署到github-pages中
使用Github Actions自动部署Golang应用到VPS服务器
使用 GitHub Actions 部署 Next.js 项目到 VPS