博客搭建
记录博客搭建的过程
# 搭建
本博客使用vuepress搭建:VuePress 中文文档 | VuePress 中文网 (opens new window)
主题是:vuepress-theme-reco (recoluan.com) (opens new window)
yarn global add @vuepress-reco/theme-cli@1.0.7
theme-cli init
2
主题下载下来之后便是安装插件和修改主题了
首页打字机效果:关于首页打字机效果 | PengSir (bookbook.cc) (opens new window)
修改主题:vuepress-theme-reco个人向优化 | vuepress-theme-reco (recoluan.com) (opens new window)
# 使用
从GitHub上克隆本博客的源码
git clone https://github.com/mrzry1024/blog-source-code
cd blog-source-code/blog-source-code
yarn
2
3
目录如下
blog-source-code
|---.vuepress # 用于存放全局的配置、组件、静态资源等。
| |---components # 该目录中的 Vue 组件将会被自动注册为全局组件。
| | |---typewriter.vue # 打字机组件
| |---config # 当config.js里面内容太多时,可以把每一项配置都分割成单独的文件存放到config文件夹。
| | |---friendLinkConf.js # 友链
| | |---headConf.js # SEO
| | |---navConf.js # 导航栏
| | |---pluginsConf.js # 插件
| |---public # 静态资源目录。
| | |---avatar.jpg # 头像
| | |---bg.jpg # 背景
| | |---favicon_io.ico # 站点图标
| | |---logo.png # 站点logo
| |---theme # 用于存放本地主题。
| |---config.js # 全局配置文件。
|---blogs # 博客文章
| |---blog1 # 文章类别1
| | |---blog1文章.md
| | |---README.md
| |---blog2 # 文章类别2
| |---blog2文章.md
| |---README.md
|---docs # 文档
| |---about.md # 文档1
| |---tools.md # 文档2
|---deploy.sh # 部署脚本
|---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
# config配置
原config.js
里面内容太多,将每一项配置都分割成单独的文件存放到config文件夹
- 友链模板,其中title、logo、link是必需的
module.exports = [
{
"title": "昵称",
"desc": "描述",
"email": "邮箱",
"logo": "图片",
"link": "链接"
}
]
2
3
4
5
6
7
8
9
- SEO模板,显示到HTML文件的head标签里,其中
"/favicon_io.ico"
是站点图标
module.exports = [
[
"link",
{
"rel": "icon",
"href": "/favicon_io.ico"
}
],
[
"meta",
{
"name": "viewport",
"content": "width=device-width,initial-scale=1,user-scalable=no"
}
],
['meta', { name: 'author', content: '作者' }],
['meta', { name: 'keywords', content: '关键词1, 关键词2' }]
]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 导航栏模板,
分类
和标签
在config.js
文件中定义了,且位置确定为2
和3
module.exports = [
{
"text": "首页",
"link": "/",
"icon": "reco-home"
},
{
"text": "时间轴",
"link": "/timeline/",
"icon": "reco-date"
},
{
"text": "工具",
"icon": "reco-document",
"link": "/docs/tools"
},
{
"text": "关于",
"link": "/docs/about/",
"icon": "reco-account"
},
{
"text": "联系",
"icon": "reco-suggestion",
"items": [
{
"text": "GitHub",
"link": "GitHub地址",
"icon": "reco-github"
},
{
"text": "CSDN",
"link": "CSDN地址",
"icon": "reco-csdn"
}
]
}
]
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
- 插件模板
自动侧边栏:Getting started | Vuepress Plugin Auto Sidebar (shanyuhai123.github.io) (opens new window)
代码块复制:vuepress-plugin-nuggets-style-copy
顶部进度条:@vuepress/nprogress
vssue评论功能:@vssue/vuepress-plugin-vssue,使用github-v4
如果不要添加vssue评论功能,需要将
\.vuepress\theme\components\Page.vue
的<Vssue :options="{ locale: 'zh' }" />
去掉
module.exports = {
// 自动侧边栏
"vuepress-plugin-auto-sidebar": {},
// 代码块复制
"vuepress-plugin-nuggets-style-copy": {
copyText: "copy",
tip: {
content: "copy successful"
}
},
// 顶部进度条
"@vuepress/nprogress": {},
// vssue评论功能
// yarn add @vssue/vuepress-plugin-vssue
// yarn add @vssue/api-github-v4
'@vssue/vuepress-plugin-vssue': {
platform: 'github-v4',
owner: 'GitHub用户名',
repo: '仓库名',
clientId: '注册的Client ID',
clientSecret: '注册的Client Secret',
autoCreateIssue: true // 自动创建评论,默认是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
# 文章&文档模板
vuepress默认页面路由地址如下:
文件的相对路径 | 页面路由地址 |
---|---|
/README.md | / |
/blog/README.md | /blog/ |
/about.md | /about.html |
/blog/article.md | /blog/article.html |
主页模板是指/blog/README.md
的模板,最终是某个分类的主页
文章模板是指/blog/article.md
的模板,最终是某个分类的一篇文章
文档模板是指/docs/about.md
的模板,最终是一个文档,文档一般选择不发布,如:关于
# 本地调试
Git Bash输入
yarn dev
会执行vuepress dev . --temp temp
,会生成一个temp文件夹,这样便能实现热更新
运行完成后访问:http://localhost:8080/ (opens new window)
如果要更改路径,需要在config.js中修改
module.exports = {
base: "/blog/"
// ...
}
2
3
4
这样便访问:http://localhost:8080/blog/ (opens new window)
# 部署
Git Bash输入
yarn deploy
会执行bash deploy.sh
,deploy.sh文件如下
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
# npm run build
yarn build
# 进入生成的文件夹
cd dist
# 发布到自定义域名
# echo 'www.xxx.com' > CNAME
# 添加README文件
# echo 'xxxx' > README.md
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# 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
26
27
28
29
如果有域名,需要在域名控制台解析,然后在GitHub Pages (opens new window)中设置,在deploy.sh中将域名信息写入CNAME
echo 'www.xxx.com' > CNAME
echo 'www.com' >> CNAME
2
生成的静态文件中没有README.md,可以手动添加
echo '我的博客' > README.md
发布到GitHub Pages
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
2
3
4
5
GitHub为我们创建的默认分支是main,但使用Git指令时,我们当前处在master分支,如果想push到main分支,可以参考这篇文章
关于git的问题:error: src refspec main does not match any_TripleGold.的博客-CSDN博客 (opens new window)
# 摘要
vuepress yaml:Front Matter (opens new window)
这是文章的摘要
<!-- more -->
2
3
vuepress-theme-reco 添加摘要 (opens new window)
vuepress-theme-reco Markdown 中支持的语法 (opens new window)
可结合vuepress-plugin-container
使用,即
::: tip
This is a tip
:::
<!-- more -->
2
3
4
5
输入
::: tip
This is a tip
:::
::: warning
This is a warning
:::
::: danger
This is a dangerous warning
:::
::: theorem 牛顿第一定律
假若施加于某物体的外力为零,则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::
::: details
这是一个详情块,在 IE / Edge 中不生效
:::
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
输出
This is a tip
This is a warning
This is a dangerous warning
See More
这是一个详情块,在 IE / Edge 中不生效