This is the 17th day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

First of all, prepare your VuePress project before you can say deploy. It’s not impossible to deploy the code manually, but after you push it, you have to do it again when you go to GitHub Pages. So it’s easier to automate the deployment of GitHub Pages

Open making Pages

Open Github Pages and leave it there.

The default is master, so if you save it, it’s not going to work, so you have to do the rest!

steps

Create Actions

1. Select New Workflow from the Actions of the blog repository

2, choose Deno first on the line

3, you can customize the name

4. Write the following code in the file

name: vuepress-deploy The name here is the name of the file you just customized
on:
  push:
    branches:
      - master      
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: ['lts/fermium']
    steps:
      - name: Checkout
        uses: actions/checkout@main
        with:
          ref: 'master'
          persist-credentials: false
          fetch-depth: 0
        env:
          TZ: Asia/Shanghai
      - name: Use Node.js The ${{ matrix.node-version }}
        uses: actions/setup-node@main
        with:
          node-version:  The ${{ 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 "zchaoGe" git config user.email "${{ secrets.GIT_EMAIL }}" git add . git commit -m "Deploying to gh-pages from @ $GITHUB_SHA in $(date + "% d % % m Y year month day % T % Z") "git push -f https://zchaoGe:$@ github.com/zchaoGe/blog.git {{secrets. The ACCESS_TOKEN}} master:gh-pagesCopy the code

Here we need to be aware of the git operations that follow

Secrets.GIT_EMAIL and secrets.ACCESS_TOKEN are used. So let’s create these two things

Create GIT_EMAIL and ACCESS_TOKEN

Select Setting in the repository, then Serect, then New

Enter GIT_EMAIL for Name (the Name can be customized, of course), value to the email address where you committed git, and then add

Here we first generate a token and then go back and create the Serect

Create a GitHub Token with repo permission

Here we fill in the name and check the Repo and Workflow options, and then click the Generate Token button directly to Generate a token, as shown below:

Note:

That in English means:

Be sure to copy your personal access token immediately. You will never see it again!

Well, in case it doesn’t, just regenerate it.

At this point, we have generated the token, go back to create Serect. When filling in the token, be careful not to fill in too many Spaces, otherwise the deployment will report an error.

Modifying a Configuration File

Here modify the configuration file. Vuepress /config.js to add the base configuration

module.exports = {
  // base: '/', // format: '/< repository name >/', default: '/'
  base: '/blog/'.theme: 'vdoing'.// Use the NPM package theme
  // theme: require.resolve('.. /.. /theme-vdoing'), // Use the local theme

  title: "Title".description: 'description'.markdown: {
    lineNumbers: true.// Line number
  },

  head,
  plugins,
  themeConfig,
}
Copy the code

Perform the Actions

Before you go ahead, make sure you haven’t missed any of the steps above. Also make sure the repository is up to date because you have modified the config.js configuration file.

If an error occurs during execution, rectify the error first and retry. Success is the green tick.

Final step: Change the Github Pages branch to gh-pages

Visit Github Pages, success!

From now on we’ll just push the code to the Github repository, the Actions will be automatically executed, and the Github Pages will be updated.