阅读 749

利用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名称,很重要的事情说三遍,只能必须完全相同,为了更具体说明,我贴一张图.

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
复制代码

项目结构目录

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

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

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

    .md文件引入vue组件

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

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

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

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


关注下面的标签,发现更多相似文章
评论