利用vuePress搭建个人博客

最近学习了一下vuePress来搭建一个个人博客,在整个过程中感受颇多,特此罗列,方便交流进步

step1 (初始化项目)

目前vuePress官方已经发布两个版本0.x and 1.x，在使用过程中发现1.x存在一些问题。例如:项目不能热更新config.js文件中的更改，navbar显示异常等问题，因此小弟建议使用0.x。

这部分可以按照官网的快速上手来初始化项目,我使用的是npm方式

   1. npm install -g vuepress (全局安装vuePress)

   2. mkdir 项目名称 (新建项目文件夹. 可以右键手动新建，也可以使用 mkdir 命令新建)

   3. npm init -y (进入刚新建的项目文件夹,初始化项目)

   4. 在项目文件夹根目录创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹,components 文件夹,override.styl文件,style.styl文件和 config.js 文件，初始项目结构如下所示：

        vuepressBlog //项目文件夹
        ├─── docs
        │   ├──── README.md //一般用来做首页
        │   └──── .vuepress //用于存放全局的配置、组件、静态资源等
        |      ├── components //该目录中的 Vue 组件将会被自动注册为全局组件
        │      ├── public // 静态资源目录
        |      ├── override.styl //用于重写默认颜色常量，或者设置新的 stylus 颜色常量。(定义的样式常量可以在vue组件中直接使用)
        |      ├── style.styl //会被自动应用的全局样式文件,具有比默认样式更高的优先级(需要覆盖的默认样式代码写在该文件里)
        │      └── config.js  //配置文件的入口文件(即配置性的东西基本在这配置)
        └── package.json

至此,项目初始化工作就已完毕,包括上面的初始化项目结构目录,后面步骤中会对目录进行进一步完善,不过都是些按需配置的工作.

step2 (项目配置)

这部分工作我们在config.js文件中做,不要问我为神马,规定,规定,规定,重要的事情说三遍!!! 能用代码呈现的问题,我一般尽量不去bb,所以,直接贴config.js文件中的代码,直接可以复制去用的.

module.exports = {
    title: 'Stone\'s blog',  //博客标题
    description: '我的个人博客', //个人描述
    head: [ // 注入到当前页面的 HTML <head> 中的标签
      ['link', {  // 增加一个自定义的 favicon(网页标签的图标)
        rel: 'icon',
        type: 'image/x-icon',
        href: './favicon.ico'
      }],
      ['link', { rel: 'apple-touch-icon', href: './favicon.ico' }], //适配移动端ico
    ],
    base: '/', // 这是部署到github相关的配置
    markdown: {
      lineNumbers: false // 代码块显示行号
    },
    themeConfig: {
      nav: [ // 导航栏配置
        {
          text: 'Home',
          link: '/' // '/'默认为docs文件夹下的README.md文件

        },
        {
          text: 'Blog',
          link: '/blog/'
        },
        {
          text: 'Space',
          link: '/space/'
        },
        {
          text: 'GitHub',
          link: 'https://github.com/HUYIJUNCODING'
        }
      ],
      : {
        '/blog/': [
          {
            title: '前端daily', /sidebar/ 侧边栏名称
            collapsable: true, // 可折叠
            children: [
                '/blog/javaScript/one', //文章地址
                '/blog/javaScript/two',
            ]
          },
          {
            title: '框架相关',
            collapsable: true,
            children: [
                '/blog/framework/vuepressBlog',
            ]
          },
          {
            title: '工具收藏',
            collapsable: true,
            children: [
                '/blog/tools/one',
                '/blog/tools/two',
            ]
          },
        ],
        '/space/': [
          {
            title: '诗和远方',
            collapsable: true,
            children: [
                '/space/poetryAndDistance/one',
            ]
          },
          {
            title: '谝闲传',
            collapsable: true,
            children: [
                '/space/talk/one',
            ]
          },
        ]
      }, // 侧边栏配置
      sidebarDepth: 2, // 侧边栏显示2级
    }
  }

至此项目你已经完成一半了,关于配置这里我重点说几个点,也是我在实现过程中遇到了问题的地方.

a. favicon存放位置(别问我为神马,n多次失败后的经验,嘿嘿嘿!!!)

    存放目录:  .vuepress -> public/favicon.ico

    引用方式:  config.js文件中 href: './favicon.ico'

b. sidebar配置方式

vuePress官方给出了两种不同的方式,可以戳这里,但是还是觉得有瑕疵,如果将两种方式结合起来使用,会有何化学效果,bling,bling,bling. 因此config.js文件中的sidebar配置方式就产生了,使用后发现确实很棒,确认过眼神,是我想要的,bling,bling,bling. 预览实现的效果,请前往我的blog.

c. navbar模块

navbar对应的模块放在docs文件夹根目录下,即与.vuepress同级,各模块以文件夹的形式建立,例如我这里的blog, space.每一个文件下可以有一个README.md文件,也可以没有,没有的话,在navbar关联路径时候需要特定指定某一个子.md文件,避免navbar切换后内容为空,因为默认会找该模块下的README.md文件.

在 package.json 文件里添加两个启动命令

"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}

`npm run dev`项目飞起

本地启动项目: npm run dev

打包项目: npm run build

到这里项目就基本完成,下来呢就是一些业务逻辑方面或者根据个人喜好锦上添花的工作,总之,基础落成,下来就剩coding的事了(写博客文章的事情,需自身去修行完成)!

step3 (部署上线)

走到这一步的小伙伴们一定是coding完成了或者基本差不多了,那麽下来我们将项目部署到GitHub上,这样仰慕你的小伙伴就可以线上访问到你的博客啦.
方式很多种,我这里只以GitHub为例 (其实我只会这个:joy: :joy: :joy:)

登录 Github 新建两个仓库

新建仓库一： GITHUBUSERNAME.github.io（不用克隆到本地）

这里的 GITHUBUSERNAME 是你的GitHub名称,是你的GitHub名称,是你的GitHub名称,很重要的事情说三遍,只能必须完全相同,为了更具体说明,我贴一张图.

然后 Repository name 就填写为：GITHUBUSERNAME.github.io ,以我的为例子就是 HUYIJUNCODING.github.io,同样贴出来一张图

ok,第一个仓库就新建好了,该仓库不用clone到本地,不用做任何操作,所有代码的修改都在第二个仓库中进行,这个仓库后面关联后只是用来存放线上发布的代码的,即dist目录下的文件

新建仓库二： 这里的仓库名可以随便起,例如:blog.github.io（克隆到本地）

这个仓库存放本地项目代码,以后的修改均在这里进行.

如果是自己从头搭建的，那就将当前博客项目根目录下的内容拷贝到仓库二，并在仓库本地根目录下创建 deploy.sh 文件，内容如下：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:USERNAME/USERNAME.github.io.git master  //这句需要配置自己的仓库地址,除过这句代码,其他均复制粘贴即可

cd -

修改deploy.sh文件(上面代码其实已经体现,不过为了说明其重要性,在这里单独再拿出来说明哈)

git push -f git@github.com:USERNAME/USERNAME.github.io.git master

// 就上面这句代码,如果你想要部署到 https://USERNAME.github.io上,你需要将USERNAME替换成你的GitHub名称,例如我的替换成 HUYIJUNCODING,
// 即git push -f git@github.com:HUYIJUNCODING/HUYIJUNCODING.github.io.git master

到这里有的小伙伴会疑惑那仓库一和仓库二如何做到关联呢,很好,如果你有这个疑问,那我这个时候就一本正经的告诉你,刚才修改的这个地方就是解决这个问题的,用来 关联两个仓库,仓库一就类似于我们的线上服务器,仓库二用于本地开发.

在 package.json 文件夹中添加发布命令

 "scripts": {
    "dev": "vuepress dev docs",  //运行项目
    "build": "vuepress build docs", //打包项目
    "deploy": "bash deploy.sh", //发布项目
    "publish": "vuepress build docs && bash deploy.sh" //打包发布一步完成(自定义的命令,为了将打包和发布合并成一步执行)
  }

一座蒂花之秀落成!

发布命令: npm run deploy  //仅仅发布项目,如果代码有更新,该操作前需要npm run build下
打包发布命令: npm run publish //先打包项目,再发布项目,就不需要再单独执行一次npm run build

完成后就可以运行自己的项目啦,这里是我的地址: huyijuncoding.github.io/

----------------------------------一条华丽的分割线------------------------------------

以为我bb完了,对吗?怎么可能,对啊,当然还没有,哈哈哈!,下面是一些友情提示和福利

.md 文件中引用vue组件方法
a. 页面覆盖引用
该引用方法会覆盖当前整个页面(除过navbar),因此展示内容都在.vue组件里面写,跟我们写vue代码就一样了.

b. 局部引用
该引用方法不会覆盖当前页面,按需引入,局部展示,实例请前往文档.

全局默认样式覆盖,颜色常量设置

 override.styl //用于重写默认颜色常量，或者设置新的 stylus 颜色常量。(定义的样式常量可以在vue组件中直接使用)
 style.styl //会被自动应用的全局样式文件,具有比默认样式更高的优先级(需要覆盖的默认样式代码写在该文件里)

当我们需要覆盖vuePress中一些默认样式,例如,navbar,sidebar字体颜色,背景色等就可以在style.styl文件中直接重写, 当需要定义些或者重写颜色常量,就可以在override.tyl中设置然后在.vue组件中直接使用.