用VuePress搞定你的博客(一)

·  阅读 680
用VuePress搞定你的博客(一)

前言

作为一个想成为前端工程师的大龄熊孩子,自学前端的日子已经挺久了。

然后自学的时候特想拥有一个自己的个人网站、个人博客之类的。有一天我在用vue + elementUi + koa2 + mongoDB搭建我期待已久的个人博客的时候。突然我想了一件事情,我究竟为什么要为了写个博客去用这么多技术栈呢?

于是乎懒癌发作,于是我找到了这个东西,就是VuePress。

1. VuePress

VuePress是一个极简静态网站生成器,并且包含由Vue来驱动的主题系统插件API,诞生的初衷是为了Vue团队写文档时能更加愉♂悦(笑)。它的默认主题就是Vue的文档的样式。

它是由Vue、Vue Router和webpack驱动的单页应用,它会根据Docs目录下的md文件来了使用服务器渲染(SSR)生成静态页面,因为约定大于设置所以大部分都不需要设置什么,就像Nuxt一样。

2. 安装

就像平常写项目一样,我们用npm init来生成一个目录,在目录中新建docs文件夹,之后再新建一个README.md文件,在其中随便输入一段内容,比如“# hello vuepress”

接下来我们来安装VuePress。

npm i vuepress@next -g// 安装1.X版本 虽然还在alpha阶段 但是新增的功能巨好用
npm i vuepress@next -D// 本地也来一个
复制代码

下面我们执行命令行vuepress dev docs, 输出如下为止

现在我们打开浏览器看下

嗯,跑起来!我们继续

3. 使用以及配置

docs文件夹下新建.vuepress文件夹并新建config.js文件。然后我们来做点配置(继续抄文档)

./docs/README.me添加内容 (这个内容一定要放在顶部且在markdown文字内容之前)

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 
actionLink: /zh/guide/
features:
- title: 简洁至上
  details:  Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
(markdown内容)
复制代码

./docs/.vuepress/config.js添加内容

module.exports = {
  title: 'Darki',
  themeConfig: {
    nav: [
      {text: 'home', link: '/'},
      {text: 'guichu', items:[
        {text: '葛平', link: '/geping/'},
        {text: '元首', link: '/yuanshou/'}
      ]},
      {text: 'darki', link: 'http://hujiashi.top'}
    ]
  }
}
复制代码

接下来我们在./docs/下新建./docs/guichu/geping/index.md./docs/guichu/yuanshou/index.md,并在里面随便写的点什么之类的。 目录结构如下

接下来我们重启dev,等等,重启前为了方便我们按照官方推荐给 package.json文件添加一下内容

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

停止服务,重新在命令行输入npm run docs:dev(懒得再package.js里添加命令的朋友也可以用王X牌~泥垢了!!)也可以继续用vuepress dev docs

老铁没毛病~如图所见VuePress会根据md在目录内的位置通过vue-router自动生成路径,但是由于其为静态网站生成器,所以改动markdown文档需要重启服务。

以上内容均抄了官方文档,如有雷同,本来就一样的。

不过照搬文档不是我的本意,毕竟这个是系列的(一),该帮看文档的内容也先基本交代一下。

这个是下期预告。

如何设计自己的VuePress博客

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改