一步步带你用VuePress来搭建个人网站

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/5c8f3303f265da612d633276’ },
{ 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配合，就可以配置好你的个人网站