Build a server free blog and document system based on VuePress and github

Recently, I want to do a project to introduce some of my projects and daily documents, so that the documents can have their own home, https://g.xgss.net After using gitbook, I saw vuepress again and felt it was very useful.

It can be used as blog system, document system, project introduction system and rich plug-ins.

Domain name to use: http://vuepress.xgss.net (github pages).

GitHub address: https://github.com/funet8/vuepress.xgss.net.git

What is VuePress

VuePress consists of two parts: the first part is an open new window, which contains the theme system and plug-in API driven by Vue, and the other part is the default theme optimized for writing technical documents. Its original intention is to support the document requirements of Vue and its subprojects.

In short, it is a tool to quickly build a document site. After simply configuring the functions, all you need to do is write Markdown documents and publish them to github pages

Vuepress official website: https://vuepress.vuejs.org/zh/

1, Installing nodejs and yarn

The author is windows 11 system. Open the official website: http://nodejs.cn/download/ I downloaded node-v16 14.0-x64. MSI is the same as installing ordinary software.

After installation.

Administrator@star-win11 MINGW64 /e/360data/Important data/desktop
$ node -v
v16.14.0
 install yarn
$ npm i yarn -g

2, New github warehouse

Enter github to create a warehouse. You can also fork my warehouse.

3, Clone project

Change the address to your own

# git clone git@github.com:funet8/vuepress.xgss.net.git
 perhaps
# git clone https://github.com/funet8/vuepress.xgss.net.git
# Enter project
cd vuepress.xgss.net

# yarn init # npm init

# yarn add -D vuepress # npm install -D vuepress
 The following information pops up:
yarn add v1.22.17
info No lockfile found.
[1/4] Resolving packages...
warning @vuepress/theme-blog > @vuepress/plugin-pwa > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi'
...
└─ zepto@1.2.0
Done in 113.09s.

4, Start the server locally

# yarn docs:dev # npm run docs:dev
 When the following appears, you can access this computer in the browser IP+Port access
> VuePress dev server listening at http://localhost:8099/

5, Browser access

visit: http://localhost:8080/

Based on IP (replace native IP): http://192.168.1.XXX:8080/

About pictures

VuePress follows the principle of "agreement is better than configuration" and sets the directory structure according to the official website

For the problem of adding static pictures to md, you can apply static pictures in the following way in the md file. The following imgs folder is under the public file, and the directory is as follows

File address: docs/.vuepress/public/images/logo.png

md In the document:
![image](/images/logo.png)

6, Launch the project to github pages

Reference article: https://g.xgss.net/doc/gitbook/Github-Page-my-domain.html

Create a new file CNAME in the project

echo 'vuepress.xgss.net'> CNAME

In github, setting - > pages

Domain name resolution

vuepress.xgss.net domain name CNAME resolves to funet8 github. io

visit: http://vuepress.xgss.net

About automatic package updates

Package the script, and run the script every time the project document is updated

cat deploy.sh
#!/usr/bin/env sh

# Make sure the script throws the errors encountered
set -e

#Submit to github reference
git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:funet8/vuepress.xgss.net.git master


# Generate static file
yarn docs:build

# Enter the generated folder
cd docs/.vuepress/dist

git init
git remote add origin git@github.com:funet8/vuepress.xgss.net.git
git add .
git commit -m "Script auto submit"
git branch -M master
git push --force --quiet "git@github.com:funet8/vuepress.xgss.net.git" master:gh-pages
cd -

About themes and plug-ins

To modify a profile:

 docs\.vuepress\config.js
 Add theme:
 theme: 'vuepress-theme-note',