博客搭建

潜心 2022-5-1 博客搭建

记录博客搭建的过程

# 搭建

本博客使用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

1
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

1
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      # 博客首页

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

# config配置

原config.js里面内容太多，将每一项配置都分割成单独的文件存放到config文件夹

友链模板，其中title、logo、link是必需的

module.exports = [
    {
        "title": "昵称",
        "desc": "描述",
        "email": "邮箱",
        "logo": "图片",
        "link": "链接"
    }
]

1
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' }]
]

1
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"
            }
        ]
    }
]

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

插件模板
- 自动侧边栏：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
    },
}

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默认页面路由地址如下：

文件的相对路径	页面路由地址
`/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/"
    // ...
}

1
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 -

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

如果有域名，需要在域名控制台解析，然后在GitHub Pages (opens new window)中设置，在deploy.sh中将域名信息写入CNAME

echo 'www.xxx.com' > CNAME
echo 'www.com' >> CNAME

1
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

1
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 -->

1
2
3

vuepress-theme-reco 添加摘要 (opens new window)

vuepress-theme-reco Markdown 中支持的语法 (opens new window)

可结合vuepress-plugin-container使用，即

::: tip
This is a tip
:::

<!-- more -->

1
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 中不生效
:::

1
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

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自维基百科 (opens new window)

这是一个详情块，在 IE / Edge 中不生效

vuepress中使用数学公式markdown-it-katex

潜心的博客

Choose mode

博客搭建

博客搭建

# 搭建

# 使用

# config配置

# 文章&文档模板

# 本地调试

# 部署

# 摘要