vuepress爬坑之旅

时间  2019-11-07
标签 vuepress 之旅 繁體版
原文   原文链接

前言

前些天我忽然想搞个我的博客，本身搞网站以为太麻烦，百度来百度去好像hexo很不错。但是不知道为啥，我搞了一个星期都没搞出来，不是这错就是那错。怎么分类，怎么管理标签又是一塌糊涂，文档写起来又很麻烦。而后我就放弃了。没过多久我就了解到还有一个东西叫vuepress。虽然如今立刻要9102年了，但是我vue还没用过几回。因而我决定拿这个项目练练手，顺便学习下vue。事实证实这又是一次踩坑，不过结果还好，踩坑好久以后搞出来网站了。css

1.vuepress是什么

vuepress是基于vue的静态博客系统。何为静态博客？静态博客就是不用跟后台打交道，只有展现功能的博客。也就是不能评论，不能点赞，不能在线讨论等。哎，看到这些就憋屈，没有评论万一有人看上我怎么办？可是要交互，就须要数据库就须要有后台。这些搞起来就没完没了。还须要花大把银子。思来想去，想来思去，最后决定仍是不要女友了。就搞个静态博客了，末尾我留下个人微信就行了。看上个人妹子能够加我（偷笑.jpg）。html

2.安装vuepress

安装vuepress，官网推荐是使用yarn。事实证实官方推荐是正确的。我在个人window上使用npm结果报错不断。最后仍是改用了yarn。前端

yarn是什么？这个1年前我就知道了，不过如今仍是第一次用。你能够把yarn当成npm。它只是比npm优秀一丢丢。使用的命令又不太同样而已。做用都是同样的，也都是从npm库里下载模块。vue

安装步骤：node

  1. 新建一个文件夹，好比名为blog
  2. 使用管理员身份运行命令行工具，进入刚才新建的blog文件夹，执行yarn init -y生成package.json
  3. 执行yarn global add vuepress 全局安装vuepress，再执行yarn add -D vuepress再本地安装yarn
  4. 命令行执行mkdir docs,在blog文件夹下新建docs文件夹。
  5. 命令行执行echo '# hello world' > docs/README.md 在docs文件夹下新建一个markdown文件
  6. 执行npx vuepress dev docs 预览效果。

2.1 步骤详解：

第3步解释下，全局安装vuepress是为了方便在命令行调用vuepress命令。在本地也能够不用安装vuepress，在本地安装的目的是为了解耦。当全局vuepress升级到其余版本后，本地还可使用以前版本的vuepress,避免由于升级而致使项目不可用。全局安装只是为了命令行使用命令，实际用到的代码仍是本地的代码。git

从第1步到第4步，执行完后，文件夹的目录结果以下：github

blog文件下有package.json和docs两个文件(夹)，其实blog文件夹下还有node_modules文件夹，我这里忽略了，你知道有就行，我就不在命令行打印出来了。web

.
|-blog
  |-docs
    |-README.md
  |-package.json
复制代码

执行vuepress dev .结果以下：shell

命令行：数据库

命令行效果

浏览器：

浏览器效果

浏览器显示的格式不太对，应该显示成标题1的格式，结果显示成了'# Hello VuePress!'。这个是常常出现的事情。不用紧，稍后咱们用本身的markdown工具，编辑下docs文件夹下README.md就能够了。

2.2 修改package.json

在package.json中加入一些命令，简化咱们的工做。

"scripts": {
	"docs:dev": "vuepress dev docs",
	"docs:build": "vuepress build docs"
}
复制代码

当咱们运行yarn docs:dev 就至关于运行vuepress dev docs

当咱们运行yarn docs:build 就至关于运行vuepress build docs

此时package.json完整代码以下:

{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
	"scripts": {
		"docs:dev": "vuepress dev docs",
		"docs:build": "vuepress build docs"
	},
  "license": "MIT"
}

复制代码

2.3 预览效果

命令行执行 yarn docs:dev 预览效果。这时候你能够用你的markdown工具修改docs下README.md的内容，修改完了浏览器会自动刷新，展示最新内容。

2.4 打包

命令行执行yarn docs:build,vuepress就会把咱们的markdown文件打包生成html文件。打包会在docs文件夹下生成.vuepress文件夹，生成的html文件被存放在.vuepress文件夹下的dist文件夹下。

咱们能够在.vuepress下新建一个config.js文件，经过修改dest能够把文件生成到不一样的目录。我就不修改了。

生成的html文件能够部署到任何静态服务器上，我是上传到了github上。

此时目录结构如图所示:

|-blog
  |-docs
  |  |-.vuepress
  |  |  |-dist
  |  |  |  |-404.html
  |  |  |  |-assets
  |  |  |  |  |-css
  |  |  |  |  |  |-0.styles.f164d2bb.css
  |  |  |  |  |-img
  |  |  |  |  |  |-search.83621669.svg
  |  |  |  |  |-js
  |  |  |  |  |  |-2.aae77c18.js
  |  |  |  |  |  |-3.48b292a8.js
  |  |  |  |  |  |-4.6947e3e9.js
  |  |  |  |  |  |-app.0ffe2193.js
  |  |  |  |-index.html
  |  |-README.md
  |-package.json
复制代码

2.5 总结

以上是vuepress的基本用法，相信大多数人均可以执行成功。接下来就是进阶阶段了。

3. 配置favorite.icon

这是一个很小的知识点，可是折腾起来也很麻烦。favorite.icon就是这个东东。

image

配置这个的步骤以下:

1.制做icon,尺寸能够是16*16 或者 32*32 或者64*64。具体什么尺寸本身定就能够。能够ps制做一个或者百度下载一个

2.在.vuepress下新建public文件夹，把制做好的icon放进去。

3.在.vuepress下新建config.js配置文件。config.js中能够配置的项很是多，能够点击这里查看配置，我这里只讲最基本的。

此时的目录结构以下：

|-blog
  |-.gitignore
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-README.md
  |-package.json
  
复制代码

4.配置config.js

module.exports = {
	title:"前端蜗牛路",
	description:"郭邯同窗的我的博客",
	head:[
		['link',{rel:'icon',href:'/favicon.ico'}]
	]
}
复制代码

注意这里的link的href是直接连接到根目录，我以前写的是/public/favicon.ico结果致使一直出不来。

好了，如今从新命令行从新运行下yarn docs:dev 就能够看到效果了(有时候刷新下就能够了，有时候不行)。

添加了favorite

4. 配置导航栏

4.1 目标是是什么

我想要这样一个导航栏，分别为首页、文章、掘金、GitHub、知乎、女友。

  • 点击“首页”就回到博客的首页
  • 点击“文章”显示下拉列表,下拉列表有两个项“软技能”和“webgl”。这是两类我想分享的博客内容
  • 点击“掘金”、“GitHub”、“知乎”就跳到我相应的其余网站主页
  • “女友”就是我一些无病呻吟的感慨（拿键盘捂脸）

4.2 配置config.js

有了以上目标咱们配置config.js。咱们修改config.js以下：

其中themeConfig下的nav就是咱们配置的导航栏。

module.exports = {
	title:"前端蜗牛路",
	description:"郭邯同窗的我的博客",
	head:[
		['link',{rel:'icon',href:'/favicon.ico'}]
	],
  themeConfig: {
    nav: [
        { text: '首页', link: '/' },
        { 
          text: '文章', 
          items:[
            { text: '软技能' , link:'/softskill/'},
            { text: 'webgl' , link:'/webgl/'}
          ]
        },
        { text: '掘金', link: 'https://juejin.im/user/5b0f41de518825153a440dd9' },
        { text: 'GitHub', link: 'https://github.com/ggwork'},
        { text: '知乎', link: 'https://www.zhihu.com/people/yagb/activities'},
        { text: '女友', link: '/girlfriend/'}
      ],
  }
}
复制代码

配置中text是显示在导航栏上的文字，link是连接，items是二级菜单。items是能够嵌套的，从而能够显示多级菜单。

配置前：

nav配置前

配置后：

nav配置后

4.3 新建目录

在导航栏上咱们除了外链外，咱们还配置了几个目前还不存在的连接'/softskill/'、'/webgl/'、'/girlfriend/'。这些连接对应咱们服务器上的对应的目录。若是咱们服务器上没有这些目录，点击这些菜单的话就会报404错误。

因此咱们要新建这些目录（文件夹）

在.vuepress同级目录下新建softskil、webgl和girlfriend文件夹。每一个文件夹下都必须存在一个readme.md文件、不然就会报错。

此时的目录结构以下：

|-blog
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-girlfriend
  |  |  |-readme.md
  |  |-README.md
  |  |-softskill
  |  |  |-readme.md
  |  |-webgl
  |  |  |-readme.md
  |-package.json
复制代码

回到浏览器，刷新下，点击下导航栏，你就能够发现，导航栏已经能够访问了。好比点击“女友”。结果以下:

导航栏-女友

自此咱们导航栏就配置完成了。关于配置选项的详情，请点击这里查看：主题配置

5. 配置侧边栏

5.1 需求说明

下面咱们开始配置侧边栏，咱们以导航栏文章选项下的“软技能”为例。我须要点击“软技能”以后，左边出现侧边栏，显示我softskill文件夹下我须要分享的文章，这样方便网友经过点击侧边栏查看不一样的文章。

5.2 配置config.js

配置侧边栏还须要配置config.js，配置以下：

module.exports = {
  title: '前端蜗牛路',
  description: '郭邯同窗的我的博客',
  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      {
        text: '文章',
        items: [
          { text: '软技能', link: '/softskill/' },
          { text: 'webgl', link: '/webgl/' }
        ]
      },
      { text: '掘金', link: 'https://juejin.im/user/5b0f41de518825153a440dd9' },
      { text: 'GitHub', link: 'https://github.com/ggwork' },
      { text: '知乎', link: 'https://www.zhihu.com/people/yagb/activities' },
      { text: '女友', link: '/girlfriend/' }
    ],
    sidebar: {
      '/softskill/': [
        '',
        '软技能-代码以外的生存指南1（职业篇）',
        '软技能-代码以外的生存指南2（自我营销篇）',
        '软技能-代码以外的生存指南3（自我学习）',
        '软技能-代码以外的生存指南4（生产力）',
        '软技能-代码以外的生存指南5（理财）',
        '软技能-代码以外的生存指南6（健身）',
        '软技能-代码以外的生存指南7（精神）'
      ],
      '/webgl/': ['']
    }
  }
}


复制代码

sidebar就是侧边栏，softskill就是咱们的软技能。softskill下的''的意思是，点击“软技能”显示其下的readme.md文件。其余的都是对应的markdown文件。

5.3 新建markdown文件

此时目录结构以下：

.
|-blog
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-girlfriend
  |  |  |-readme.md
  |  |-README.md
  |  |-softskill
  |  |  |-readme.md
  |  |  |-软技能-代码以外的生存指南1（职业篇）.md
  |  |  |-软技能-代码以外的生存指南2（自我营销篇）.md
  |  |  |-软技能-代码以外的生存指南3（自我学习）.md
  |  |  |-软技能-代码以外的生存指南4（生产力）.md
  |  |  |-软技能-代码以外的生存指南5（理财）.md
  |  |  |-软技能-代码以外的生存指南6（健身）.md
  |  |  |-软技能-代码以外的生存指南7（精神）.md
  |  |-webgl
  |  |  |-readme.md
复制代码

刷新下浏览器，已经成功了。

侧边栏软技能

这里有一点须要注意：在config.js中配置的侧边栏的文字跟浏览器侧边栏显示的文字多是不同的。在config中配置的文字是对应的markdown文章的文件名。在浏览器侧边栏显示的文字是markdown文章内容里第一个格式为标题1的文字

6.静态资源

咱们写markdown中，有不少时候都须要引入静态资源，好比图片和一些js。vuepress提供了对应的引入静态资源的方法。详情请点击这里，静态资源。

不过，我我的不喜欢这样，由于有时候个人博客常常须要复制粘贴到其余网站。这时候若是用静态资源就就比较麻烦了，每次都要上传排版。这里我推荐腾讯云的对象存储，为何推荐它呢？由于它是免费的，并且有50G的空间，足够我用好多年了。

详细用法请点击这里。腾讯对象存储

7. 部署

对于部署，官网提供了一个.sh文件，结果悲催啊，windows上不能运行.sh文件。反正按照官网给的教程，搞了好久都没成功。目前据我百度的结果vuepress没有什么自动部署的方法，最后我仍是老老实实的每次打包后，手动使用git把dist文件夹上传到本身的github page上。

对于如何建立github page你能够百度，这个很简单，我就不分享了。若是你有好的部署方法请告诉我。

官网推荐的部署方法地址在这里：部署

8.其余高级用法

vuepress简单可是也蛮强大的，经过以上的步骤咱们基本上能够建一个看起来丑丑的，可是却很实用的网站。vuepress是能够美化的，也有不少高级的用法，好比markdown语法的扩展简直牛逼了，还能够本身建立组件。这些我就不介绍了，我有个丑丑的网站就满足了。更详细的用法请点击这里：

vuepress文档

另外推荐下我本身的网站：前端蜗牛路

vuepress的demo我已经上传到github了，能够查看这里。vuepress的demo

再啰嗦下，显示的目录结构大家有没有以为很帅，这个工具是我本身开发的,ctree-cli，欢迎下载使用。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程