vuepress 是 vue 提供的一个文档页生成工具, 虽然官方还没有实现博客适配, 但是现在可以通过一些小配置文件的修改, 作为一个自己的博客生成工具
2.jpeg
事前准备
为了建立博客, 我们需要一个存放博客页的地方, 最理想的还是 github 啦
建立仓库
虽然现在 github 为每个仓库都提供了 github pages 服务, 不过我们还是需要 github 提供的耳机线域名, 所以
创建一个 repository 这个 repository 的名字还有要求必须是
< 你的用户名 >.github.io
, 像我就是 mizuka-wu.github.io
申请域名和绑定 ssl 在仓库的 settings 中 Custom domain 中可以填写自己的域名, 当然直接在项目目录下建立 CNAME 文件填写自己的域名也可以, ssl 可以使用 https://certbot.eff.org/ 自主申请三个月的 (三个月续期就可以无限使用了)
下载 git, 将这个 git 项目下载到本地吧
建立 https://vuepress.vuejs.org/ 工作流
为什么使用? 主要我觉得.. 默认主题比较好看吧
基本环境搭建 (npm)
npm init(建立个 package.json)
从 https://www.gitignore.io/ 下载 gitignore 文件 推荐
wget https://www.gitignore.io/api/node,webstorm+all,visualstudiocode -o .gitignore
建立 blog 文件夹 (不用 vuepress 使用的 doc 因为我们不是建立文档)
vuepress 配置
vuepress 生成依赖于. vuepress 当然使用默认配置也可以
我们最终是用 vuepress 构建我们写好的 md 文件, 由于 github.io 相当于一个静态资源服务器, 所以路径就变得很重要了, 所以配置上我们基本就是将本身的 build 路径改为根目录下的 / post/ 然后将 index.html 这一类的资源构建完成后放入到根目录下
增加 vuepress npm i vuepress -D
在 blog 文件夹下建立. vuepress 文件夹
cd blog && mkdir .vuepress
.vuepress 文件夹下建立 config.js basePath 保证输出位置和生成文件引用资源位置正确
- const basePath = 'post'
- module.exports = {
- // meta
- title: '我的博客',
- description: '万事皆虚, 万事皆允',
- // vuepress config
- dest: basePath,
- base: `/${basePath}/`,
- serviceWorker: true,
- evergreen: true,
- ga: 'UA-112738831-1'
- }
package.json 下增加 script
- "scripts": {
- "dev": "vuepress dev blog",
- "build": "vuepress build blog",
- },
构建结束后自动移动文件 - 我的方案是通过 spwan 写脚本, 方便日后增加文件, 如果嫌麻烦 直接 build 命令下增加 && cp post/index.html ./
推荐一个 node 可以使用 es module 的方案 https://www.npmjs.com/package/esm
- /**
- * Build blog
- * @author Mizuka <mizuka.wu@outlook.com>
- */
- import spawn from 'cross-spawn'
- import { copyFile, writeFileSync } from 'fs'
- import config from './blog/.vuepress/config'
- const builder = spawn('vuepress', ['build', 'blog'])
- builder.stdout.on('data', function (s) {
- console.log(s.toString())
- })
- builder.stdout.on('end', function () {
- if (config.postsAsRoot) {
- copyFile('post/index.html', 'index.html', (err) => {
- if (err) {
- console.error(err)
- throw err
- }
- console.log('copy /post/index.html to /')
- })
- }
- })
开始编写吧!
剩下的只是在 blog 下按照自己的喜好编写 markdown 文件就好啦, 构建完毕发布到 github 上看看呗
tip 一个主页以及显示所有文章
vuepress 官方 http://caibaojian.com/vuepress/default-theme-config/#主页-homepage 提供了一个主页生成的语法 这里说一下怎么显示所有的文档
vuepress 支持在 markdown 中写 vue!
vuepress 提供了很多信息, 比如 $site.pages
在 blog/README.md 下增加一段 vue 代码
- # 所有文章
- <div style="display: flex; flex-direction: column">
- <div v-for="page of $site.pages.filter(item => item.path !=='/')" :key="page.key" style="padding: 20px 0; max-width: 33%;">
- <router-link :to="page.path">
- {{page.title}}
- <div style="color: #c2c5cd; font-size: .5rem;">{{(page.frontmatter.tags || ['无标签']).join(',')}}</div>
- </router-link>
- </div>
- </div>
完
默认的工程文件可以来我的 https://github.com/mizuka-wu/mizuka-wu.github.io 博客直接下载呀~
来源: http://www.jianshu.com/p/03ce29b7f633