使用vuepress搭建静态博客的示例代码

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

{ "scripts": {  "start": "vuepress dev docs",//运行  "build": "vuepress build docs"//打包 }}

.vuePress ---public ---theme ---config.js

.docs ---.vuePress ---about  ---README.md  ---first.md  ---seconde.md ---study ---problem

module.exports = { //网站标题 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: 'http://blog.csdn.net/weixin_38318244/'},   {text: 'Github', link: 'https://github.com/momo-0902'}  ],  // 侧边栏配置,侧边栏组，不同（导航）页面对应不同的侧边栏  // 以对象形式配置，前边的key为nav处的路径,后边提供一个数组作为此侧边栏中的子标题  sidebar: {   '/problem/': [    // ''空字符串代表主页，显示README.md中的内容    '',    ['201709', '201709'],//使用数组为侧边栏起别名，前边是md名称，后边是链接显示的文字    ['201710', '201710'],    ],   '/study/': [    '',    ['axios', '1.axios'],    ['document', '2.document'],    ]  },  // 这是嵌套标题链接，自动显示当前激活（导航）页面标题的链接，即显示深度（h1-h6的深度）  sidebarDepth: 1 }}

---// 使用默认主题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 ---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/distgit init git add -A git commit -m ‘deploy'

git push origin master

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages(git push -f git@github.com:momo-0902/wiki.git master:gh-pages)