前端博客（VuePress）

前端博客（VuePress）

程序员一定要有自己的博客，哪怕是生活博客。

一、介绍

VuePress 是尤雨溪发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网。

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

VuePress 有很多优点：

• 界面简洁优雅（个人感觉比 HEXO 好看）
• 容易上手（半小时能搭好整个项目）
• 更好的兼容、扩展 Markdown 语法
• 响应式布局，PC端、手机端

二、开始创建

1. 创建博客文件

   创建blog文件夹，也可以使用 mkdir 命令新建

   mkdir blog
   

2. 本地安装VuePress

   npm install -D vuepress
   

3. 初始化项目

   进入blog文件夹，使用 npm init 或 npm init -y（默认yes）

   npm init
   

   初始化完成，会生成package.json文件。

4. 创建配置文件和文件夹

   （1）创建文件夹.vuepress

   （2）进入.vuepress文件夹，创建public文件夹，创建config.js文件

   至此文件结构为：

   blog
   ├───.vuepress
   │     ├── public		// 静态资源文件
   │     └── config.js		// 博客首页
   └── package.json
   

5. 创建首页

   创建index.md首页文件。

   ---
   home: true
   heroImage: /assets/images/logo.png
   heroText: 博客标题
   tagline: 博客副标题
   actionText: 快速阅读
   actionLink: /vue/scrollNumberTop
   features:
   - title: 主页
     details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
   - title: Vue插件
     details: Mischieff为你提供Vue组件，让你的项目炫炫炫！！！
   - title: 其他
     details: Mischieff为你提供一起适配方式及解决方案，没错还是让你爽到爆。
   footer: Mischieff 前端菜鸟提供
   ---
   

   配置后，第9步运行完成，对应的首页渲染效果为：

   

6. 创建网页文件（根据所需，自由创建）

   创建doc文件夹，创建页面文件analysis.md

   至此文件结构为：

   blog
   ├───.vuepress
   │	├── public		 // 静态资源文件
   │	└── config.js	  // 博客首页
   ├───doc				// 文档
   │	└── analysis.md	  // 分析交流会页面
   └── package.json
   

7. config.js文件配置

   进入.vuepress/config.js，配置config.js文件

   module.exports = {
        
     title: 'Mischieff',
     base: '/blog/',
     description: '前端技术分享交流会',
     head: [
       [