Recently, I want to put my Github into good business, so I started the first step of business: set up a blog!

I spent half a day building my blog: gelxgx.github. IO /blog/

  • Create a blog repository

  • Set the dead simple pages

  • Clone the VitePress template

  • Modify blog content and submit code

  • Done!

This seems to be a relatively simple process, but as the first time to build, I stepped on a lot of construction process, plug-in use pit, write a blog summary record

1. Create a blog repository

Create a new repository

I checked an extra README file

A blog repository is created

2. Set GitHub Pages

Go to the blog repository, select Settings at the top, and select the Pages option

Set up the corresponding Source and the directory address to read, click Save, and wait for a moment

Github. IO is usually a domain name starting with github

Click and you will enter your own blog page!

3. Deploy vitePress project

Here I use a reading source code with the group ji little sister project to clone, thank you very much to the little sister ~ there has been a good theme, only need to modify the content, of course, if you are interested in it can also build their own blog theme from 0

Jexlau.github. IO /blog/

Cloning Project:

Git clone https://github.com/JexLau/blog.git CD blog # # installation depend on the yarn to start the server locally yarn dev # building static file >. Vitepress/dist yarn buildCopy the code

Now that you have a template for your blog, you need to modify the content of your blog

  • Vitepress is the configuration of the project page

  • For storing your own MD documents in docs

  • The label used to store the navigation bar in more

In addition, Gitalk comment function is built into the project. There will be some holes in the configuration of this part, which will be discussed later

The most important step! Modify the address of the packaged product deployment

Go to the deploy.sh page and change the address of git push -f to the repository address under your own name

After configuring the page and article content, submit the code to the Origin Main branch, and finally deploy the blog using local NPM run deploy

If the MacOS OS is used, command not found: deploy.sh may be displayed when you run the command. In this case, you can enter package.json and change the directory to./deploy.sh to locate the package in the current directory.

If no Permission is displayed, run the chmod 777 deploy. Sh command to deploy the blog project and then run the NPM run deploy command

After the deployment is complete, we need to go to settings-pages-source again, change the blog read path Branch to gh-pages, click Save to complete the deployment of the page, and then enter the blog again to display the perfect blog

4. Potholes

This part of the pit is mainly Gitalk configuration pit, mainly manifested as:

  • Field configuration during initialization
  • Free configuration

4.1 configuration Gitalk

Gitalk deposited in the project. Vitepress/theme/components/Comment. Vue

Go to the link on the right to apply for an OAuth Application that allows the application to operate your GitHub account, github.com/settings/ap…

Application name: required; OAuth’s name: Homepage URL: required; your Application URL: required; This parameter is optional. OAuth authorizationCallback URL: Mandatory. The URL of this file is returned after the Authorization is successful.

Click Register Application to Register

After successful registration

Copy your clientID and build and copy a clientSecret

The main parameters are as follows:

var gitalk = new Gitalk({ clientID: '', // GitHub Application Client ID clientSecret: '', repo: Admin: ['gelxgx'], // If there are more than one people in the store, write the id here as an array: DecodeURI (window.location.pathname), // proxy to mark which page the comment is on: / / avoid cross domain 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token'})Copy the code

Please contact @xxx to initiate creation

The solution is as follows:

Enter the repository for setting issues, create an issue, and set two locations:

  • Gitalk
  • id(window.location.pathname)

Refresh the page again, and the page is displayed normally

5. Automate deployment

Every time I submit a blog update, I need to do a manual NPM run deploy locally to package and deploy the page. This is too much trouble, so I decided to do an automation:

  • When the code is submitted, it is automatically packaged
  • Automatically commit the packaging artifacts for deployment togh-pages

This part requires the Action capability to invoke to the repository

5.1 create Action

Go to the blog repository, click on Aciton and select New WorkFlows. Instead of selecting a template, I set up a Workflow Yourself

Start by giving your pipeline a nice name and copy the following code into the configuration

PushDocs name: pushDocs on: // Configure the execution of push: branches: -main jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: Ubuntu -latest // Steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - name: # Checks-out your repository under $GITHUB_WORKSPACE /checkout@main // Use node.js ${{matrix.node-version}} uses: Actions /setup-node@main with: node-version: ${{matrix.node}} // Execute Install - name: Install dependencies run: NPM install // Run the package. Name: Build VuePress run: NPM run Build. Name: Deploy to Pages run: | cd .vitepress/dist git init git config user.name "gelxgx" git config user.email "${{ secrets.GIT_EMAIL }}" git add -A git commit -m 'deploy' git push -f https://gelxgx:${{ secrets.ACCESS_TOKEN }}@github.com/gelxgx/blog.git master:gh-pages  cd -Copy the code

The deployment process requires secrets.GIT_EMAIL and secrets.ACCESS_TOKEN

5.1 generate secrets. GIT_EMAIL

Enter the warehouse Setting->Secrets->new

Set name to GIT_EMAIL and value to the account to be submitted

5.2 generate ACCESS_TOKEN

Enter the GitHub token as shown below and generate an indefinite token with Repo&Workflow checked

Click Generate. After the generation is completed, the configuration of pipeline can be completed in the same way as New Secret

At this point, we only need to submit the code to the blog once, enter the Action to view the execution process ~

If a red exclamation mark appears, it indicates that the configuration is incorrect. Click enter to see the specific error message

6. Summary

As a chetu boy, I never paid much attention to my GitHub before. Recently, I changed new equipment and got a ladder, and planned to migrate all my deposits to GitHub

So I spent half a day to build the blog, which was enough for [DOGE].

In the future, we plan to deploy automation projects to make the synchronization of blog posts more efficient

Special thanks to:

Gitalk tutorial: segmentfault.com/a/119000001…

Gitalk 英 文 名 称 :

Gitalk error solution: blog.csdn.net/liu13403083…

Automated deployment: juejin.cn/post/699719…