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.cn/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配合，就可以配置好你的个人网站
