最快用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博客直接下載呀~