前言

相信每个前端同学都想搭建属于自己的前端博客，里面记录自己在技术上以及工作中遇到的一些问题，接下来我来介绍一个比较好用的博客搭建工具。

VuePress

VuePress相信很多同学都听说过，它是基于Vue的静态网站生成器，风格简约，配置简单。如果想了解更多可以看看官方文档，里面非常详细VuePress

本地搭建

1. 创建目录，并进入
mkdir vuepress-start && cd vuepress-start

2. 使用自己喜欢的包管理器进行初始化，在这里我使用yarn
yarn init

3. 将VuePress安装为本地依赖
yarn add -D vuepress

4. 创建属于自己的第一篇文档，VuePress会以docs为文档根目录，所以README.md相当于主页：
mkdir docs && echo '# Hello VuePress' > docs/README.md

5. 在package.json中添加一些scripts
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

6. 在本地启动服务器
yarn docs:dev
复制代码

VuePress会新开窗口 http://localhost:8081/ 启动一个热重载的开发服务器。

基础配置

在文档目录下创建一个.vuepress 目录，所有VuePress相关的文件都会被放在这里。此时项目结构如下：

在.vuepress文件夹下添加config.js，配置网站的标题和描述，方便SEO，即搜索引擎：

module.exports = {
  title: '小乔前端成长指南',
  description: '每天进步一点点',
}
复制代码

此时效果图如下所示：

博客封面页模版

官方提供了封面页的模板，在docs/readme.md中配置如下信息

---
home: true
heroImage: https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5f77180c31148bca9f8b930eca4861e~tplv-k3u1fbpfcp-watermark.image?
actionText: Get Started →
actionLink: /node/nest/nest
features:
- title: study every day
  details: 记录前端路上的.
- title: 前端成长之路
  details: 专注前端技术栈分享，涉及前端、Node、Linux、数据库等，希望我们都能成为优秀的全栈开发工程师
- title: 小乔
  details: 有趣的灵魂。座右铭：做就对了、拒绝拖延。
---
复制代码

效果如下：

添加导航栏、侧边栏

导航栏

在页面首页的右上角添加导航栏，修改config.js:

module.exports = {
  title: '小乔前端成长指南',
  description: '小乔前端成长指南',
  themeConfig: {
    // 添加导航栏：页面首页的右上角
    nav: [
      { text: '首页', link: '/' },
      { text: '前端', link: '/web-frame/' },
      { text: 'Node', link: '/node/nest/nest' },
      { text: '面试问题', link: '/interview/' },
      { text: 'Git', link: '/git/' },
      { text: 'Linux', link: '/linux/' },
      { text: 'Mysql', link: '/mysql/' },
      { text: 'Docker', link: '/docker/' },
      { 
        text: '小乔的前端博客', 
        items: [
          { text: 'Github', link: 'https://github.com/qiaochunmei' },
          { text: '掘金', link: 'https://juejin.cn/user/43636195606333/posts' }
        ]
      }
    ]
  }
}
复制代码

效果图如下：

侧边栏

根据需要添加一些目录，在config.js中配置：

module.exports = {
    themeConfig: {
        nav: [...],
        sidebar: [
            {
                title: '基础知识',
                path: '/',
                collapsable: false, // 不折叠
                children: [
                   { title: "必会", path: "/" }
                ]
            }
          ]
    }
}
复制代码

更换主题

目前为止基本的目录和导航功能已经实现，如果想要加载loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能，可以直接使用主题vuepress-theme-rec：

# 安装
yarn add vuepress-theme-reco

# 在`config.js`里引用该主题
module.exports = {
  // ...
  theme: 'reco'
  // ...
}  
复制代码

刷新页面，会发现一些细节的改变，比如加载时的loading 动画、以及支持切换暗黑模式：

添加文章信息

即在每篇文章的md中添加如下信息：

---
title: NestJS
author: 小乔
date: '2022-01-05'
---
复制代码

效果如下：

注意

上图的文章时间，我们写入的格式为2022-01-05 ，但是显示的是 01/05/2022，这是因为 VuePress默认的lang为en-US，修改一下config.js就可以了：

module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  // ...
}  
复制代码

修改主题颜色

VuePress基于Vue，所以主题色用的是Vue的绿色，如果想要修改为其他颜色，可以配置如下形式：

# 创建`.vuepress/styles/palette.styl`文件，内容如下：
$accentColor = blue
复制代码

之后可以发现主题颜色变了

部署

博客到现在基本上架子已经搭好了，里面可以填充内容了，下来我们部署到免费的Github Pages上。在 Github上新建一个仓库，这里我的仓库名为：vue-press

对应，需要在config.js添加一个base路径配置

module.exports = {
  // 路径名为 "/<REPO>/"
  base: '/vue-press/',
  //...
}
复制代码

最终config.js中内容如下：

module.exports = {
  title: '小乔前端成长指南',
  description: '每天进步一点点',
  theme: 'reco', // 更换主题
  locales: { // 设置语言
    '/': {
      lang: 'zh-CN'
    }
  },
  // vuepress-theme-reco将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果要全局开启，可开启
  themeConfig: {
    subSidebar: 'auto'
  },
  // 路径名为 "/<REPO>/"
  base: '/vue-press/',
  themeConfig: {
    // 添加导航栏：页首的右上角添加导航栏
    nav: [
      { text: '首页', link: '/' },
      { text: '前端', link: '/web-frame/' },
      { text: 'Node', link: '/node/nest/nest' },
      { text: '面试问题', link: '/interview/' },
      { text: 'Git', link: '/git/' },
      { text: 'Linux', link: '/linux/' },
      { text: 'Mysql', link: '/mysql/' },
      { text: 'Docker', link: '/docker/' },
      { 
        text: '小乔的前端博客', 
        items: [
          { text: 'Github', link: 'https://github.com/qiaochunmei' },
          { text: '掘金', link: 'https://juejin.cn/user/43636195606333/posts' }
        ]
      }
    ],
    // 添加侧边栏
    // sidebar: [
    //   {
    //       title: '基础知识',
    //       path: '/',
    //       collapsable: false, // 不折叠
    //       children: [
    //         { title: "必读", path: "/" }
    //       ]
    //   },
    //   {
    //     title: "Node",
    //     path: '/node/nest/nest',
    //     collapsable: false, // 不折叠
    //     children: [
    //       { title: "nest", path: "/node/nest/nest" },
    //       { title: "mysql", path: "/node/mysql/mysql" }
    //     ],
    //   }
    // ]
  }
}
复制代码

然后在项目vuepress-start 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:xiaoqiao112/vue-press.git master:master

cd -
复制代码

然后切换到项目根目录，执行sh deploy.sh，就会开始构建，然后提交到远程仓库:

可以在仓库的Settings -> Pages中看到最后的地址

我这里生成的地址是：xiaoqiao112.github.io/vue-press/

到这，我们就完成了VuePress+Github Page博客的搭建部署。

vue-press搭建属于自己的前端博客

前言