vuepress和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 把 VuePress 安装为本地依赖

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 导航栏。

三 进阶配置

在 .md 文件中书写代码时，可在 ``` 后增加 js、html、json等格式类型，代码块即可按照指定类型高亮，这个很简单。

代码所示：

::: tip 提示 this is a tip ::: ::: warning 注意 this is a tip ::: ::: danger 警告 this is a tip :::

效果：

现在我们添加一些 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对象系统" } ], } ] } }

对应的效果如下：

代码所示：

:tada: :100: :bamboo: :gift_heart: :fire:

效果：

这里有一份 Emoji 大全 https://www.webfx.com/tools/emoji-cheat-sheet/ 给你参考下用

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们先可以直接使用主题插件，这里使用的主题是 vuepress-theme-rec 这个

现在我们安装它

npm install vuepress-theme-reco --save-dev # or yarn add vuepress-theme-reco

同样的道理，然后在 config.js 里引用该主题：

module.exports = { // ... theme: 'reco' // ... }

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

在原本的主题里，我们发现每篇文章的目录结构出现在左侧：而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果你要全局开启，可在页面 config.js 里设置开启：

module.exports = { //... themeConfig: { subSidebar: 'auto' } //... }

此时效果如下：

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 = { // 路径名为 "//" 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://.github.io/ git push -f master:gh-pages cd -

然后命令行切换到 ByteGuide 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：

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

像我最后生成的地址就是 https://mqyqingfeng.github.io/blog/

至此，我们完成了 VuePress 和 Github Pages 的部署。

我们成功的用 VuePress 搭建了博客并部署到 Github Pages，但由于 Github 的访问问题，我们可以选择把仓库部署到 Gitee 一份，利用 Gitee 的 Pages 服务再生成一份静态网站用于备用。

Gitee 导入仓库

上篇我们已经在 Github 创建了博客仓库，现在我们在 Gitee 绑定 Github 账号后，选择仓库导入：

仓库建立后，问题也来了，即我们一份本地仓库，如何保证 Github 和 Gitee 仓库代码的同步呢？

在 Gitee 的项目主页，提供了同步的按钮，你只用点一下，即可与 Github 同步更新，但是注意这里的同步功能默认是强制同步。

有点麻烦的是，我们需要在推送到 Github 后，再到 Gitee 项目主页手动点击一下。

除此之外，我们也可以在 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://.github.io/ 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

GitHub JavaScript Vue 云存储网关 CSG 云解析服务 DNS

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。