从零带你用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配合，就可以配置好你的个人网站

最后

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！