搭建一个Vue风格的博客

# 前言📕

某个无聊的早晨，我打开我的电脑，看着凌乱的桌面，我陷入了深思。。。

demo-1

# 自己的博客😄

我决定弄个网站记录一下，可是自己搭建又太麻烦。。秉持着“我们不造轮子,只做轮子的搬运工”的理念，我打算去百度上找找😑

原来尤大早就替我们造好了轮子，Vuepress。简单说明一下，这是一个基于Vue的静态博客系统，不需要搭建云服务器和云数据库，只用本地写入静态文件，并且博客可以搜索进行快速联想到文章，简直不要太方便，开箱即用。

经过好几天的一边学习一边踩坑，基本的结构总算出来了😀

# 开始搭建👻

首先安装Vuepress，本文使用Yarn进行安装（npm同样可以）。

管理员权限打开终端输入如下指令:

# 1. 创建一个空文件夹
mkdir my-blog
cd ./my-blog

# 2.创建一个package.json的模块文件
yarn init -y # 或者 npm init -y

# 3.添加vuepress模块
yarn add -D vuepress 或者：npm install -D vuepress

# 4.接着在packjson里加入一些指令方便我们操作项目
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
    /* 终端中输入 docs:dev 运行项目
       输入 docs:build 打包项目 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这时还不能启动，我们需要手动构建如下文件目录

/my-blog/
  ├── /docs/
  │  ├── /.vuepress/
  │  │  ├── /config/
  │  │  │  ├── nav.js
  │  │  │  └── sidebar.js
  │  │  ├── config.js
  │  │  └── /public/
  │  │         └── /img/
  │  │            ├── favorite.png
  │  │            └── witch.ico
  │  └── README.md
  └── package.json

1
2
3
4
5
6
7
8
9
10
11
12
13

my-blog 根目录文件夹
package.json 存放项目依赖包
docs 存放项目所有的文档和配置
README.md 项目启动后的主页内容
.vuepress 存放博客界面的配置以及静态资源
nav.js 存放首页顶部导航栏配置
sidebar.js 存放侧边栏配置
config.js 存放项目主要配置
public 存放静态资源

或者直接去笔者仓库Clone代码目录点击此处😊

# 基本配置🏄‍

首先配置最重要的config.js文件，可以参考我的配置，如下：

const nav = require('./config/nav'); //引入导航栏配置
const sidebar = require('./config/sidebar'); //引入侧边栏配置
const routeConfig = require('./plugins/routeConfig'); //引入路由配置

module.exports = {
    title: "不是博客",
    description: "不是博客",
    head: [
        // 这里的 '/' 指向 docs/.vuepress/public 文件目录
        ['link', {
            rel: 'icon',
            href: '/img/witch.ico' //配置网页的小图标，如下图
        }]
    ],
    base: '/blog/', // 部署到github会用到的配置
    markdown: {
        lineNumbers: true // 代码块显示行号
    },
    // 顶部导航栏
    themeConfig: {
        displayAllHeaders: true, //展开侧边栏所有的小标题
        sidebarDepth: 1, //提取markdown中h2标题，作为小标题显示在侧边栏上。
        lastUpdated: '最后更新', // 文档更新时间：每个文件git最后提交的时间,
        nav, //导航
        sidebar, //侧边栏
    },
    plugins: [
        routeConfig,
    ],
}

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

nav-demo-1

在此推荐一个好看的ico和PNG图标的网站，请放心食用，点击这里🚀

# 导航栏配置👙

导航可以分为如下三种配置：

仅显示标题到导航栏

显示标题到导航栏，且显示下拉标题

显示标题到导航栏，且分类别显示下拉标题

nav.js配置如下：

const nav = [
    // 1.0 仅显示标题到导航栏
    {
        text: '首页',
        link: '/'
    },
    // 2.0 显示标题到导航栏，且显示下拉标题
    {
        text: '关于作者',
        items: [{
                text: 'GitHub',
                link: 'https://github.com/ordinaryA',
            },
            {
                text: '掘金',
                link: 'https://juejin.im/user/5c38537d518825260d7ec96c',
            }
        ]
    },
    // 3.0 显示标题到导航栏，且分类别显示下拉标题
    {
        text: '大前端',
        items: [{
                text: '基础',
                items: [{
                        text: 'Javascript',
                        link: '/大前端/01.Javascript/',
                        //此处/以docs为根目录
                    },
                    {
                        text: 'ES6',
                        link: '/大前端/02.ES6/',
                    },
                ]
            },
        ]
    }
]

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

# 侧边栏配置⛳

此处坑极多，容易配置失败，前方高能！！！

再次贴一下仓库地址避免观众老爷们踩坑点击此处😊

sidebar.js配置如下：


const 摸鱼 = [{
    title: "上班摸鱼", //侧边栏大类标题
    collapsable: false, //false可以使侧边栏分组强制打开
    children: [
        [
            //md文件路径，以底部导出的/摸鱼/为根路径
            '01.上班摸鱼/01.摸鱼，是员工给公司的福报.md',
            //侧边栏显示的标题名
            '摸鱼，是员工给公司的福报'
        ],
    ],
}];
const 练习 = [{
        title: "小游戏",
        collapsable: false,
        children: [
            ['01.前言.md', '前言'], 
            ['02.扫雷.md', '扫雷'],
            ['03.管道小鸟.md', '管道小鸟'],
            ['04.贪吃蛇.md', '贪吃蛇'],
        ],
    },
    {
        title: "聊天室",
        collapsable: false,
        children: [
            ['05.聊天室.md', '聊天室'],
        ],
    },
];
module.exports = {
    '/摸鱼/': 摸鱼,
    '/练习/': 练习,
}

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

# 配置首页🎁

docs目录下的README.md如下：

---
home: true
heroImage: /img/favorite.png
actionText: 摸鱼🐟🐟🐟
actionLink: /PAGE/2019-10-23-touch-fish-hhhh/
features:
- title: 大前端
  details: 埋伏五百刀斧手于帐后，以摔杯为号
- title: 练习
  details: 批判的武器不能代替武器的批判
- title: 摸鱼
  details: 摸鱼，是员工给公司的福报
footer: Awesome...
---

1
2
3
4
5
6
7
8
9
10
11
12
13
14

首页也可以写vue和html代码，笔者正在学习，就不举栗了🥛

更多可以参考官网配置，点击此处 Vuepress🚗

# 部署🎉

Vuepress项目可以发布到GitHub page上，不需要云服务器，由于笔者用的是自己的服务器，就不分享怎么发布了。

部署的时候有个坑需要注意一下，config.js文件下的base需要填GitHub的配置或者服务器上的根目录名，不然项目构建的dist包的引入路径会出错。

另：构建的dist包在本地是无法运行的，会出现三条黑杠（如果有运行的办法可以留下评论，笔者也还在摸索阶段），但是部署到服务器后会正常显示😆

module.exports = {
    title: "不是博客",
    description: "不是博客",
    head: [
        ['link', {
            rel: 'icon',
            href: '/img/witch.ico'
        }]
    ],
    base: '/blog/', // 部署到github会用到的配置   👈
}

1
2
3
4
5
6
7
8
9
10
11

# 更多🧀

当你走到这一步的时候，基本能搭出和我一样的一个博客了😄，Vuepress还有更多高阶的写法，并且可以使用Vue的组件，还有美美的主题包，由于笔者还在摸坑阶段，一边摸索一边学习，就记录到这里，更多详细的用法请点击这里 Vuepress🚔。

步骤已经尽可能详细了，希望观众老爷们也能花上一点时间搭上一个自己的博客，简单又实用🙈

在此分享一个平时写MD文档的编辑器，动态展现md转换后的排版，以及各种强大的快捷键，Typora🎈

最后献上一张完成图:

blog-demo

# 特别鸣谢😊

参考博客源码为： https://xin-tan.com/

# 求个Star（手动滑稽😆）

希望看完对你们有帮助的朋友能给我点个star，你的star就是对我最大的鼓励，谢谢~

github: https://github.com/ordinaryA/Alan-blog
掘金: https://juejin.im/post/5db8223551882564430c3f4d

← GitHub-Emoji表情合集【小哥哥, 跨域要不要了解下】NGINX 反向代理 →