手把手教你用 VuePress 快速搭建个人技术博客~

一、什么是 VuePress ?

VuePress 是基于 vue 的极简静态网站生成器,实际上就是一个 vue 的单页应用,内置 webpack,可以用来写文档。详见 VuePress中文网

VuePress 可用于将 markdown 文件展示为 WEB 页面

二、展示效果

首页

手把手教你用 VuePress 快速搭建个人技术博客~

文档页

手把手教你用 VuePress 快速搭建个人技术博客~

三、开始搭建

目标:记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章(HTML、CSS、JavaScript)的项目

前提条件

使用 VuePress 需要先安装 Node.js,版本号要在 8.6 以上

1.创建项目目录并进入

mkdir my-vuepress
cd my-vuepress

2.初始化

yarn init -y
# 或者使用 npm init -y

以下都将使用 yarn 包管理器

3.将 VuePress 安装为本地依赖

yarn add -D vuepress	# 安装为开发依赖

4.创建文件夹和文件

基本文件夹结构

my-vuepress
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│			├── logo.png
│       └── config.js
└── package.json

手把手教你用 VuePress 快速搭建个人技术博客~

文档文件夹结构

my-vuepress
├─── docs
│   ├── css
│   ├── JavaScript
│   ├── html
│       ├── assets
│       ├── REMDME.md
│       ├── HTML01.md
│       ├── HTML02.md
│       ├── HTML03.md
│       ├── HTML04.md
│       ├── HTML05.md

其中,每个文章的文件夹内都需要有一个 README.md 文件,该文件是每篇文章的首页。剩余的md文件是子页面。assets 存放图片等内容,md 文件中不要使用一级标题,引用资源时路径使用相对路径

5.在 package.json 中添加 scripts

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

效果如下:

{
  "name": "my-vuepress",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.8.2"
  },
 "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
}
}

6.配置 README.md

README.md 是项目首页的内容,如果想快速看到效果,可以直接在里面写一段内容,例如:

## 欢迎访问我的第一个页面

然后运行

yarn dev

即可看到页面效果:
手把手教你用 VuePress 快速搭建个人技术博客~

推荐的用法

推荐在 README.md 文件中使用 YAML 语法添加内容生成首页

示例

---
home: true
heroImage: logo.png
tagline: HTML + CSS + JavaScript
actionText: 开始学习 →
actionLink: /HTML/
features:
  - title: HTML
    details: 超文本标记语言
  - title: CSS
    details: 层叠样式表
  - title: JavaScript
    details: JS脚本
footer: 静夜聆雨 © 2021
---

actionText: 开始学习 →
actionLink: /HTML/

点击开始学习,会先进入“HTML”的页面

效果

手把手教你用 VuePress 快速搭建个人技术博客~

7.配置 config.js

module.exports = {
    title: '我的vuepress', //网站标题
    description: '我的个人网站', //网站描述
    head: [ //注入到当前HTMl页面 <head> 中的标签
        ['link', {
            rel: 'icon',
            href: '/logo.png' //图片应存放在public目录下
        }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    markdown: {
        lineNumbers: false // 代码块显示行号
    },
    themeConfig: {
        nav: [{ //导航栏
                text: 'HTML笔记',
                link: '/html/'
            },
            {
                text: 'CSS笔记',
                link: '/css/'
            },
            {
                text: 'JS笔记',
                link: '/JavaScript/'
            }

        ],
        sidebar: {
            //sidebar: 'auto', // 侧边栏配置,设置auto是自动配置
            //sidebarDepth: 2, // 侧边栏显示2级

            '/html/': [{
                title: 'HTML笔记',
                sidebarDepth: 2,
                collapsable: true, //可折叠
                children: ['', 'HTML01', 'HTML02', 'HTML03', 'HTML04', 'HTML05'] //2级页面,第一个设置为空字符串时,显示的是README.md的内容
            }],
            '/css/': [{
                title: 'CSS笔记',
                sidebarDepth: 2,
                collapsable: true,
            }],
            '/JavaScript/': [{
                title: 'JS笔记',
                sidebarDepth: 2,
                collapsable: true,
            }]
        }
    },

    /**
     * Apply plugins,ref:https://v1.vuepress.vuejs.org/zh/plugin/
     */
    // 插件,安装后才能使用 ,安装方法 yarn add -D 插件名称
    plugins: [
        '@vuepress/plugin-back-to-top', //返回顶部的插件
        '@vuepress/plugin-medium-zoom', //图片放大的插件
        [
            'one-click-copy',
            {
                copyMessage: '复制成功'
            }
        ],
        ['vuepress-plugin-code-copy', true] //一键复制的插件
    ]
}

8.配置完成,查看效果

运行 yarn dev,启动服务器

手把手教你用 VuePress 快速搭建个人技术博客~

个人博客就搭建好啦!

上一篇:Gitbook安装使用教程


下一篇:为知笔记wiz.editor.md增强