二丫讲梵 二丫讲梵
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)

二丫讲梵

行者常至,为者常成
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)
  • 随写编年

  • 家人物语

  • 追忆青春

  • 父亲的朋友圈

  • 电影音乐

  • 效率工具

  • 博客相关

    • 原生文档

    • 个人折腾

      • 旧版博客上配置的一些小功能汇总
      • 解决wordpress新建页面没有模板的问题
      • wordpress整站迁移操作
      • 关于wordpress后台admin密码防爆破的一些操作
      • vuepress编译时报错TypeError _normalized undefined的解决
      • GitHub配置自动部署pages与服务器
      • Vuepress添加评论插件valine
      • Vuepress配置全文搜索插件fulltext-sarch
      • Vuepress添加侧边栏访问地图
      • vuepress文章内有模板语法时编译报错的解决
      • Vuepress配置评论插件为Artalk
      • 博客接入CDN的折腾-对阿里云七牛云蓝易云多吉云几家CDN使用评测
      • Vuepress添加首页轮播图与打赏按钮的配置
      • Vuepress配置rss订阅功能
      • Vuepress全文搜索插件vuepress-plugin-flexsearch-pro
      • Vuepress全文搜索终极版-algolia的开源实现meilisearch全接入指南
      • 基于多吉云存储+uPic构建个人图床的实践分享
      • vuepress配置谷歌访问统计google-analytics
      • vuepress-vdoing主题配置LxgwWenKai字体
    • 转载推广

  • 闲言碎语
  • 博客相关
  • 个人折腾
二丫讲梵
2021-07-05

GitHub配置自动部署pages与服务器

文章发布较早,内容可能过时,阅读注意甄别。

经过这次项目配置部署下来发现,GitHub 的 Actions 真的是个好东西,有了这个流水线,那么无论是 GitHub Pages 的静态部署,还是同步到服务器,都变得轻松简单起来,这里记录一下过程中的一些细节。

GitHub Actions 主要依赖仓库中 workflows 目录下的 yaml 文件定义流水线步骤,这里定义内容如下,可将推到 main 分支的源码内容部署到 GitHub Pages:

name: CI

# 在main分支发生push事件时触发。
on:
  push:
    branches:
      - main

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区(设置时区可使页面中的`最近更新时间`使用时区时间)

jobs:
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用:安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: run deploy.sh # 步骤3
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
        run: npm install && npm run deploy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

其中的 ACCESS_TOKEN是个关键,需要在个人 GitHub 账号中进行创建:

Settings---> Developer settings--->Personal access tokens---> Generate new token。

然后定义个名字,接口可以全选。

接着需要将秘钥对放置到对应项目仓库的 Secrets中:

image-20210614215458139

上边的内容都是定义了基础环境,然后调用了一个 deploy 的脚本,脚本内容如下:

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# deploy to github pages
# echo 'eryajf.net' > CNAME

if [ -z "$GITHUB_TOKEN" ]; then
  msg='deploy'
  githubUrl=git@github.com:eryajf/eryajf.github.io.git
else
  msg='来自github actions的自动部署'
  githubUrl=https://eryajf:${GITHUB_TOKEN}@github.com/eryajf/eryajf.github.io.git
  git config --global user.name "eryajf"
  git config --global user.email "Linuxlql@163.com"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github gh-pages分支
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这里就能够自动打包构建,构建之后生成的静态文件又能够自动覆盖到 gh-pages 分支,然后只需要设置 Pages 即可实现提交源码之后自动构建的功能了:

image-20210614220333450

如果想要将构建后的代码再自动同步到自己的服务器,则可以添加如下内容:

# 利用action把build好的文件上传到服务器/home/eryajf.github.io路径下,需要确认此目录已在服务端创建
- name: deploy file to server
  uses: wlixcc/SFTP-Deploy-Action@v1.0
  with:
    username: "root" #ssh user name
    port: "2017" # 远程服务器ssh端口,默认22
    server: "eryajf.net" # 远程服务器IP
    ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} # 认证服务器秘钥对的私钥
    local_path: "docs/.vuepress/dist/*" # 对应我们项目打包后的静态文件路径
    remote_path: "/home/eryajf.github.io" # 服务器上的路径
1
2
3
4
5
6
7
8
9
10

上边又多了一个私钥,这个私钥我们先在服务器执行如下命令进行创建:

$ ssh-keygen -m PEM  # 然后一路回车就能创建成功
1

创建完成之后,需要把公钥放到服务器中:

$ cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_keys
1

然后将私钥 /root/.ssh/id_rsa 以秘钥对的形式在项目中进行创建。

完整内容如下:

name: CI

# 在main分支发生push事件时触发。
on:
  push:
    branches:
      - main

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区(设置时区可使页面中的`最近更新时间`使用时区时间)

jobs:
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用:安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: run deploy.sh # 步骤3
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
          CODING_TOKEN: ${{ secrets.CODING_TOKEN }}
        run: npm install && npm run deploy

      # 利用action把build好的文件上传到服务器/home/eryajf.github.io路径下,需要确认此目录已在服务端创建
      - name: deploy file to server
        uses: wlixcc/SFTP-Deploy-Action@v1.0
        with:
          username: "root" #ssh user name
          port: "2017" # 远程服务器ssh端口,默认22
          server: "eryajf.net" # 远程服务器IP,我这里填写域名是因为解析到了服务器IP
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} # 认证服务器秘钥对的私钥
          local_path: "docs/.vuepress/dist/*" # 对应我们项目打包后的静态文件路径
          remote_path: "/home/eryajf.github.io" # 服务器上的路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

这样就实现了当我们提交项目源码之后,自动将项目部署到 GitHub Pages 以及自己服务器的指定目录中。

微信 支付宝
#github#blog
上次更新: 2024/07/04, 22:40:37
vuepress编译时报错TypeError _normalized undefined的解决
Vuepress添加评论插件valine

← vuepress编译时报错TypeError _normalized undefined的解决 Vuepress添加评论插件valine→

最近更新
01
睡着的人不关灯
06-12
02
学习周刊-总第215期-2025年第24周
06-12
03
学习周刊-总第214期-2025年第23周
06-05
更多文章>
Theme by Vdoing | Copyright © 2017-2025 | 点击查看十年之约 | 浙ICP备18057030号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式