vuepress combines GitHub pages to create its own blog site
Vuepress Chinese official document
1. Preliminary work
1. Create an empty folder to execute
npm init -y
2. Installation dependencies
npm install -D vuepress
3. Configure package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
4. Run the following command to start writing
npm run docs:dev
2. Configuration items
Project directory
1. Create a new docs folder under the project root directory
2. Create a new file under the docs folder. vuepress folder
Create a new public folder under the .vuepress folder for static resources
Two pictures under the public folder will be used in the configuration below
favicon.ico
home.png
3. Create a new config.js under the .vuepress folder to configure the website
module.exports = {
title: '网站标题',
// base: 网站域名前缀对应自己的GitHub仓库名称
// 一定要以/开头结尾，不然会出现资源找不到
base: '/blog/',
port: 8888, //
description: 'description',
markdown: {
lineNumbers: true
},
// 默认语言
locales: {
'/': {
// 将会被设置为 <html> 的 lang 属性 （博客文章底部更新时间也会修改为中文时间）
lang: 'zh-CN'
}
},
themeConfig: {
lastUpdated: '上次更新', // 博客文章底部添加更新时间
serviceWorker: {
updatePopup: true,
updatePopup: {
message: '有新的内容',
buttonText: '点击更新'
}
},
sidebarDepth: 2, // 侧边栏深度
displayAllHeaders: true,
// 导航栏
nav: [
{
text: '首页', link: '/' },
{
text: '我的csdn', link: 'https://blog.csdn.net/qq_39953537' },
{
text: 'github', link: 'https://github.com/l-x-f' }
],
// 侧边栏
sidebar: [
// 数组配置第一个参数是路径 /home/ 指的是 docs 文件夹下的home文件夹下的README.md
// 第二个参数是侧边栏标题
['/home/', '欢迎页'],
// 对象配置： 是两级目录 title 是指侧边栏一级标题
// collapsable: false会让这个二级侧边栏一直展开
// children里的字段又是一个数组配置，参数含义如上
title: 'vue',
collapsable: false,
children: [
// 路径 /vue/function-api 指的是 docs 文件夹下的vue文件夹下的function-api.md
['/vue/function-api', ' vue Function API'],
['/vue/amap', 'vue amap']
]
}
]
},
dest: './dist', // 打包文件夹
head: [
[
'link',
{
rel: 'icon',
href: '/favicon.ico' // 网站的icon 已经放到public文件夹下
}
]
]
};
See the official website for the meaning of other uncommented configuration items above
Vuepress basic configuration official website link
3. Create a new file README.md under the docs folder to configure the website homepage
---
home: true <!--home: true 表示这是首页 -->
heroImage: /home.png <!--heroImage:表示图片地址 上文提到已放到public文件夹下-->
actionText: 快速上手 → <!--actionText:按钮文字 -->
actionLink: /home/ <!--按钮跳转链接 -->
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue 驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
The effect is shown in the figure
Three. Deployment
Reminder: The following warehouse addresses are replaced according to the warehouse built by yourself
1. Configure your own GitHub pages
Create a new warehouse such as blog (Warehouse address: https://github.com/lxf/blog)
As shown
Click on the settings to find the picture
Select master branch as shown
2. Create a new deploy.sh in the project root directory
#!/usr/bin/env sh
success="更新成功"
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd ./dist
git init
git add -A
git commit -m 'deploy'
# 自己的仓库地址，blog这个仓库名称和config.js里的base:/blog/保持一致
git push -f https://github.com/l-x-f/blog.git master
echo $success;
# 回到之前的文件目录
cd -
3. Package and go online
to run under the project root directory
./deploy.sh
4. Then you can see your website at https://lxf.github.io/blog/
5. If you want to build the website in the root directory of your github pages https://lxf.github.io , your warehouse name must be l-x-f.github.iolike this, .github.iowith the name of your git account in front, and the configuration file config of vuePress. js inside the base was changed base：'/’to.