前言
这周末抽了点时间出来弄了一下自己的博客，用的是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/katex@0.15.1/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/katex@0.15.1/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 git@github.com:zhangwinwin/FEBlog.git master:gh-pages
cd -
然后执行sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了gh-pages分支，我们查看下对应仓库分支的代码：
切换到
Settings -> Pages中可以看到部署后的博客地址：
到这部署就完成了。
结尾
创作不易，烦请动动手指点一点赞。
楼主github, 如果喜欢请点一下star,对作者也是一种鼓励。
