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.
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 email@example.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 > @firstname.lastname@example.org: Switch to 'npm install joi' ... └─ email@example.com 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
Based on IP (replace native IP): http://192.168.1.XXX:8080/
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
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 firstname.lastname@example.org: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 email@example.com:funet8/vuepress.xgss.net.git git add . git commit -m "Script auto submit" git branch -M master git push --force --quiet "firstname.lastname@example.org: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',