I believe that most programmers will want to build their own blog, put some technical blogs, reading notes, this matter is not about the technology stack and reading volume, just want to completely rely on their own to build a private space, can say what they want to say.

Why blog?

Do programmer first, must have programmer consciousness or feelings? Make some of your own contributions to open source, but not for free.

Then, there are many gods and giants on the way to help solve problems. On the one hand, they are grateful. On the other hand, they hope others can avoid the pit they stepped on.

Then when I went to school, I was inspired by a teacher. When I could explain a problem to others, I really mastered this knowledge point. Knowledge needs input and output, and in the process of output, I could thoroughly understand it. And because the human brain is a “relational database,” meaning that everything you remember depends on what we already have in our brain, it also helps to fragment the cascade and resonance of knowledge in output.

Secondly, it is very important to improve your language organization ability and logical thinking ability. Whether it is writing a blog, making a vlog, or preparing for a wedding or arranging a trip, you need to build a frame in your mind, and then enrich and display it, and gradually enrich and enrich it.

Finally, communicating with others is a very happy thing in life. It may be difficult to find like-minded people on weibo and moments, but trying a blog may bring different feelings.

Hexo

Hexo is very, very useful blog build tools, simple, portable, theme, whether you like anime, wind and mechanical wind, you can find the theme of the desired, 18 years in Hexo build a web site, very convenient also, but the downside is too fancy, may grow up like contracted style.

vuepress

Document Address:

vuepress.vuejs.org/zh/

Vuepress is a vuUe-based static website generator. You can use Markdown to write content (documents, blogs, etc.) and then Vuepress will help you generate a static website to display them.

It was the vUE team first for vUE and vUE ecology project documentation requirements, because its simplicity and convenience is more and more developers used as documents, blogs to use.

vuepress-theme-vdoing

Vuepress-theme-vdoing is a simple and efficient vuepress knowledge management & blog theme.

Official Document Address:

Doc.xugaoyi.com/pages/52d5c…

Making address:

Github.com/xugaoyi/vue…

Installation and use

The address of the document is above, the specific API will not be moved to make up the number of words, there is no meaning

# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency
npm install # or yarn install

# develop
npm run dev # or yarn dev
Copy the code

Function is introduced

In addition to providing a relatively simple and efficient blog, this topic has a personalized, fragmented, structured management form, through the tag and file hierarchy, automatic generation of sidebars, directory pages, index pages, bread crumbs, easily build a structured knowledge base.

directory

The corresponding Pages directory is generated by the number of the file directory

Config.js to configure the navbar menu

gitalk

Gitalk, a comment plugin based on Github Issue and Preact.

Xugaoyi.com/pages/1da0b…

vuepress-plugin-meting

A blog player, a little chicken ribs, but also a little interesting, you can put some of their favorite music.

Install the

yarn add vuepress-plugin-meting -D
Copy the code

config.js

Plugins: {// "meting": {meting: {// "meting": {// "meting": {// "meting": {// "meting": {// "meting": {// "meting": {// "meting": { 'https://music.163.com/#/my/m/music/playlist?id=xxxxxxx', // NetEase -> NetEase Server: "NetEase ", // Playlist type: "Playlist ", // playlist ID mid:" XXXXXXXX ",}, aplayer: {lrcType: 3, // volume: 0.15, // Enable mini mode mini: Autoplay: true},},}Copy the code

Deployment and Build

github.io

Github. IO is a github based repo management system that can be used as a blog container. Github Actions, in particular, can be packaged and deployed automatically, which is very convenient.

First of all, we need to create a new warehouse, the name of which is generally used (.github. IO).

For example, the name of my warehouse is:

norwegianwood1208.github.io/
Copy the code

Then set branches and folders in Settings/Pages of the repository

The actions of automation

First, set the token in Settings/Secrets of the repository.

https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
Copy the code

Note that the token name must be the same as the name of the environment variable in the script below

Then click actions for the repository to create the automation script

Name: CI # fires when a push event occurs on the master branch. On: Push: Branches: -Master Jobs: # Workflow build: runs-on: Ubuntu-latest # Run in the virtual machine environment Ubuntu-Latest Strategy: matrix: Node-version: [10.x] steps: - name: Checkout # Step 1 uses: actions/checkout@v1 # The format is userName/repoName. Function: check out the warehouse, get the source code. Official actions library: https://github.com/actions - name: Use Node. Js ${{matrix. The Node - version}} # 2 USES step: Actions /setup-node@v1 # Install nodejs with: node-version: ${{matrix.node-version}} # version-name: Github: ${{secrets.ACCESS_TOKEN}} # toKen private variable coding: ${{secrets.coding_token}} # coding private token run: NPM install && NPM run deploy # Add "deploy": "bash deploy.sh" to # package.jsonCopy the code

Automated deployment scripts

First add a command to run the script in package.json:

"deploy": "bash deploy.sh",
Copy the code

The deploy. Sh file

#! /usr/bin/env sh # make sure the script generates an error set -e # generate a static file NPM run build # enter the generated folder CD docs/.vuepress/dist # deploy to github pages echo 'https://github.com/NorwegianWood1208/NorwegianWood1208.io' > CNAME if [ -z "$GITHUB_TOKEN" ]; Then MSG = 'deploy' [email protected]: NorwegianWood1208 / NorwegianWood1208 lot. IO else MSG = 'from the lot The actions of the automatic deployment 'git config githubUrl = https://norwegianwood1208.github.github.io/ - global user. The name "NorwegianWood1208" git config --global user.email "[email protected]" fi git init git add -A git commit -m "${msg}" git push -f $githubUrl Github gh-Pages branch cd-rm-rf docs/.vuepress/distCopy the code

Run the command to automate package deployment

The Github SSH Key may be required at deployment time, but the following article eliminates the need to enter the Key every time

https://xuanwo.io/2015/02/07/generate-a-ssh-key/
Copy the code

Open in browser:

norwegianwood1208.github.io/
Copy the code

The last

Baidu seo does not support GitHub. Those who want to do SEO can put their codes on Tencent’s Coding Pages.