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

小小乔
1,617 阅读4分钟

前言

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

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相关的文件都会被放在这里。此时项目结构如下：

image.png

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

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

此时效果图如下所示：

image.png

博客封面页模版

官方提供了封面页的模板，在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: 有趣的灵魂。座右铭：做就对了、拒绝拖延。
---

效果如下：

image.png

添加导航栏、侧边栏

导航栏

在页面首页的右上角添加导航栏，修改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' }
        ]
      }
    ]
  }
}

效果图如下：

image.png

侧边栏

根据需要添加一些目录，在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 动画、以及支持切换暗黑模式：

image.png

添加文章信息

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

---
title: NestJS
author: 小乔
date: '2022-01-05'
---

效果如下：

image.png

注意

上图的文章时间，我们写入的格式为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

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

部署

shell部署

博客到现在基本上架子已经搭好了，里面可以填充内容了，下来我们部署到免费的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 git@github.com:xiaoqiao112/vue-press.git master:gh-pages

cd -

然后切换到项目根目录，执行sh deploy.sh(首次提交代码时，执行该shell文件，后续执行时需要修改)，就会开始构建，然后提交到远程仓库:

image.png

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

image.png

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

自动构建静态文件部署到Github Pages

正常情况下，我们一般是通过如下步骤进行部署的：

  1. 本地编写文章
  2. 写完之后通过yarn docs:build 生成静态文件
  3. 将生成的静态文件推送到Github Pages
  4. 访问对应网址，查看推送是否成功

上述步骤看似简单，但一旦文档过多时，生成静态文件就十分耗费时间。那有没有一种方法，可以自动构建静态文件然后部署到Github Pages上呢。Github官方提供了这个一个工具：Github Actions。利用它，我们每次编写完文章后，提交代码之后，她会自动帮我们部署静态文件。下面我们来看下具体步骤：

  1. 生成Token

点击我们的图像，依次进入Settings -> Developer settings -> Personal access tokens，点击点击生成token，名字随便起，有效期选择no，然后点击生成按钮，它就会帮我们生成一个令牌，我们可以复制下放到其他地方，因为页面刷新后这个token就没了。后面我们也会用到这个token

image.png

  1. 设置Secrets

进入存放博客源码的项目，然后点击Settings -> Secrets，点击右上角的New repository secret，新建一个Secret。注意：这里的名字要命名为ACCESS_TOKEN，然后Value就是上一步中所生成的Token

image.png

  1. 编写Action

进入项目的的Actions选项，然后新建一个workflow，默认新建的workflow名字是main.yml可以自己自定义，生成后的main.yml位于项目的.github/workflows目录下

image.png

image.png

image.png

接下来在main.yml中填入如下信息即可：

# name 可以自定义
name: Deploy GitHub Pages

# 触发条件：在push到main/master分支后，新的Github项目 应该都是main，而之前的项目一般都是master
on:
  push:
    branches:
      - main

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 生成静态文件
      - name: Build
        run: yarn && yarn docs:build

      # 部署到 GitHub Pages
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我们刚才生成的 secret
          BRANCH: gh-pages # 部署到 gh-pages 分支，因为master分支存放的一般是源码，而gh-pages分支则用来存放生成的静态文件
          FOLDER: docs/.vuepress/dist # vuepress 生成的静态文件存放的地方
  1. 验证

经过上面的的步骤配置好之后，每次提交代码之后，就可以点击仓库的Actions来查看部署情况了

image.png

如果是绿色的，说明自动部署成功了，如果是红色，那就说明部署失败。这时可以点进去看看部署失败的日志信息。

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

avatar
文章
阅读
粉丝