vuepress和pages搭建完美的站点博客

vuePress是什么?

vuepress和pages搭建完美的站点博客

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) 启动个热加载的开发服务器。

此时界面类似于:
vuepress和pages搭建完美的站点博客
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和pages搭建完美的站点博客

更多的配置参考 VuePress 导航栏。

三 进阶配置

1 代码块高亮

在 .md 文件中书写代码时,可在 ` 后增加 js、html、json等格式类型,代码块即可按照指定类型高亮,这个很简单。
vuepress和pages搭建完美的站点博客

2 也可以自定义容器

代码所示:

::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::

效果:
vuepress和pages搭建完美的站点博客

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对象系统" }
              ],
            }
          ]
    }
}

对应的效果如下:

vuepress和pages搭建完美的站点博客

4 支持Emoji

代码所示:

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

效果:
vuepress和pages搭建完美的站点博客

这里有一份 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 动画、以及支持切换暗黑模式:

vuepress和pages搭建完美的站点博客

vuepress和pages搭建完美的站点博客

6 开启目录结构

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

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

此时效果如下:
vuepress和pages搭建完美的站点博客

7 修改主题颜色

VuePress 基于 Vue,所以主题色用的是 Vue 的绿色,那我想换 VuePress 的主题色呢?

你可以创建一个 .vuepress/styles/palette.styl 文件,文件代码如下:

$accentColor = #3178c6

此时可以发现主题颜色变了:

vuepress和pages搭建完美的站点博客

vuepress和pages搭建完美的站点博客

更多的颜色修改参考 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;
}

此时文字就清晰了很多:
vuepress和pages搭建完美的站点博客

那之前我们想提到去隐藏每篇文章的标题、作者、时间呢,其实也是类似的方式:

.page .page-title {
   display: none;
}

最后的效果如下:
vuepress和pages搭建完美的站点博客

四 部署

我们的博客就算是正式的做好了,接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库,这里我取得仓库名为:blog

vuepress和pages搭建完美的站点博客

对应,我们需要在 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 分支,我们查看下对应仓库分支的代码:

vuepress和pages搭建完美的站点博客

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

vuepress和pages搭建完美的站点博客

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

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

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

Gitee 导入仓库

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

vuepress和pages搭建完美的站点博客

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

1. 手动同步

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

vuepress和pages搭建完美的站点博客

有点麻烦的是,我们需要在推送到 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

搜索公粽号:龙哥手记 「加群进阶」, 进龙歌唯一的读者群。
如果有错误或者不严谨的地方,请务必得出指正,非常感谢。如果喜欢或者 有所启发,欢迎star, 对作者也是一种鼓励。
跟着龙哥一起掉亿点点秀发吧~, `别忘给我点赞???? 哥哥姐姐们再走啊!!!

上一篇:2016年11款最佳企业级云管理工具:如何管理云计算的使用和成本?


下一篇:用通俗的语言带你理解RPC原理