总字数0
  时长0
  评论数
  总阅读数

生成海报3 

部署

在部署之前，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍...

部署到自己的服务器

如果你需要部署到自己的服务器，我已经安装了宝塔，如果你没安装宝塔，那么请先安装好宝塔面板,链接宝塔linux面板，一键安装LAMP/LNMP/SSL/Tomcat (bt.cn)

image-20211116091011851

image-20211116091139240

image-20211116091358145

image-20211116091544820

image-20211116091648397

image-20211116091821466

image-20211116092045376

image-20211116092136984

image-20211116092213963

image-20211116092350381

问题

  1. 我使用域名或者ip建立站点之后，那个文件夹名并不是aurora.xcye.xyz

    这个文件夹名是根据你ip或者域名命名的

不推荐使用这种方式进行部署，麻烦

GitHub Pages

TIP

Github pages就是会自动将你的静态文件托管在github，然后可以直接使用github提供的一个域名<your github username>.github.io或者使用你的自定义域名就行访问

在使用之前，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍，请先看一下vuepress官方介绍...

在 docs/.vuepress/config.js 中设置正确的 base。

如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

  1. 进入github，新建一个仓库，用于托管npm run build打包之后的HTML文件

    image-20210831133913906

    将docs/.vuepress/dist下的所有文件使用git命令push到该仓库中

    如何push？？

    请点击这里

  2. 进入settings-->pages

    进行第二步之前，表示你已经将dist目录中的文件，已push到此仓库中

    image-20210831134813016

    image-20210831134956617

    然后你就可以点击上面的那个连接，进行访问了，现在就已经将打包后的静态文件部署到github page

    哪个链接??

    image-20211116103319349

TIP

第一次使用github pages，不推荐直接使用自定义域名，不推荐直接使用自定义域名，不推荐直接使用自定义域名，请先使用github提供的域名，能正确的访问到博客页面之后，再改成自定义域名

deploy.sh

下面的内容，请确保你已经能使用github提供的地址或者自定义域名访问到博客页面之后，在使用下面这种比较快速的方式

在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）

#!/usr/bin/env sh

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

# 生成静态文件
npm run docs:build

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

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
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

下面这个是使用自定义域名进行部署的deploy.sh文件

set -e

cd docs/.vuepress/dist
echo 'blog.cco.vin' > CNAME

git init
git add -A
git commit -m 'deploy'

git push -f https://github.com/qsyyke/blog.git master:gh-pages

cd -
1
2
3
4
5
6
7
8
9
10
11
12

TIP

请自己看一下自己的github仓库地址，更改上面对应的值，比如git push -f https://github.com/qsyyke/blog.git master:gh-pages的地址，还有分支等

然后进入到package.json文件中，输入以下内容到scripts

"deploy": "bash deploy.sh"
1

请注意看一下这个.sh文件名是不是deploy.sh，如果不是，请改一下"deploy": "bash deploy.sh"，将后面的deploy.sh改成自己的.sh文件名就可以

改变package.json文件之前?

image-20211116104440846

改变package.json文件之后

image-20211116104605535

为何你的package.json和我的不一样，package内容不需要和我的一模一样...

然后你现在就可以运行npm run deploy命令，然后就会依次执行npm run build,进入dist内git add . && git commit -m "..." && git push ... ，之后如果一切正常的话，你就可以在你github对应分支处看到dist目录下的所有内容

不能直接在比如vscode的终端处运行npm run deploy，否则会出现下面错误，执行此命令，你需要在cmd或者git的Git Bash Here

错误信息

image-20211116105934737

部署到自定义域名

部署到自定义域名也是一样的方法，只是需要在github的settings-->pages中，添加自定义域名就可以

步骤

  1. 到阿里云，腾讯云，或其他服务商处，申请一个域名，如果使用国内服务器，域名需备案

    如何申请?点这里

  2. 进入到仓库中的Setting ---> Pages

    image-20210831135358064

  3. 如果出现下面这个，那就证明你没有为这个自定义域名，添加一个CNAME解析

    image-20211116110931450

    就表示，该newblog.cco.vin域名并没有添加一个CNAME解析，进入到域名解析处

    image-20210831135743656

    对newblog添加CNAME记录，指向<user>.github.io.就可以了

    我上面的这个域名解析面板在哪?

    我使用的是腾讯云，所以你进入腾讯云，点击对应域名后面解析，就会出现这个，如果你使用的是其他域名服务商，请点击下面链接，改一下服务商

    点击这里，记得在搜索框中改一下内容

image-20211116111632322

Github Actions完成自动部署

如何使用Github Actions进行自动部署，请查看我自己写的文章，如果你觉得不够详细的话，可以再在搜索引擎中，搜索vuepress github actions关键字

推荐使用Github Actions完成自动部署，你只需要将站点中，除node_modules,docs/.vuepress/.cache,docs/.vuepress/.temp,docs/.vuepress/dist外的内容，push到你的仓库，然后简单设置下，就可以自动在github中，下载依赖，已经运行npm run build，从而完成自动部署，步骤为

获取token

image-20211026232416988

image-20211026232442304

image-20211026232532647

image-20211026232831517

image-20211026232853598

image-20211026232948093

上传到github

image-20211026233551543

TIP

这里你只需要上传package.json和docs就可以了，你也可以排除docs/.vuepress/.cache,docs/.vuepress/.temp,docs/.vuepress/dist文件

image-20211026233853901

然后将下面的内容，复制替换下图中的内容

image-20211026234059132

name: vuepress-deploy
on:
  push:
    branches:
      - main #push到哪个分支时触发自动部署，推荐main
    paths-ignore:
      - .gitignore
      - .mergify.yml
      - LICENSE
      - README.md
      - renovate.json
jobs:
  build-and-deploy:
    strategy:
      matrix:
        node:
          - 'lts/*'
        platform:
          - ubuntu-latest
    name: '${{matrix.platform}} / Node.js ${{ matrix.node }}'
    runs-on: ${{matrix.platform}}
    steps:
    - name: Checkout
      uses: actions/checkout@main
      with:
        persist-credentials: false
        fetch-depth: 0
    - name: Use Node.js
      uses: actions/setup-node@main
      with:
        node-version: ${{ matrix.node }}
    - name: Install dependencies
      run: npm install #运行安装依赖和主题
    - name: Build VuePress
      run: npm run build
    - name: Deploy to Pages
      env:
        TZ: Asia/Shanghai
      run: |
        cd docs/.vuepress/dist
        git config --global init.defaultBranch master
        git init
        git config user.name $GITHUB_ACTOR
        git config user.email ${{ secrets.GIT_EMAIL }}
        git add .
        git commit -q -m "Deploying to gh-pages from @ $GITHUB_SHA in $(date +"%a %b %d %T %Z %Y")"
        git push -f -q https://$GITHUB_ACTOR:${{ github.token }}@github.com/$GITHUB_REPOSITORY.git master --tags
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
43
44
45
46
47

设置Actions secrets

image-20211026234643018

image-20211026234710492

image-20211026234805318

然后你在本地或者github中，随便在main分支下，修改一个文件的内容，然后git commit...，git push ...后，你便可以看到已经开始运行了

image-20211026235130337

image-20211026235518279

只有这个状态变成绿色之后，才便是部署成功，如果红色，你可以看一下报错信息

你可以在master分支看一下，build之后的文件

image-20211026235929559

image-20211027000105500

image-20211027000121171

推荐阅读

点击评论