使⽤vuepress搭建静态博客的⽰例代码
什么是vuePress
vuePress是以vue驱动的主题系统的简约静态⽹站⽣成⼯具（拥有⾃⼰的默认主题）。
veuPress由vue,vue-router,webpack驱动的单页⾯应⽤，每个markdonw⽂件都使⽤markdonw-it编译为html⽂件，然后作为vue组件的模板来处理。
VuePress 有很多优点：
界⾯简洁优雅（个⼈感觉⽐ HEXO 好看）
容易上⼿（半⼩时能搭好整个项⽬）
更好的兼容、扩展 Markdown 语法
响应式布局，PC端、⼿机端
Google Analytics 集成
⽀持 PWA
安装vuePress
全局安装
在此⽅式中，只是要项⽬根⽬录创建了⼀个README.md⽂件，直接执⾏访问的就是此⽂件
npm install -g vuepress
# 创建⼀个 markdown ⽂件
echo '# Hello VuePress' > README.md
# 开始编写⽂档
vuepress dev
# 构建
vuepress build
在已有项⽬中安装
# 安装为本地依赖项
npm install -D vuepress
# 创建⼀个 docs ⽬录
mkdir docs
# 创建⼀个 markdown ⽂件
echo '# Hello VuePress' > docs/README.md
# 开始编写⽂档
npx vuepress dev docs
还可以在package.json中添加js脚本，官⽹⽅式不好写，我们直接⽤常⽤的⽅式
{
"scripts": {
"start": "vuepress dev docs",//运⾏
"build": "vuepress build docs"//打包
}
}
使⽤vuePress搭建静态博客
接下来就是配置了，我会直接把我的配置⽂件贴上来，我们先看结构
博客结构
博客结构分为主页，导航栏，侧边栏
在.docs⽬录下新建⼀个.vuePress⽂件，在此注意，搭建博客过程中所有的配置⽂件以及内容⽂件、主题等都放在此⽬录中
在.vuePress⽂件夹下新建三个⽂件,public⽤来放图⽚等静态⽂件，theme中放到博客⽤到的主题，config.js中存放所有的配置
.vuePress
---public
---theme
---config.js
在.docs⽂件夹下新建⼏个模块⽂件夹，⽐如我的就分为学习笔记、问题记录、关于我等，每个⽂件夹下再新建md⽂件
vuePress会⾃动把README.md设置为导航的主页，所以如果我们需要主页就先建README.md，再新建first.md,seconde.md 等⽂件作为侧边栏要显⽰的⽂件
.docs
---.vuePress
---about
---README.md
---first.md
---seconde.md
---study
---problem
具体配置
最重要的config.js配置
在此值得注意的是，主题配置不只是简单的样式配置等，其中包括导航与侧边栏部分的配置，此处配置参见官⽹导航栏”默认主题配置“
//⽹站标题
title: '霍梦林的个⼈博客',
// 主页描述
description: 'Just playing around',
// 要部署的仓库名字
base: '/',
dest: './docs/.vuepress/dist',
// 主题配置
themeConfig: {
// 导航配置
nav: [
// text为导航栏显⽰⽂字，link为路径，即⽂件夹名字，注意不要丢了名字前后的'/'
{text: 'Home', link: '/'},
{text: 'About', link: '/about/'},
{text: 'Problem', link: '/problem/'},
{text: 'Study', link: '/study/'},
{text: 'CSDN', link: 'blog.csdn/weixin_38318244/'},
{text: 'Github', link: 'github/momo-0902'}
],
// 侧边栏配置，侧边栏组，不同（导航）页⾯对应不同的侧边栏
// 以对象形式配置，前边的key为nav处的路径，后边提供⼀个数组作为此侧边栏中的⼦标题
sidebar: {
'/problem/': [
// ''空字符串代表主页，显⽰README.md中的内容
'',
['201709', '201709'],//使⽤数组为侧边栏起别名，前边是md名称，后边是链接显⽰的⽂字
['201710', '201710'],怎么搭建个人博客
],
'/study/': [
'',
['axios', '1.axios'],
['document', '2.document'],
]
},
// 这是嵌套标题链接，⾃动显⽰当前激活（导航）页⾯标题的链接，即显⽰深度（h1-h6的深度）
sidebarDepth: 1
}
}
⽹站主页配置，即.docs下README.md的配置
---
// 使⽤默认主题
home: true
// 主页头像
heroImage: /me.jpg
// '开始学习'快捷按钮
actionText: Get Started →
// 快捷按钮跳转路径
actionLink: /about/
features:
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. - title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present momo
---
[[toc]]
:tada: :100:
啦啦啦德玛西亚
啦啦啦啦撸啊撸啊
<!-- ![aaa](~@alias/me.jpg) -->
这⾥使⽤了 markdown 的拓展 `[[toc]]`
## 这⾥是momo的博客
### 项⽬中遇到的问题
### 学习笔记
### csdn
### github
[关于我](/about/)
theme主题配置
项⽬中只是把vuePress所有的主题配置都拷贝到了本项⽬中，项⽬结构如下：
theme
---styles
---theme.styl
---code.styl
---Home.vue
---Layout.vue
---until.js
打包部署
构建
/
/ 此处构建⽣成路径为./docs/.vuepress/dist，由config.js中配置： dest: ‘./docs/.vuepress/dist',
vuepress build docs
导航到构建输出⽬录
// config.js中dest配置的输出⽬录是哪此处就cd进⼊哪，所有的git操作（包含初始，添加，提交等）都在此⽬录下
cd docs/.vuepress/dist
git init
git add -A
git commit -m ‘deploy'
推到你的仓库
如果是部署到<username>.github.io的主页上
git push origin master
这时可能出现问题
fatal: ‘origin' does not appear to be a git repository
以及fatal: Could not read from remote repository.
解决办法：执⾏git remote add origin git@github:<USERNAME>/<REPO>.git
如果是部署到分⽀上
git push -f git@github:<USERNAME>/<REPO>.git master:gh-pages
(git push -f git@github:momo-0902/wiki.git master:gh-pages)
可在package.json中配置脚本运⾏
npm start 运⾏项⽬
npm run build 打包
npm run deploy 部署
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。