github网站部署

/ 默认分类 / 没有评论 / 93浏览

[TOC]

手动部署

介绍

GitHub Pages 是一个静态站点托管服务。

如果你想记录生活、抒发情感、分享见解,这一切都离不开一个可以承载文字的平台,一个独立的、由自己掌控的平台,而 GitHub Pages 就是这么一个平台。

在这个平台里你可以使用自己的个性域名;可以在海量的主题里挑选最适合你的那一款,如果你技术极客,也可以根据自己的喜好,设计属于自己的个性化页面;你既可以在线创建和发布网站,也可以在本地通过客户端工具或者命令行进行网站和内容的管理。

你完全可以通过 GitHub Pages 展示和输出自身价值,甚至可以把它打造成属于自己的互联网「身份证」。

如果你想仔细了解 GitHub Pages点击这里

优势

......

限制

开始使用

上传代码

image-20240920142635266

在项目所在目录下执行命令,使用SSH

GitHub 从2021年8月13日 09:00 PST 开始就不接受使用账户密码对 GitHub.com 进行 git 操作了。

本地项目

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:MaRuifu/ac.git
git push -u origin main

配置github上传(可选)

git使用SSH配置, 初始需要以下三个步骤

  1. 使用秘钥生成工具生成rsa秘钥和公钥
  2. 将rsa公钥添加到代码托管平台
  3. 将rsa秘钥添加到ssh-agent中,为ssh client指定使用的秘钥文件

第一步:检查本地主机是否已经存在ssh key

cd ~/.ssh
ls
//看是否存在 id_rsa 和 id_rsa.pub文件,如果存在,说明已经有SSH Key

第二步:生成ssh key

如果不存在ssh key,使用如下命令生成

ssh-keygen -t rsa -C "xxx@xxx.com"
//执行后一直回车即可

生成完以后再用第二步命令,查看ssh key

第三步:获取ssh key公钥内容(id_rsa.pub)

cd ~/.ssh
cat id_rsa.pub

第四步:Github账号上添加公钥

进入Settings设置

添加ssh key,把刚才复制的内容粘贴上去保存即可

image-20240920145449143

第五步验证是否设置成功

ssh -T git@github.com

显示如下信息表明设置成功

maruifu@maruifudeMacBook-Pro .ssh % ssh -T git@github.com
Hi MaRuifu! You've successfully authenticated, but GitHub does not provide shell access.

上传超时(可选)

首先输入以下命令检查SSH是否能够连接成功(ssh后面有空格)

maruifu@maruifudeMacBook-Pro .ssh % ssh -T git@github.com

发现报错:端口连接超时。

ssh: connect to host github.com port 22: Connection timed out

解决方案 在你的主机名文件夹中找到.ssh文件夹;(此前配置SSH时会生成该文件夹) 在.ssh文件夹中新建文件 config,不带后缀(可以新建文本文档,去掉.txt后缀) 使用文本软件打开config文件,输入以下内容,保存后即可 其中email@maruifu.cn 为你的邮箱

Host github.com
User email@maruifu.cn 
Hostname ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
Port 443

再次执行

ssh -T git@github.com

会出现以下提示,输入yes回车即可

maruifu@maruifudeMacBook-Pro .ssh % ssh -T git@github.com
The authenticity of host '[ssh.github.com]:443 ([20.205.243.160]:443)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes

再次执行ssh -T git@github.com,发现验证通过–接下来可以正常上传代码

Hi Clare! You've successfully authenticated, but GitHub does not provide shell access.

上传打包后的文件

为什么创建 gh-pages 分支呢?因为 master 主支放的是博客源码,而 gh-pages 分支放的是主支打包后的博客代码。

不理解打包,可以这么认为:写的 markdown 文档是源码,要想显示到网页上,需要变成 html 文件,打包就是变成 html 的过程。

-f 是必须的,意味着覆盖原来的内容

如果可以在仓库 main 下看到源码,gh-pages 下看到打包后的文件,代表成功了

开启部署

:::note

这一内容为开启 Github Page是为了连接手动部署成功后的操作,如果手动部署失败或者想直接使用脚本部署,则至少二选一成功了再来进行本内容的操作。

自动化部署前需要先开启 Github Page

当部署成功时,没有看到想要的成果,我相信不会有人继续进行枯燥的操作。下面将开启 Github Page 见证自己的部署成功页面。

GitHub Page

![image-20240923105347519](/Users/maruifu/Library/Application Support/typora-user-images/image-20240923105347519.png)

::: details 防止图片失效,这里记录步骤

  1. 进入仓库,点击 Settings
  2. 找到 Pages 选项
  3. 选择要部署的分支,一定是 gh-pages 分支
  4. 蓝色框的地址,就是所有人都能访问的地址,访问之后,就能看到你的博客

:::

Github 一旦更新 gh-pages 分支内容,会自动重新部署,所以访问页面是最新的。

脚本部署

::: note 注意

脚本部署仅适用于把打包后的文件推送到 GitHub 仓库的 gh-pages 分支下,不适用把项目源码推送到 main 主支上。

所以还得手动执行命令把源码推送到 GitHub 仓库。当然自动化部署,可以全部解决。

:::

每次写完文档,如果都需要像上面上传代码中手动打包,无疑是繁琐且耗费时间的,学会使用脚本解决频繁的问题,能更加专注于文章。

shell 脚本,请自行学习,日后我更新了 shell 的学习文档,这里会提供跳转地址 「*记录」。

该脚本是推送项目到 GitHub,如果推送到 Gitee,修改仓库地址即可,脚本名叫 deploy.sh,请放在项目的根目录下。

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd dist

# 如果手运行该脚本,则执行if里的,如果是GitHub自动执行该脚本,则是else里的
if [ -z "$GITHUB_TOKEN" ]; then
 msg='deploy'
 githubUrl=git@github.com:maruifu/ac.git  # 替换自己的 GitHub 仓库地址,SSH格式
else
 msg='来自github actions的自动部署'
 # 替换自己的 GitHub 仓库地址,更改的是 @后面的地址 以及 把Kele-Bingtang 改为自己用户名
 githubUrl=https://maruifu:${GITHUB_TOKEN}@github.com/maruifu/ac.git 
 git config --global user.name "maruifu"   # 修改为自己的 GitHub 用户名
 git config --global user.email "mrf_it@163.com"  # 修改为自己的 GitHub 邮箱,注册时绑定的邮箱
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl main:gh-pages # 推送到github gh-pages分支

cd - # 退回开始所在目录
rm -rf dist

在项目根目录打开 bash 命令窗口或者 Git Bash Here 窗口,执行该脚本

sh deploy.sh  # 假设你的脚本叫 deploy.sh

自动化部署

使用了脚本部署,相比较手动部署,少了打包的过程,节省了时间,但是还要手动执行两次过程:

  1. 敲打命令推送项目源码到仓库的 main
  2. 执行 shell 脚本,自动打包并推送打包内容到仓库的 gh-pages

自动化部署利用了 GitHub Actions ,仅需实现过程1:推送项目源码到 master,即可自动实现过程 2

过程 1 可以写一个脚本执行。这样执行一个脚本,即可实现自动化,下方有该脚本,名叫 push.sh

介绍

GitHub Actions 是 GitHub 的持续集成服务,于 2018 年 10 月推出。

GitHub Actions 入门教程

GitHub Actions 商城

生成token

首先,获取 token,这是 GitHub 的另一种授权方式,即不需要用户名和密码

如果不想你的 token 过期,在 Expiration 选中 No expiration 即可

token 生成后,记得保存下来,因为页面一旦关闭,token 不会在显示

配置密钥

拿到了 token,需要将该 token 进行配置,赋予某仓库权限

内容分为三步,其中第三步看需求,第一、二步则是必须。

第一步:配置 ACCESS_TOKEN

第二步:配置 SSH key

第三步:配置 GITEE_RSA_PRIVATE_KEYGITEE_PASSWORD

配置 ACCESS_TOKEN

配置密钥是因为自动化部署过程,需要 GitHub 权限,没有 token,就没有权限部署

ACCESS_TOKEN 是固定的,名字要和下方脚本使用的名对应上。如果需要改,双方都要改

image-20211101185215129

点击 New repository secret 并进行配置,其中 Name 是 ACCESS_TOKEN,Value 是之前生成的 token

image-20211101185455984

点击 Add secret 即可该密钥添加成功

配置 SSH Key

可选步骤:配置 GITEE_RSA_PRIVATE_KEY 和 GITEE_PASSWORD

::: tip

如果需要 GitHub 的仓库同步到 Gitee 上,则执行这步骤。

下方的自动化文件里,有 GitHub 仓库同步到 Gitee 的实现代码,如果不需要,请注释或者删除。

自动化文件

GitHub Actions 的实现需要一个 yml 文件,在根目录下创建两个文件夹和一个文件:/.github/workflows/ci.yml

image-20211101190242407

myNote 是我的博客根目录。ci.ymlci 可自定义

ci.yml 文件内容以及过程:(我已经写好了注释)

name: CI

#on: [push]

# 在 master 分支发生 push 事件时触发。
on: 
  push:
    branches:
      - master
      
env: # 设置环境变量
  TZ: Asia/Shanghai # 时区(设置时区可使页面中的 最近更新时间 使用时区时间)

jobs: # 工作流
  build: # 自定义名称
    runs-on: ubuntu-latest # 必填,运行在虚拟机环境 ubuntu-latest

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

    steps: # 步骤1
      - name: Checkout # 步骤1,拉取代码
      # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
        uses: actions/checkout@v1 
      
      - 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:执行脚本 deploy.sh
        env: # 设置环境变量,未设置则不运行
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # token 
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }} # 私钥
        run: npm install && npm run deploy  # 执行 deploy.sh 脚本,位于项目根目录

      - name: Push Matser To Gitee  # 步骤4:GitHub 内容同步到 Gitee,同步仓库是 master
        uses: wearerequired/git-mirror-action@master
        env:
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
        with:  # 从源到目的地
          source-repo: 'git@github.com:Kele-Bingtang/notes-blog.git'    #Github 仓库地址
          destination-repo: 'git@gitee.com:kele-bingtang/notes-blog.git'    #Gitee 仓库地址

      - name: Build Gitee Pages # 步骤5:自动部署到 Gitee Pages
        uses: yanglbme/gitee-pages-action@master
        with:
          # 注意替换为你的 Gitee 用户名
          gitee-username: Kele-Bingtang
          # 注意在 Settings -> Secrets 配置 GITEE_PASSWORD
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          # 注意替换为你的 Gitee 仓库,仓库名严格区分大小写,请准确填写,否则会出错
          gitee-repo: Kele-Bingtang/notes-blog
          # 要部署的分支,默认是 master,若是其他分支,则需要指定(指定的分支必须存在)
          branch: gh-pages

::: details 点击打开,一些参数解释

:::

内容的 steps 里的步骤详细如下:(一个 name 代表一步)

  1. 拉取代码。不需要修改
  2. 检查 Node.js 版本,安装指定的 Nodejs 版本,如果版本对了,则会跳过这一步。不需要修改
  3. 执行脚本 deploy.sh。也就是脚本部署的脚本,这个脚本会打包项目到 gh-pages 目录下。需要配置密钥env 读取的就是密钥。上方说过密钥为什么固定是ACCESS_TOKEN这些,因为这里读取的就是这些名字,如需修改,双方都要改
  4. GitHub 仓库同步到 Gitee,同步仓库是 master,如果没有这个打算,则注释或者删除掉,包括第五步
  5. Gitee 获得最新的代码后,不会重新部署新的代码。因为免费的 Gitee Page 需要手动点击更新,而 Github Page 自动😸。所以需要别人写好的 users: yanglbme/gitee-pages-action@master 帮助点击更新

文件内容需要改的是仓库地址,以及 Gitee 用户名

编写提交项目到 master 仓库的脚本,叫 push.sh

#!/usr/bin/env sh

# 本脚本为自动部署的入口脚本,只需执行该脚本,即可实现GitHub的自动部署,以及 push 到 GitHub 的所有文件同步到 Gitee 中

GITHUB_REPO=git@github.com:Kele-Bingtang/notes-blog.git

comment=$1

if [ ! $comment ]; then
comment="更新内容+action自动部署"
fi

git add -A

git commit -m "${comment}"    # $1 是启动该脚本传来的参数,如 sh push.sh hello,其中 hello 就会插入到 $1 处,如果想两个参数,则加 $2

git push $GITHUB_REPO   

在根目录下用 Git Bash Here 打开,并执行该脚本

sh push.sh

一旦该脚本执行成功后,静待五六分钟,会发现 master 主支更新了项目源码,gh-pages 分支更新的项目打包后的代码。

Gitee 对应的仓库 master 主支也更新了项目源码,gh-pages 分支也更新的项目打包后的代码。

自动化文件流程

yml 被执行流程

当第一次提交项目到仓库时,Github 会自动在项目根目录找到 /.github/workflows/ 下的 yml 文件,如 ci.yml,并且执行该 ci.yml 文件;

当第二次乃至后面提交项目到仓库时,Github 判断 ci.yml 内容是否发送变化,没有则执行仓库的 ci.yml 文件,有则先更新文件再执行。

yml 执行流程

当把项目源码推送到仓库的 master 主支时,该 yml 文件开始执行。该文件执行的第三步,就会执行 deploy.sh 脚本部署文件,完成把打包文件提交到 gh-pages 分支下,该文件的第四步,则是把 Github 仓库的代码同步到 Gitee 仓库里,包括 gh-pages分支(双方仓库名字要一致),该文件第五步,则是手动点击了 Gitee 的更新部署按钮。(Gitee 自动更新部署需要 99元/年,没钱只能利用脚本手动点击按钮更新)

问答

Q1 - 能概括一下本内容吗?

可以,概括的过程包括 GitHubGitee,如果只选择一方,选择性另一方忽略即可。

  1. GithubGitee 分别创建一个仓库,并且分别创建 gh-pages 分支,仓库名要一致
  2. 将写好的项目源码提交到 master 主支,打包后的项目文件放到 gh-pages 分支,主支名即 default
  3. 开启 Github PagesGitee Pages,两者都有自己的部署地址,前者网速慢,后者网速快
  4. 实现脚本部署,节省步骤 2 的打包项目提交时间,但是无法节省项目源码提交时间
  5. 首先生成 token,然后生成公钥私钥,公钥分别配置在 GithubGitee 网站上,token、私钥、Gitee 密码都配置在项目仓库上
  6. 配置 yml 文件,在 根目录/.github/workflows/ 下创建 ci.yml 文件,填写好内容
  7. 编写 push.sh 脚本,填写好内容,每次写完文档后执行该脚本,即可实现完成自动化部署

Q2 - 实现自动化部署有多少个脚本?

3个

push.sh:提交源码到 master 主支;

deploy:提交打包文件到 gh-pages 分支;

问题

记录我在部署的过程中遇到的问题,这些问题卡了我挺长时间:

  1. 生成 token 和 Secrets 设置
  2. 配置 .git/conig 内容以及指令一样
  3. .github/**.yml 设计
  4. GitHub 自动部署,而 Gitee 需要手动
  5. shell 脚本设计

更新base

因为一些原因,我把 base 由仓库名改为了 /,从而导致部署后访问的地址带有仓库名失效,正确做法:

ci.yml 文件把原来的仓库地址修改为更新后的地址:

name: CI

#on: [push]

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

jobs: # 工作流
  build: # 自定义名称
    runs-on: ubuntu-latest # 必填,运行在虚拟机环境 ubuntu-latest

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

    steps: 
      - name: Checkout # 步骤1,拉取代码
      # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
        uses: actions/checkout@v1 
      
      - 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:执行脚本 deploy.sh
        env: # 设置环境变量,未设置则不运行
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # token 
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }} # 私钥
        run: npm install && npm run deploy  # 执行 deploy.sh 脚本,位于项目根目录

      - name: Push Matser To Gitee  # 步骤4:GitHub 内容同步到 Gitee,同步仓库是 master
        uses: wearerequired/git-mirror-action@master
        env:
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
        with:  # 从源到目的地
          source-repo: 'git@github.com:Kele-Bingtang/Kele-Bingtang.github.io.git'    #Github 仓库地址
          destination-repo: 'git@gitee.com:kele-bingtang/Kele-Bingtang.gitee.io.git'    #Gitee 仓库地址

      - name: Build Gitee Pages # 步骤5:自动部署到 Gitee Pages
        uses: yanglbme/gitee-pages-action@master
        with:
          # 注意替换为你的 Gitee 用户名
          gitee-username: Kele-Bingtang
          # 注意在 Settings -> Secrets 配置 GITEE_PASSWORD
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          # 注意替换为你的 Gitee 仓库地址,仓库名严格区分大小写,一般地址和仓库名一致,如果地址改了,仓库名不改,要以地址为准(地址仅需后缀,即 https://gitee.com/<username>/xxx 的 xxx 即可)
          gitee-repo: Kele-Bingtang/Kele-Bingtang.gitee.io
          # 要部署的分支,默认是 master,若是其他分支,则需要指定(指定的分支必须存在)
          branch: gh-pages

值得注意的是 51 行的 gitee-repo 不是 Gitee 的仓库名字,而是修改的地址名:<username>.gitee.io

自定义域名

这里以 GitHub 举例,Gitee 同理。

前往你的域名解析处,进入如下配置:

image-20220104164459334

然后进入 GitHub 绑定自定义的域名

image-20220104164839571

::: warning

Gitee 的仓库不要改为 <username>.gitee.io,而是直接改为 <username> 即可。

:::

套用 Gitee 官方的一句话:

如果你想你的 pages 首页访问地址不带二级目录,如ipvb.gitee.io,你需要建立一个与自己个性地址同名的仓库,如 https://gitee.com/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后,就可以以 https://ipvb.gitee.io 进行访问了。