最近学习了一下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  中的标签      ['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级    }  }复制代码

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

存放目录:  .vuepress -> public/favicon.ico    引用方式:  config.js文件中 href: './favicon.ico'复制代码

• 在 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/distgit initgit add -Agit 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复制代码

• 完成后就可以运行自己的项目啦,这里是我的地址:

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

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

• .md 文件中引用vue组件方法

  a. 页面覆盖引用
  该引用方法会覆盖当前整个页面(除过navbar),因此展示内容都在.vue组件里面写,跟我们写vue代码就一样了.
    b. 局部引用
        该引用方法不会覆盖当前页面,按需引入,局部展示,实例请.

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

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

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