前言

作为一个前端要有一个属于自己的博客网站，因为想快速搭建，难以抽出很多时间去搭建自己的博客。
所以我选择了vuepress一个可以快速搭建类似于vue官方文档的网站，还提供博客主题让我们快速搭建自己的博客，其中还内置评论、以下就是我自己部署博客的过程。

预览

我的博客：hello-gby.github.io/blog/

开始搭建

# 1. 创建文件夹 my-blog
mkdir my-blog

# 2. 在my-blog 文件夹上打开终端

# 3. 初始化项目
npm init -y
npm install -D vuepress

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

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

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

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

配置

基本配置

首先配置最重要的config.js文件，如下：

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

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

导航栏配置

nav.js配置如下

const nav = [
    {
        text: '首页',
        link: '/'
    },
    {
        text: '关于作者',
        items: [{
                text: 'GitHub',
                link: '',
            },
            {
                text: '掘金',
                link: '',
            }
        ]
    },
    {
        text: '面试笔记',
        items: [{
                text: '基础',
                //此处/以docs为根目录
                items: [{
                        text: 'Javascript',
                        link: '/前端/01.Javascript/01.正则表达式',
                        // sidebarDepth: 0,
                    },
                    {
                        text: 'ES6',
                        link: '/前端/02.ES6/01.ES6',
                    },
                ]
            },
        ]
    }
]

module.exports = nav;

侧边栏配置

sidebar.js配置如下：

const JavaScriptDir = [
  {
    title: "JavaScript",
    children: [
      ["01.Javascript/01.正则表达式.md", "正则表达式"],
      ["01.Javascript/02.函数式编程.md", "函数式编程"],
      ["01.Javascript/03.什么是闭包.md", "什么是闭包"],
    ],
  },
];

module.exports = {
    '/前端/': JavaScriptDir,
}

首页配置

docs目录下的README.md如下：

---
home: true
heroImage: /img/favorite.png
heroText: xixi的博客
tagline: xixi的博客
actionText: 点击进入 →
actionLink: /前端/01.Javascript/01.正则表达式
features:
- title: 记录
  details: 记录过程。
- title: 查阅
  details: 便于查阅。
- title: 分享
  details: 分享知识。
footer: MIT Licensed | Copyright © 2023-present guobingyu-blog
---

编写 .md 文件

上述配置完以后需要在docs目录下新建对应的路径的.md文件，可以看到文档结构和导航栏、侧边栏中配置项都是对应的。

启动项目

到此本地服务的博客搭建完成，启动项目即可访问。

npm run docs:dev

其他配置

更多细节配置可参考vuepress官网：v1.vuepress.vuejs.org/zh/

部署

下一章节速搭建自己的博客(二) 将讲述如何在github上进行部署。提供对外访问链接

快速搭建自己的博客(一)

前言

预览