还不会搭建站点博客？VuePress + Github pages搞定
vuePress是什么？
VuePress 俺简单介绍下，是国内有名大神的尤雨溪发布的全新基于 vue 静态网站的生成器，内置的有 webpack组件，可以拿来写文档，主要是md格式。做出的感觉就是简约，性能也比较好，你也可以自定义很多的插件。响应式布局，PC端、手机端都能显示，觉得还不错就选它。
类似的建站工具其实有很多，你也许了解一点，譬如 Wordpress，Jekyll, Hexo等，WordPress 这需要买台云服务器才行，太贵哈哈 懂的都懂；Jekyll 是 Github-Page 默认支持的，听说操作起来比较复杂，没有用过不做评价了；Hexo 之前一直在用，但觉得花里胡哨的，风格上简洁优雅，组件太多不够轻量。自从遇见 VuePress，嗯，就是它了~
一 本地搭建
快速开始同 VuePress 官网:
1 创建并进入一个新目录
//创建项目文件夹
mkdir ByteGuide && cd ByteGuide
2 进入 ByteGuide 文件夹，使用你喜欢的包管理器进行初始化
//yarn管理器
//npm包管理器
yarn init # npm init(默认yes)
3 把 VuePre***为本地依赖
yarn add -D vuepress # npm install -D vuepress
4 初始化项目使用 npm init 或 npm init -y（默认yes）
npm init -y
5 创建属于你的第一篇文档，VuePress 会把 docs 作为文档根目录(/)，那这个 README.md 这个相当于你的主页：
mkdir docs && echo '#Hello VuePress' > docs/README.md
目录结构
在 Myblog 项目文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，基础项目结构如下所示：
Myblog
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
| |—— notes //放.md格式的文件
└── package.json
二 基础配置
1 在 config.js 文件中配置网站标题、描述、主题等信息
module.exports = {
title: 'blog',
description: '个人网站',
base: '/',
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
nav:[
{ text: '首页', link:'/' },
{
text:'阿龙的 'JavaScript 博客',
items: [
{text: 'Java基础', link: '/accumulate/' },
{text: '图解算法', link: '/algorithm/'},
{text: '手摸手造一个RPC', link: 'http://dubbo.io/'}
]
}
]
}
}
2 在 package.json 文件里加两个启动命令
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
3 一切就绪 本地启动服务器 跑起来看看吧
//两种方式启动
yarn docs:dev # npm run docs:dev
它会在 http://localhost:8080(opens new window) 启动个热加载的开发服务器。
此时界面类似于：
4 添加导航栏
在页首的右上角添加导航栏 items，修改 config.js:
module.exports = {
title: '...',
description: '...',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{
text: '龙歌的 JavaScript 博客',
items: [
{ text: 'CSDN', link: 'https://blog.csdn.net/weixin_45817252?type=blog' },
{ text: '掘金', link: 'https://juejin.cn/user/1935575059273485' }
]
}
]
}
}
效果如下：
更多的配置参考 VuePress 导航栏。
三 进阶配置
1 代码块高亮
在 .md 文件中书写代码时，可在 ``` 后增加 js、html、json等格式类型，代码块即可按照指定类型高亮，这个很简单。
2 也可以自定义容器
代码所示：
::: tip 提示
this is a tip
:::
::: warning 注意
this is a tip
:::
::: danger 警告
this is a tip
:::
效果：
3 添加侧边栏
现在我们添加一些 md 文档，目前文档的目录如下：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ notes
| └─ 图解路由协议.md
| └─ redis对象系统.md
└─ package.json
我们在 config.js 配置如下：
module.exports = {
themeConfig: {
nav: [...],
sidebar: [
{
title: '以前的文章',
path: '/',
collapsable: false, // 不折叠
children: [
{ title: "学前必读", path: "/" }
]
},
{
title: "学起来",
path: '/notes/图解路由协议',
collapsable: false, // 不折叠
children: [
{ title: "图解路由协议", path: "/notes/图解路由协议" },
{ title: "redis对象系统", path: "/notes/redis对象系统" }
],
}
]
}
}
对应的效果如下：
4 支持Emoji
代码所示：
:tada: :100: :bamboo: :gift_heart: :fire:
效果：
这里有一份 Emoji 大全 https://www.webfx.com/tools/emoji-cheat-sheet/ 给你参考下用
5 换主题
现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们先可以直接使用主题插件，这里使用的主题是 vuepress-theme-rec 这个
现在我们安装它
npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco
同样的道理，然后在 config.js 里引用该主题：
module.exports = {
// ...
theme: 'reco'
// ...
}
刷新一下页面，我们会发现一些细节的改变，比如加载时的 loading 动画、以及支持切换暗黑模式：
6 开启目录结构
在原本的主题里，我们发现每篇文章的目录结构出现在左侧：而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果你要全局开启，可在页面 config.js 里设置开启：
module.exports = {
//...
themeConfig: {
subSidebar: 'auto'
}
//...
}
此时效果如下：
7 修改主题颜色
VuePress 基于 Vue，所以主题色用的是 Vue 的绿色，那我想换 VuePress 的主题色呢？
你可以创建一个 .vuepress/styles/palette.styl 文件，文件代码如下：
$accentColor = #3178c6
此时可以发现主题颜色变了：
更多的颜色修改参考 VuePress 的 palette.styl。
8 自定义修改样式
如果你想自定义修改一些 DOM 元素的样式呢？就比如在暗黑模式，我们发现用作强调的文字颜色比较暗淡，在暗黑模式下看不清楚，我想改下这个文字的颜色和背景色呢？
而 VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。
我们在 .vupress 文件夹下创建这个目录，然后创建 index.styl 文件，代码如下：
// 通过检查，查看元素样式声明
.dark .content__default code {
background-color: rgba(58,58,92,0.7);
color: #fff;
}
此时文字就清晰了很多：
那之前我们想提到去隐藏每篇文章的标题、作者、时间呢，其实也是类似的方式：
.page .page-title {
display: none;
}
最后的效果如下：
四 部署
我们的博客就算是正式的做好了，接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：blog。
对应，我们需要在 config.js 添加一个 base 路径配置：
module.exports = {
// 路径名为 "/<REPO>/"
base: '/blog/',
//...
}
最终的 config.js 文件内容为：
module.exports = {
title: 'blog',
description: '个人网站',
base: '/blog/',
theme: 'reco',
locales: {
'/': {
lang: 'zh-CN'
}
},
themeConfig: {
// lastUpdated: '上次更新',
nav:[
{ text: '首页', link:'/' },
{
text: '阿龙的 JavaScript 博客',
items: [
{text: '博客搭建', link: '/notes/'},
{text: '图解高频算法', link: '/algorithm/'},
{text: '手摸手造一个RPC', link: 'http://dubbo.io/'}
],
}
],
subSidebar: 'auto',
sidebar: [
{
title: '欢迎学习',
path: '/',
collapsable: false,
children: [
{ title: "学前必读", path: "/" }
]
},
{
title: "文章",
path: '/notes/redis对象系统',
collapsable: false,
children: [
{title: "redis对象系统", path: "./notes/redis对象系统"},
{title: "图解路由协议", path: "./notes/图解路由协议"}
],
}
]
}
}
然后我们在项目 ByteGuide 目录下建立一个脚本文件：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 master:gh-pages
cd -
然后命令行切换到 ByteGuide 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：
我们可以在仓库的 Settings -> Pages 中看到最后的地址：
像我最后生成的地址就是 https://mqyqingfeng.github.io/blog/
至此，我们完成了 VuePress 和 Github Pages 的部署。
我们成功的用 VuePre***了博客并部署到 Github Pages，但由于 Github 的访问问题，我们可以选择把仓库部署到 Gitee 一份，利用 Gitee 的 Pages 服务再生成一份静态网站用于备用。
Gitee 导入仓库
上篇我们已经在 Github 创建了博客仓库，现在我们在 Gitee 绑定 Github 账号后，选择仓库导入：
仓库建立后，问题也来了，即我们一份本地仓库，如何保证 Github 和 Gitee 仓库代码的同步呢？
1. 手动同步
在 Gitee 的项目主页，提供了同步的按钮，你只用点一下，即可与 Github 同步更新，但是注意这里的同步功能默认是强制同步。
有点麻烦的是，我们需要在推送到 Github 后，再到 Gitee 项目主页手动点击一下。
2. 推送两个仓库
除此之外，我们也可以在 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:Datalong/ByteGuide.git master:gh-pages
git push -f git@gitee.com:Datalong/ByteGuide.git master:gh-pages
cd -
当我们执行 sh deploy.sh 的时候，就会自动往两个仓库里推送。
至此，我们实现了 Github 与 Gitee 代码仓库的同步。
唯一不足的地方是每次需要更新博客仓库你都需要手动点击同步，是有点麻烦，下篇着重描述下这里，再见。
系列文章
系列文章目录地址：https://github.com/Datalong/blog
最后求求关注
vx工粽号：《龙歌爱玛》 专注图解技术，校招大厂面试，个人认知体系成长。还有大量福利（视频，电子书，思维导图等），等待这你来哦
查看40道真题和解析
