VuePress搭建博客系统
介绍
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。
快速上手
安装nodeJs(省略)
::: warning 注意事项
请确保你的 Node.js 版本 >= 8。
:::
安装yarn
sudo npm install yarn
安装vuePress
# 全局安装
sudo yarn global add vuepress # 或 sudo npm install -g vuepress
# 安装为本地依赖项
sudo yarn add -D vuepress # 或 sudo npm install -D vuepress
创建docs文件夹
sudo mkdir docs
创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md
然后，给 package.json 添加一些 scripts 脚本
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
启动
yarn docs:dev 或 npm run docs:dev
预览
http://localhost:8080 效果如下图
[图片上传失败...(image-11361b-1534493335365)]
要生成静态资源，请运行：
yarn docs:build 或 npm run docs:build
默认情况下，构建的文件会位于 docs/.vuepress/dist 中。官方文档
配置
基本配置
在 docs/.vuepress目录下新建一个config.js,添加配置
module.exports = {
title: 'demo-vuepress',
description: 'VuePress demo',
head: [
['link', { rel: 'icon', href: `/favicon.ico` }]
]
}
更多基本配置见官方文档
::: warning 注意
.vuepress目录不存在可手动创建
:::
目录结构
[图片上传失败...(image-fb3af5-1534493335365)]
导航栏配置
module.exports = {
themeConfig: {
nav: [
{ text: 'home', link: '/' },
{ text: 'js', link: '/js/' },
{ text: 'java', link: '/java/' },
{ text: 'python', link: '/python/' },
// 下拉列表
{
text: 'select',
items: [
{ text: 'select1', link: '/select/select1' },
{ text: 'select2', link: '/select/select2' }
]
},
{ text: 'GitHub', link: 'http://liuyukuai.github.io'}
]
}
}
效果如下图
[图片上传失败...(image-d030b9-1534493335365)]
侧边栏配置
支持侧边栏分组(可以用来做博客文章分类)
module.exports = {
themeConfig: {
sidebar: {
'/js': [
{
title:' 基础',
// true 展开
collapsable: true,
children:[
'/js/basic/js入门1',
'/js/basic/js入门2',
]
},
{
title:'高级',
collapsable: true,
children:[
'/js/senior/js高级1',
'/js/senior/js高级2',
]
},
]
}
}
}
效果如下图
[图片上传失败...(image-e9f1c5-1534493335365)]
更多导航配置见官方文档
部署GitHub
设置base
在 docs/.vuepress/config.js 设置正确的 base。
如果你打算部署到 https://liuyukuai.github.io/，就可以省略这一步，因为 base 默认为 "/"。
如果你打算部署到 https://liuyukuai.github.io/blog/（也就是说你的仓库地址是 https://github.com/liuyukuai/blog），设置 base 为 "/blog/"。
module.exports = {
title: 'demo-vuepress',
description: 'VuePress demo',
head: [
['link', {rel: 'icon', href: `/favicon.ico`}]
],
base: '/'
}
构建脚本
在你的项目中，创建一个有以下内容的 deploy.sh 文件（对高亮行适当注释），然后运行它完成部署：
#!/usr/bin/env sh
# 终止一个错误
set -e
# 构建
npm run docs:build
# 进入生成的构建文件夹
cd docs/.vuepress/dist
# 如果你是要部署到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果你想要部署到 https://<USERNAME>.github.io
git push -f https://github.com/liuyukuai/liuyukuai.github.io.git master
cd -
设置脚本
修改package.json文件，添加
{
"scripts": {
"deploy": "bash deploy.sh"
},
}
完整代码地址：GitHub
更多内容请看官网，官网比较详细。 官方文档
