VuePress搭建个人博客

本节主要讲述VuePress搭建个人博客

1)VuePress是什么?

2)安装

1
yarn global add vuepress # 或者:npm install -g vuepress

创建项目目录

1
2
mkdir project
cd project

初始化项目

1
yarn init -y # 或者 npm init -y

新建docs文件夹

docs文件夹作为项目文档根目录,主要放置Markdown类型的文章和.vuepress文件夹。

1
mkdir docs

设置package.json

VuePress中有两个命令,vuepress dev docs命令运行本地服务,通过访问http://localhost:8080即可预览网站,vuepress build docs命令用来生成静态文件,默认情况下,放置在docs/.vuepress/dist目录中,当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。在这里将两个命令封装成脚本的方式,直接使用npm run docs:dev和npm run docs:build即可。

1
2
3
4
5
6
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}

创建.vuepress目录

在docs目录中,创建.vuepress目录,.vuepress目录主要用于存放VuePress相关的文件。

1
mkdir .vuepress

创建config.js

进入到.vuepress目录中,然后创建config.js,config.js是VuePress必要的配置文件,它导出y一个javascript对象。

1
touch config.js

创建public文件夹

进入到.vuepress目录中,然后创建public文件夹,此文件夹主要放静态资源文件,例如favicons和 PWA的图标。

1
mkdir public

此时,项目的结构差不多就出来了。

1
2
3
4
5
6
7
project
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json

以上只是简单了搭建了一下博客的开发环境,接下来是博客主要的基本配置config.js,也是必须要做的。

基本配置

一个config.js的主要配置包括网站的标题、描述等基本信息,以及主题的配置。这里简单的列举一下常用配置。

config.js

网站信息

1
2
3
4
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}

具体配置详情请看文档:配置

主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
module.exports = {
title: '个人主页',
description: 'Just playing around',
themeConfig: {
nav: [{
text: '主页',
link: '/'
},
{
text: '所有文章',
link: '/all/'
},
{
text: '友链',
link: '/link/'
},
{
text: '关于我',
link: '/abuot/'
},
{
text: '语言',
items: [{
text: '中文',
link: '/language/chinese'
},
{
text: '日文',
link: '/language/japanese'
}
]
}
]
}
}

具体配置详情请看文档:配置

主页(Homepage)

默认主题提供了一个主页布局(用于该网站的主页)。要使用它,需要在你的根目录 README.mdYAML front matter 中指定 home:true 加上一些其他元数据。这是本网站使用的实际数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
---
home: true
actionText: 我的博客 →
actionLink: /guide/
features:
- title: JavaScript相关资源
details: 这里收集了JavaScript相关资源
- title: Vue相关资源
details: 这里收集了Vue相关资源
- title: Node相关资源
details: 这里收集了Node相关资源
footer: 欢迎欢迎!!!!!!!!!!!!!!!!!!!!!!!!
---

—-未完待续