vuepress搭建个人博客(并附上项目源码)

 

 

先附上博客效果http://chqyys.top/

 

这里使用了主题reco,并且使用音乐播放插件，看板娘插件，全文检索插件，评论插件，复制代码插件等等。

基础配置

• 创建目录并初始化,初始化后会生成一个package.json文件

mkdir vuepressBlog
cd /vuepressBlog
npm init -y

• 下载vuepress

npm install -g vuepress

• 创建docs目录，并在该目录下创建.vuepress目录

mkdir docs

• 在.vuepress下创建config.js

mkdir .vuepress
touch config.js

• 创建README.md文件

---
home: true
bgImage: '/bg.svg'
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
---

 

 

导航栏与侧边栏配置配置

• 在目录.vuepress下创建nav.js

module.exports = [
    {
        text: 'Java', link: '/java/',icon: 'reco-blog'
    },
    {
        text: '懵逼指南', link: '/guide/',icon: 'reco-tag'
    },