1. Introduction to VuePress
VuePress is composed of two parts: the first part is a minimalist static website generator, which contains a theme system and plug-in API driven by Vue, and the other part is a default theme optimized for writing technical documents. It was originally born to support Documentation requirements for Vue and its subprojects.
Every page generated by VuePress comes with pre-rendered HTML, so it has very good loading performance and search engine optimization (SEO). At the same time, once the page is loaded, Vue will take over the static content and convert it into a complete single page application (SPA), and other pages will be loaded on demand only when the user browses to it.
2. Build a blog quickly
2.1 Local blog building commands
a.npm blog building
npm install @vuepress-reco/theme-cli -g #插件安装
theme-cli init hch-blog #项目初始化
cd hch-blog
npm install #安装依赖
npm run dev #项目运行
npm run build #项目构建
b. Yarn blog construction
npm install -g cnpm --registry=https://registry.npm.taobao.org #安装淘宝镜像
cnpm install -g yarn #安装yarn
yarn global add @vuepress-reco/theme-cli #插件安装
theme-cli init hch-blog # init #项目初始化
cd hch-blog
yarn install #安装依赖
yarn dev #项目运行
yarn build #项目构建
Project operation effect:
3.1.2. Code Push to Code Cloud (Gitee)
a.Gitee create project
Find hch-blog\docs.vuepress\config.js and add a line of code
base: '/hch-blog/' , #设置站点根路径
b. Push the code to Gitee
git clone https://gitee.com/huangchunhongzZ/hch-blog.git #克隆空项目到本地
cp hch-blog\public hch-blog #项目public是打包后的资源，复制打包的资源到hch-blog下
cd hch-blog
git status #git 状态
git add . #添加当前目录所有文件
git commit -m"init blog" #提交文件
git push #推送代码
history #git操作历史 `
c. Set up automatic deployment deploy.sh
Create deploy.sh and add the following code
Run bash deploy.sh to package and push the code to the gitee warehouse
cd hch-blog # 打开项目
yarn build # 生成静态文件
git status #git 状态
git add . #添加当前目录所有文件
git commit -m "自动部署" #提交文件
git push #推送代码
history #git操作历史
d. Set up Gitee Pages
Enter Gitee's hch-blog warehouse, select "Service" -> "Gitee Pages
No need to fill in any content, just click "Start".
2.2. Official document tutorial
The official tutorial of the VuePress link is actually very detailed
cd myblog
npm init -y
npm install -D vuepress #本地依赖安装
mkdir docs #新建一个 docs 文件夹，此目录保存markdown文章
npm run docs:dev #启动项目
npm run docs:build #打包项目 `
The directory structure of the final project is as follows:
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
For more details, please refer to the official document. https://link.zhihu.com/?target=https%3A//vuepress.vuejs.org/zh/guide/getting-started.html
Three, finally
With the rapid development of front-end technology, blog construction has become easier. Now you only need to register an account on the code hosting website of Github/Gitee/Coding, create a code warehouse, and then publish your own static blog website through these platforms.
reference:
1. Vuepress quick start: https://link.zhihu.com/?target=https%3A//vuepress.vuejs.org/zh/guide/getting-started.html
2.vuepress-theme ：https://link.zhihu.com/?target=https%3A//github.com/topics/vuepress-theme
3.awesome-vuepress ：https://link.zhihu.com/?target=https%3A//github.com/meteorlxy/awesome-vuepress
4. vuepress blog theme—vuepress-theme-reco: https://vuepress-theme-reco.recoluan.com/views/1.x/
5.vuepress-theme-blog ： https://link.zhihu.com/?target=https%3A//vuepress-theme-blog.ulivz.com/
6. VuePress quickly stepped on the pit: https://link.zhihu.com/?target=https%3A//juejin.im/entry/5ae178ebf265da0b84552035