# 10分钟搭建个人博客，属于自己的小屋
这是一个纷繁的时代，信息渠道已经多到快让人喘不过气来。
而个人博客这种来自互联网初的载体，似乎与这个环境显得格格不入。
就像大海中的小岛，在海浪中显得那么不起眼，但它的存在本身就彰显了一种意义。
无论是波涛汹涌，还是风平浪静，它都在那里，而你的心也就找到了一处可以停靠的港湾。
# 关于Vuepress
# VuePress (opens new window)
# vuepress-theme-reco (opens new window)
# 环境搭建
# 安装node8.0+
安装官网提示下载安装包安装即可 (目前长期支持版本为14.X)
安装完成后打开命令行工具，输入node -v，若返回版本信息则安装成功。
# 创建博客工程
# 安装vuepress
npm install vuepress -g
# 安装脚手架工具
npm install @vuepress-reco/theme-cli -g
# 创建项目
theme-cli init my-blog #my-blog可替换成自己需要的项目名称AIA
2
3
4
5
6
7
8
9
10
11
上述命令执行后，在命令行窗口会进行一系列的信息配置
? What's the title of your project? #键入您的项目标题
? What's the description of your project? #键入您的项目描述
? What's the author's name? #键入作者姓名
? What style do you want your home page to be?(Select afternoon-grocery, if you
want to download reco_luan's '午后南杂') (Use arrow keys)
❯ blog # 此处通过方向键选择您首页风格，这里我们选择blog
doc
afternoon-grocery
2
3
4
5
6
7
8
9
10
11
12
13
14
15
接下来进入您的工程目录，启动您的项目吧
# 接入项目目录
cd my-blog #my-blog替换为之前您填入的项目名称
# 安装npm
npm install
# 运行测试环境
npm run dev
2
3
4
5
6
7
8
9
10
11
访问命令行输出的ip地址，一般为http://localhost:8080(若端口被占用则依次递增，以终端输出为准)，即可访问您的博客了！
# 博客配置
# 工程结构
├─ node_modules #存放着项目所需的依赖，我们不需要关心
├─ docs #该目录下存放您编写的文档
│ └─ theme-reco
│ ├─ api.md
│ ├─ plugin.md
│ ├─ theme.md
│ └─ README.md
├─ blogs #该目录下存放您编写的博客文章
│ ├─ category1
│ │ ├─ 2018
│ │ │ └─ 121501.md
│ │ └─ 2019
│ │ └─ 092101.md
│ ├─ category2
│ │ ├─ 2016
│ │ │ └─ 121501.md
│ │ └─ 2017
│ │ └─ 092101.md
│ └─ other
│ └─ guide.md
├─ .vuepress # 该目录下存放项目配置文件与静态资源
│ ├─ config.js #该文件用于配置项目
│ └─ public # 该目录下存放网页中所需的静态资源
│ ├─ hero.png # 首页大图
│ ├─ logo.png # 站点logo
│ ├─ favicon.ico #站点图标
│ └─ avatar.png #头像
├─ package.json #依赖管理文件
└─ README.md #这里存放着博客首页的内容
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
# 配置启动页
启动页展示的内容为博客标题与描述，即您在创建工程时输入的内容
您可以在.vuepress/config.js下找到如下内容，通过修改对应的字符来改变您的启动页
// .vuepress/config.js
module.exports = {
"title": "test",
"description": "test",
}
2
3
4
5
6
7
8
9
# 配置首页
首页即为启动页之后的主页面
首页的内容由项目根目录下的README.md 配置生成，您可以通过更改其中的配置项来变更您的首页
---
home: true #指定该文件为您的首页，改为false则不作为首页
heroText: vuepress-theme-reco #首页居中显示的文本
tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语
# heroImage: /hero.png #首页显示的主图，默认被注释，取消注释可显示图片
# heroImageStyle: { # 首页主图的样式控制，默认被注释
# maxWidth: '600px',
# width: '100%',
# display: block,
# margin: '9rem auto 2rem',
# background: '#fff',
# borderRadius: '1rem',
# }
bgImageStyle: { #背景图片样式
height: '450px'
}
# 以下内容基本上不生效，可以不用关心
isShowTitleInHome: false
actionText: Guide
actionLink: /views/other/guide
features:
- title: Yesterday
details: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Today
details: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrow
details: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Tip:代码中所引用的图片，均以
.vuepress/public为根目录
到此为主，您会注意到首页内容远不止这些，例如个人资料卡、文章列表，这些如何更改呢？
文章列表是根据您的文章自动生成的，一旦您发布的文章中的含有
Front Matter，系统会自动将其收集至首页，默认按时间顺序展示个人资料卡的头像和昵称由
.vuepress/config.js进行配置，您可以找到如下内容，并进行修改配置。Category和Tag项则跟您的文章中标注的分类和标签自动生成"author": "AirHua-byte", //昵称 "authorAvatar": "/avatar.png", //头像1
2
3Friend Link则是您可以自由更改的，它的配置在.vuepress/config.js中，您可以找到如下内容，并对应进行修改配置，如果可以的话，您可以尝试将本站点添加为友链~"friendLink": [ { "title": "AirHua-byte", //友联标题 "desc": "敲键盘、按快门与拨琴弦", //友链描述 "email": "3301833942@qq.com", //友链邮箱 "link": "http://huabyte.com" //友链地址 }, { "title": "vuepress-theme-reco", "desc": "A simple and beautiful vuepress Blog & Doc theme.", "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png", "link": "https://vuepress-theme-reco.recoluan.com" } ],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# 配置底部
底边栏展示了如
主题、备案信息、版权、年份等信息，这些内容仍需要您前往.vuepress/config.js进行修改"author": "me", //版权信息，与昵称为同一数据 "record": "xxxx", //备案信息 "startYear": "2017" //开始年份1
2
3
4
5# 配置导航栏
# logo
您需要前往
.vuepress/config.js找到如下内容，修改您的logo图片，该图片存储在.vuepress/public中"logo": "/logo.png",1# 搜索
您需要前往
.vuepress/config.js找到如下内容，修改搜索相关配置"search": true, //是否开启搜索 "searchMaxSuggestions": 10, //最多的搜索建议条目1
2
3# 导航
您需要前往
.vuepress/config.js找到如下内容，修改导航相关配置其中：
- 导航文本为导航按钮所展示的文字信息
- 路由地址即为跳转路径，根目录
/对应您项目的根目录，在项目打包时会将对应目录下的README.md文件生成为index.html，例如您想将链接指向您的/docs/myDocument/README.md,则将link内容改为``/docs/myDocument`,便可访问到您的文档。 - 图标则为导航文本左边显示的图标，可以在reco图标库 (opens new window) (opens new window)中寻找您需要的图标，也可以不要图标
"nav": [ //如下代码中，每个{...}即为一个导航块 { "text": "Home", //导航文本 "link": "/", //路由地址 "icon": "reco-home" //图标 }, { "text": "TimeLine", "link": "/timeline/", "icon": "reco-date" }, { "text": "Docs", "icon": "reco-message", "items": [ { "text": "vuepress-reco", "link": "/docs/theme-reco/" } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } ],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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65或许您已经注意到，如果需要配置一个像
Docs或者Contact这样的折叠的导航应该如何做呢？他们并不会直接跳转到对应的目标地址。折叠导航的配置仍在之前所展示的导航配置代码中，现在将其单独提取出来进行分析。
即在导航块中加入一个
items数组，数组元素为多个{...}，是的，此{...}与导航块的{...}是同样的，所以您可以继续在其中添加文本、图标、路由等属性。js { "text": "Docs", //导航文本 "icon": "reco-message", //导航图标 "items": [ //导航子模块 { "text": "vuepress-reco", //子模块文本 "link": "/docs/theme-reco/" //子模块链接 } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] }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
36
37
38
39
40
41
42# 文档写作
在markdown文档的顶部插入一段yaml配置代码
一个完整的 Front Matter 案例：
---
title: 烤鸭的做法
date: 2019-08-08
sidebar: 'auto'
categories:
- 烹饪
- 爱好
tags:
- 烤
- 鸭子
keys:
- '123456'
publish: false
---
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
常用变量说明：
title :文章标题，放弃通过一级目录定义标题的方式，改在 Front Matter 中定义。
date :文章创建日期，格式 2019-08-08 或 2019-08-08 08:08:08。
sidebar:是否开启侧边栏。
categories :所属分类。
tags :所属标签。
keys: 所属标签。
publish :文章是否发布。
另外还有一些Vuepress 默认主题的变量例如prev, next，请移步 官方文档(opens new window) (opens new window)
# 摘要
在markdown代码中，您将看到注释，注释前面的代码将显示在列表页面上的文章摘要中。
---
title: Vuepress使用指南(reco)
date: 2020-08-16
sidebar: 'auto'
categories:
- 工具
tags:
- vue
publish: true
---
::: tip
Vuepress是Vue作者尤雨溪开发的文档工具，本文采用Vuepress的reco主题进行相关配置说明
:::
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# deploy.sh
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd public
# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果你想要部署到 https://USERNAME.github.io
git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git master
# 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages
cd -
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
