vuepress搭建博客详解

一、介绍

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

二、文件目录

├── project
│   ├── .vuepress 
│   │   ├── public 
│   │   │   └──images
│   │   └──config.js 
│   ├── docs
│   │   └──xxx.md 
│   └── README.md
└── package.json

二、快速开始

# 安装
npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

三、搭建过程详解

1. 下载

npm install -g vuepress

2. 新建project文件夹

为自定义文件夹，名字可随便取

3. 在project文件夹，新建如下内容

• vuepress文件夹

• docs文件夹

• README.md

4.执行命令

npm init

5. 在packeage.json里面，新增

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

• 我的package.json

{
    "name": "y",
    "version": "1.0.0",
    "description": "'# Hello VuePress!'",
    "main": "index.js",
    "directories": {
        "doc": "docs"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "docs:dev": "vuepress dev ",
        "docs:build": "vuepress build ",
    },
    "author": "",
    "license": "ISC"
}

6.执行命令

npm install

7. 启动项目

npm run docs:dev

8. 打包

npm run docs:build

四、源码克隆

#克隆
git clone https://github.com/wgjh5/blogs.git

#下载
npm install

#启动
npm run docs:dev

#打包
npm run docs:build

相关链接：

• vuepress官方文档

• VuePress 快速踩坑

• Markdown基本语法

• Hexo+Github Page搭建个人博客