VuePress可以让你非常方便的在Markdown文档中编写Vue代码，VuePress会为每个页面预渲染生成静态的HTML,同时，每个页面被加载的时候，将作为SPA运行 这里我将带大家一步步用VuePress来搭建个人网站

查看node的版本号

node -v
复制代码

node.js的版本号必须要大于等于8才可以

全局安装vuepress

yarn global add vuepress
复制代码

npm install -g vuepress
复制代码

检查vuepress是否安装成功

vuepress -v
复制代码

创建一个文件夹

mkdir sxm_vuepress
复制代码

切换到新建文件夹目录

cd sxm_vuepress
复制代码

初始化项目

npm init -y
复制代码

通过npm init快速创建项目的package.json文件

新建docs文件夹

mkdir docs
复制代码

新建的docs文件夹作为项目文档更目录，主要放置Markdown类型的文章和.vuepress文件

切换到docs目录

cd docs
复制代码

创建.vuepress文件夹

mkdir .vuepress
复制代码

.vuepress目录是放置所有的vuepress特有文件的地方

切换到.vuepress目录

cd .vuepress
复制代码

创建config.js文件

touch config.js
复制代码

用来放配置文件

再创建public文件夹

mkdir public
复制代码

用来存放公共图片

再创建README.md文件

这个是在docs目录下创建README.md文件

touch README.md
复制代码

用来存放首页配置文件

接下来就用编辑器打开

在config.js里面添加内容

module.exports = {
    title: '小明同学的技术博客', 
    description: '查阅知识',
    themeConfig: {
        search: true,//搜索
        searchMaxSuggestions: 10,
    }
}

复制代码

这里的"title"是所有页面标题的前缀，显示在默认主题的导航栏中

这里的"description"是网站描述

在README.md里面添加内容

---
home: true # 标记此页面是否为首页
lang: zh-CN # 表示本页面的语言为zh-CN(简体中文)
heroText: 石小明的技术博客 # 首页的标题内容
actionText: Get Started → # 首页跳转按钮的内容
features: #  表明首页的特征，固定的格式为title + details，以三栏流式布局的方式展示
  - title: 博客
    details: 专注前端学习，记录点点滴滴
  - title: 关于我
    details: 一个前端工程师。
  - title: 技能
    details: Vue全家桶，React全家桶
footer: shixiaoming | Copyright © 2020-present Evan You # 为底部内容，与普通的网页一样，我们可以在footer里面写版权信息
---
复制代码

在package.json里面添加内容

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
复制代码

npm run docs:dev
复制代码

在config.js里面添加

      // 导航栏
        nav: [
          { text: '首页', link: '/' },
          { text: '前端技术', link: 'page1/' },
          { text: '个人文章', items: [
            { text: '掘金', link: 'https://juejin.im/user/1486195452289400' },
            { text: 'segmentfault', link: 'https://segmentfault.com/u/helloxiaoming' },
            { text: 'CSDN', link: 'https://blog.csdn.net/qq_40588413' }
          ]}
        ]
复制代码

侧边栏配置

创建一个page1文件

在page1里面创建4了个文件

在config.js添加

// 侧边栏
sidebar: [
    {
      title: 'HTML',
      collapsable: true,
      children: [
        'page1/',
        'page1/新增标签',
        'page1/BOM',
        'page1/DOM'
      ]
    }
],
复制代码

在README.md里添加

actionLink: /page1/ # 页跳转按钮的路径
复制代码

然后每个页面内容就用markdown语法来写

更改默认主题色

创建一个override.styl文件

在.vuepress目录下创建一个override.styl文件 vuepress提供四个可更改的颜色：

$accentColor = #3eaf7c // 主题色
$textColor = red // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色
复制代码

命令行里面执行：

vuepress build
复制代码

当出来下边这一行代码就说明打包成功了

Success! Generated static files in vuepress
复制代码

再将打包好的vuepress目录上传到github， 和github page配合，就可以配置好你的个人网站