最快用vuepress+github搭建一个博客

vuepress是vue提供的一个文档页生成工具，虽然官方尚未实现博客适配，可是如今能够经过一些小配置文件的修改，做为一个本身的博客生成工具

事前准备

为了创建博客，咱们须要一个存放博客页的地方，最理想的仍是github啦

创建仓库

虽然如今github为每一个仓库都提供了github pages服务，不过咱们仍是须要github提供的耳机线域名，因此

1. 建立一个repository 这个repository的名字还有要求必须是<你的用户名>.github.io,像我就是mizuka-wu.github.io
2. 申请域名和绑定ssl 在仓库的settings中Custom domain中能够填写本身的域名，固然直接在项目目录下创建CNAME文件填写本身的域名也能够，ssl可使用certbot自主申请三个月的（三个月续期就能够无限使用了）
3. 下载git，将这个git项目下载到本地吧

创建vuepress工做流

为何使用？主要我以为。。默认主题比较好看吧

基本环境搭建（npm）

1. npm init(创建个package.json)
2. 从www.gitignore.io/下载gitignore文件 推荐wget https://www.gitignore.io/api/node,webstorm+all,visualstudiocode -o .gitignore
3. 创建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的方案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官方提供了一个主页生成的语法 这里说一下怎么显示全部的文档

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

完

默认的工程文件能够来个人github博客直接下载呀~