vuepress+github pages搭建专属个人的博客

前言

这周末抽了点时间出来弄了一下自己的博客，用的是vuepress+github pages，真的是低成本又快速（感谢尤大）。

不过我也弄了几个小时（主要是整理文章，不知不觉已经写了61篇文章）。

github：github.com/zhangwinwin…

本地搭建

跟着官网的快速入门一起搭建项目：

1、创建并进入一个新目录:

mkdir FEBlog && cd FEBlog
复制代码

2、对项目进行初始化:

yarn init
复制代码

3、安装vuepress:

yarn add -D vuepress
复制代码

4、创建文档:

mkdir docs
复制代码

在docs文件夹内生成一个README.md

---
home: true
heroImage: logo.png
heroText: zhangwinwin blog
tagline: mostly articles about frontend and webgl
actionText: Get Started →
actionLink: /webgl/
features:
  - title: network
    details: 16 articles about network
  - title: frontend
    details: 41 articles about frontend
  - title: webgl
    details: 4 articles about webgl
footer: MIT Licensed
---
复制代码

5、在package.json中添加启动和构建命令:

{
    "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
    }
}
复制代码

6、配置博客的标题和描述:
在文档目录下创建一个.vuepress目录，所有vuepress相关的文件都会被放在这里。目录结构如下：

├─ docs
 │  ├─ README.md
 │  └─ .vuepress
 │        └─ config.js
复制代码

在.vuepress文件夹下添加config.js，配置博客的标题和描述。

module.exports = {
    title: "zhangwinwin's blog",
    description: 'some technical articles on programming, especially webgl',
}
复制代码

7、本地启动:

yarn docs:dev
复制代码

vuepress会在http://localhost:8080启动一个热加载的开发服务器。

加点细节

往里面填文章（这一步最费时），填完之后设置导航栏和侧边栏，都在config.js中设置。

8、设置导航栏:
也就是页面右上角的那一块，在config.js增加一个themeConfig对象，在该对象中设置nav导航对象，属性值是一个对象数组

module.exports = {
    ...,
    themeConfig: {
        nav: [
            // 单个地址
            { text: '首页', link: '/' },
            // 多个地址
            { 
                text: '博客地址', 
                items: [
                    { text: 'Github', link: 'https://github.com/zhangwinwin/FEBlog' },
                    { text: '掘金', link: 'https://juejin.cn/user/1486195453331757' }
                ]
            }
        ]
    }
}
复制代码

9、设置侧边栏:
侧边栏可以是全部可见，也可以是设置为单个导航可见。在themeConfig对象中设置sidebar。

themeConfig: {
    // 如果sidebar为对象（也就是key:value的形式），key值为nav的内容，value为数组包含key对应文件夹的文件名。该数组内容只在访问webgl时可见
    sidebar: {
        '/webgl/': [
            ...
        ],
    },
        // 如果sidebar为数组，则设置全局的侧边栏。
    sidebar: [
        ...
    ]
}
复制代码

同时如果侧边栏不分顺序的，我们可以使用node.js全部加载，拒绝重复

const path = require('path');
const fs = require('fs');

const webglFolder = path.join(__dirname, '../webgl');

const webgl = fs.readdirSync(webglFolder).filter(md => md !== 'README.md');

module.exports = {
    themeConfig: {
        sidebar: {
            '/webgl/': webgl,
        }
    }
}
复制代码

10、修改主题色:
创建一个.vuepress/styles/palette.styl文件，代码如下

$accentColor = #3178c6
复制代码

主题色就变了

如果想自定义一些dom元素的颜色，比如默认主题的用于强调的颜色不明显。可以创建.vuepres/styles/index.styl文件来修改，使用正常的css语法就行。

.content__default strong {
    color: #3178c6;
}
复制代码

11、支持数学公式
增加两个插件

yarn add markdown-it-texmath @neilsustc/markdown-it-katex
复制代码

然后在config.js文件内增加head属性

module.exports = {
    head: [
        ['link', {rel:'stylesheet', href:'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css'}],
        ['link', {rel:'stylesheet', href:'https://gitcdn.xyz/cdn/goessner/markdown-it-texmath/master/texmath.css'}], 
        ['script', {src: 'https://github.com/markdown-it/markdown-it/blob/master/bin/markdown-it.js'}],
        ['script', {src: 'https://gitcdn.xyz/cdn/goessner/markdown-it-texmath/master/texmath.js'}],
        ['script', {src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js'}],
}
复制代码

效果图如下：这种方法会有瑕疵，望知道方法的掘友们在评论区写下你的方法

12、部署:
至此博客就算是初步完成了。接下来将它部署到免费的Github Pages上。首先在Github上新建一个仓库FEBlog。

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

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

然后在项目FEBlog目录下建立一个脚本文件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'

git push -f [email protected]:zhangwinwin/FEBlog.git master:gh-pages

cd -
复制代码

然后执行sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了gh-pages分支，我们查看下对应仓库分支的代码：切换到Settings -> Pages中可以看到部署后的博客地址：到这部署就完成了。

结尾

创作不易，烦请动动手指点一点赞。

楼主github, 如果喜欢请点一下star,对作者也是一种鼓励。