vuePress搭建属于自己的站点。

Vuepress介绍

官网：https://vuepress.vuejs.org/

类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。

Vuepress特点

响应式,也可以自定义主题与hexo类似
内置markdown(还增加了一些扩展),并且可以在其使用Vue组件

安装

初始化项目

npm install -g vuepress

创建一个MarkDown文档

echo '# Hello VuePress' > README.md

编写文档

vuepress dev

编译文档

vuepress build

结构目录

├── docs
│   ├── .vuepress
│   │   ├── public
│   │   └── config.js
│   │ 
│   └── README.md
│ 
└── package.json

配置config.js文件

module.exports = {
  title: "这里是标题",
  description: "每天都有进步就是最大的进步。",
  base: '/', // 项目根路径
  dest: '/dist/', // 打包后的文件夹路径
  // head 标签中的额外内容
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }] // 这个是标签页 logo
  ],
  // 语言配置
  locales: {
    // 键名是该语言所属的子路径
    // 作为特例，默认语言可以使用 '/' 作为其路径。
    '/': {
      lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
    }
  }
}

主题配置

themeConfig同样是配置在config.js中的

  // 主题配置
  themeConfig: {
    // 顶部导航
    nav: [
      { text: '首页', link: '/' },
      { text: '归档', link: '/archives/'},
      { text: '分类', link: '/categories/' },
      { text: '标签', link: '/tags/' },
      { text: '关于我', link: '/about/' }
    ],
    
    // 侧边栏
    sidebar: [
      '/'
    ],
    sidebarDepth: 2, // 默认 1 提取到 h2，0 为禁用，2 为 h2，h3
    displayAllHeaders: false, // 默认值：false 侧边栏只会显示由当前活动页面的标题组成的链接
    activeHeaderLinks: true, // 默认值：true 滚动时通过 hash 高亮侧边栏标题

    // Git 仓库和编辑链接
    repo: 'username/repo', // 你的仓库
    repoLabel: 'GitHub', // 导航栏上的文本

    editLinks: true,
    // 默认为 "Edit this page"
    editLinkText: '编辑此页面'
  }

首页

配置 docs 下的 README.md

---
home: true
heroImage: /hero.jpg
heroText: Hero
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
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
---

ps：首页必须设置 home 为 true。默认样式与官方文档首页一致。

至此，就完成了基础的搭建，下一章使用netlify实现vuepress自动化构建。