VuePress搭建个人网站

VuePress

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的

全局安装

yarn global add vuepress # or
npm install -g vuepres

新建文件夹vpressblog并进入

基础配置

项目初始化

yarn init -y

编辑器打开项目（Webstorm）

会发现创建了一个package.json文件

添加如下配置

 "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

创建一个 docs 目录

作为项目文档的根目录来使用

在docs文件夹下创建.vuepress文件夹

配置文件都放置在该目录下

在.vuepress文件夹下新建config.js

添加网站名称和描述

module.exports = {
  title: 'DuebassLei',
  description: '海边的小溪鱼'
}

z在.vuepress文件夹下面创建public文件夹

存放用到的静态资源

在.vuepress文件夹下面创建README.md

该README.md文件将会被作为默认主题主页布局，这里为了方便直接拷贝VuePress默认主题配置

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue 驱动
  details: 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2019-DuebassLei
---

到这里就是一个的基本项目结构:

启动项目

yarn docs:dev

访问：http:localhost:8081,如下图

到这里基本搭建就完成了，剩下的就是个性化啦>_<

主题个性化

添加导航栏

themeConfig: {
        nav: [
            { text: '主页', link: '/' },
            { text: '学习笔记', link: '/' },
            { text: '收藏', link: '/' },
            { text: '个人博客', link: 'https://blog.csdn.net/m0_37903882' },
            { text: '关于', link: '/' },
            { text: 'GitHub', link: 'https://github.com/DuebassLei' }
        ]
       }

Find Me

Github仓库
【VuePress搭建DuebassLei小站】
【我的小站：海边的小溪鱼DuebassLei】

个性化预览效果：