使用vue-ssr製做一個靜態博客

前言

• 自上次博文又快過去一個月了，感受以前想寫的東西如今寫了也沒什麼意義。

• 這回來講下我博客改形成vue服務端渲染而且生成靜態html

• 這樣就能夠放到github-pages上了。

1、基礎框架

我使用的模板來自官方demo的修改版，vue-hackernews自帶不少功能，好比pwa。
個人修改版只是把express換成了koa,而且添加了一個生成靜態頁面的功能。

2、blog數據api化

1. 思路

個人blog以前是用的hexo的格式寫的markdown具體格式是

title: vue-ssr-static-blog
date: 2017-06-01 14:37:39//yaml object
//經過一個空白換行進行分割
[TOC]//markdown

因此正常方式就是按行分割，並按順序遍歷在遇到一個空白行時以前的就是yaml以後的就是markdown正文。

2.代碼實現

// node require
const readline = require('readline')
const path = require('path')
const fs = require('fs')
// npm require
const yaml = require('js-yaml')
/**
* 讀取yaml,markdown的混合文件
* @param {String} fileDir - 文件夾
* @param {String} fileName - 文件名
* @param {Number} end - 文件讀取截斷(可選)
* @returns {Promise.resolve(Object{yaml, markdown})} 返回一個Promise對象
*/
const readMarkdown = function (fileDir, fileName, end) {
    return new Promise(function (resolve, reject) {
        let isYaml = true
        let yamlData = ''
        let markdownData = ''
        const option = end ? { start: 0, end: end } : undefined
        const file = path.join(fileDir, fileName)
        // 設置文件讀取截斷
        const readableStream = fs.createReadStream(file, option)
        const read = readline.createInterface({ input: readableStream })
        read.on('line', function (line) {
            if (isYaml) {
                if (line === '') {
                    isYaml = false
                    return
                }
                yamlData += line + '\n'
            } else {
                markdownData += line + '\n'
            }
        })
        read.on('close', () => {
            // 把yaml字符串轉換爲yaml對象
            const yamlObj = yaml.safeLoad(yamlData)
            yamlObj['filename'] = fileName.substring(0, fileName.lastIndexOf('.'))
            resolve({ yaml: yamlObj, markdown: end ? null : markdownData })
        })
    })
}

3. 單篇blog的api實現

// npm require
const marked = require('marked-zm')
const hljs = require('highlight.js')

router.get('/api/pages/:page.json', convert(function * (ctx, next) {
    const page = ctx.params.page
    if (fs.existsSync(path.join(postDir, page + '.md'))) {
        const { yaml, markdown } = yield readMarkdown(postDir, page + '.md')
        const pageBody = markdown && marked(markdown)
        yaml['body'] = pageBody
        ctx.body = yaml
    } else {
        ctx.status = 404
        ctx.body = '404|Not Blog Page'
    }
}))

4.全部blog的yaml數據api化

// npm require
const pify = require('pify')

router.get('/api/posts.json', convert(function * (ctx, next) {
    const files = yield pify(fs.readdir)(postDir)
    const yamls = yield Promise.all(files.filter(filename => {
        if (filename.indexOf('.md') > 0) {
            return true
        }
    }).map(filename => 
        readMarkdown(postDir, filename, 300)
            .then(({ yaml }) => Promise.resolve(yaml))
    ))
    yamls.sort((a, b) => b.date - a.date)
    ctx.body = yamls
    // yield pify(fs.readdir)(postDir)
}))

3、把api整合到server.js

注意上面的api都是註冊在路由中間件上因此我只要把路由導出到server.js上便可。
api.js

const KoaRuoter = require('koa-router')

const router = new KoaRuoter()
// ... set api

module.exports = router

server.js

const router = require('./api.js')
// ... require
const app = new Koa()
// ... render function
router.get('*', isProd ? render: (ctx, next) => {
    return readyPromise.then(() => render(ctx, next))
})
app.use(router.routes()).use(router.allowedMethods())

這樣就整合完畢。

4、src下的router, store, api修改

router修改

暫時只有兩個頁面。

• posts

{ path: '/', component: postsView }

• pages

{ path: '/pages/:page', component: () => import('../views/Page') }

• scrollBehavior

scrollBehavior: (to, from) => {
    // 排除pages頁下的錨點跳轉
    if (to.path.indexOf('/pages/') === 0) {
        return
    }
    return { y: 0 }
}

store

• state

{
    activeType: null, // 當前頁的類型
    itemsPerPage: 20,
    items: [], // posts頁的list_data
    page: {}, // page頁的data
    activePage: null // 當前page頁的name
}

• actions

import {
    fetchPostsByType,
    fetchPage
} from '../api'
export default {
    // 獲取post列表數據
    FETCH_LIST_DATA: ({ commit, dispatch, state }, { type }) => {
        commit('SET_ACTIVE_TYPE', { type })
        return fetchPostsByType(type)
            .then(items => commit('SET_ITEMS', { type, items }))
    },
    // 獲取博文頁數據
    FETCH_PAGE_DATA: ({ commit, state }, { page }) => {
        commit('SET_ACTIVE_PAGE', { page })
        const now = Date.now()
        const activePage = state.page[page]
        if (!activePage || (now - activePage.__lastUpdated > 1000 * 180)) {
            return fetchPage(page)
                .then(pageData => commit('SET_PAGE', { page, pageData }))
        }
    }
}

• mutations

import Vue from 'vue'
export default {
    // 設置當前活動list頁類型
    SET_ACTIVE_TYPE: (state, { type }) => {
        state.activeType = type
    },
    // 設置list頁數據
    SET_ITEMS: (state, { items }) => {
        state.items = items
    },
    // 設置博文數據
    SET_PAGE: (state, { page, pageData }) => {
        Vue.set(state.page, page, pageData)
    },
    // 設置當前活動的博文頁id
    SET_ACTIVE_PAGE: (state, { page }) => {
        state.activePage = page
    }
}

• getters

export default {
    // getters 大多在緩存時使用
    // 獲取活動list頁數據
    activeItems (state, getters) {
        return state.items
    },
    // 獲取活動博文頁數據
    activePage (state) {
        return state.page[state.activePage]
    }
}

api 修改

• api-server

// server的api請求工具換成node-fetch並提供統一接口api.$get,api.$post
import fetch from 'node-fetch'
const api = {
    // ...
    '$get': function (url) {
        return fetch(url).then(res => res.json())
    },
    '$post': function (url, data) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            body: JSON.stringify(data)
        }).then(res => res.json())
    }
}

• api-client

// 提供和client同樣的接口
import Axios from 'axios'
const api = {
    // ....
    '$get': function (url) {
        return Axios.get(url).then(res => Promise.resolve(res.data))
    },
    '$post': function (url, data) {
        return Axios.post(url, data).then(res => Promise.resolve(res.data))
    }
}

5、components 修改

這個就不寫詳細了普通的vue路由組件而已
記得使用vuex裏的數據而且判斷若是不是server渲染時
要手動去請求數據設置到vuex上。

export default {
    // ...
    // server時的預獲取函數支持Promise對象返回
    asyncData({ store, route }){
        return new Promise()
    },
    // 設置標題
    title(){
        return '標題'
    }
}

6、靜態html及api生成

• build/generate.js

const { generateConfig, port } = require('./config')

function render (url) {
    return new Promise (function (resolve, reject) {
        const handleError = err => {
            // 重定向處理
            if (err.status == 302) {
                render(err.fullPath).then(resolve, reject)
            } else {
                reject(err)
            }
        }
    }
}
// 核心代碼，經過co除去回調地獄
const generate = (config) => co(function * () {
    let urls = {}
    const docsPath = config.docsPath
    if (typeof config.urls === 'function') {
        // 執行配置裏的urls函數獲取該靜態化的url
        urls  = yield config.urls(config.baseUrl)
    } else {
        urls = config.urls
    }
    // http靜態文件(api)生成
    for (let i = 0, len = urls.staticUrls.length; i < len; i++) {
        const url = urls.staticUrls[i]
        // 處理中文
        const decode = decodeURIComponent(url)
        const lastIndex = decode.lastIndexOf('/')
        const dirPath = decode.substring(0, lastIndex)
        if (!fs.existsSync(`${docsPath}${dirPath}`)) {
            yield fse.mkdirs(`${docsPath}${dirPath}`)
        }
        const res = yield fetch(`${config.baseUrl}${url}`).then(res => res.text())
        console.info('generate static file: ' + decode)
        yield fileSystem.writeFile(`${docsPath}${decode}`, res)
    }
    // ssr html 生成
    for (let i = 0, len = urls.renderUrls.length; i < len; i++) {
        const url = urls.renderUrls[i]
        // 處理中文和/ url處理
        const decode = url === '/' ? '' : decodeURIComponent(url)
        if (!fs.existsSync(`${docsPath}/${decode}`)) {
            yield fse.mkdirs(`${docsPath}/${decode}`)
        }
        const html = yield render(url)
        const minHtml = minify(html, minifyOpt)
        console.info('generate render: ' + decode)
        yield fileSystem.writeFile(`${docsPath}/${decode}/index.html`, minHtml)
    }
    // 生成的vue代碼拷貝和靜態文件拷貝
    yield fse.copy(resolve('../dist'), `${docsPath}/dist`)
    yield fse.move(`${docsPath}/dist/service-worker.js`, `${docsPath}/service-worker.js`)
    yield fse.copy(resolve('../public'), `${docsPath}/public`)
    yield fse.copy(resolve('../manifest.json'), `${docsPath}/manifest.json`)
})
const listens = app.listen(port, '0.0.0.0', () => {
    console.log(`server started at localhost:${port}`)
    const s = Date.now()
    const closeFun = () => {
        console.log(`generate: ${Date.now() - s}ms`)
        listens.close(()=> {process.exit(0)})
    }
    generate(generateConfig).then(closeFun)
})

• build/config.js

const fetch = require('node-fetch')
const path = require('path')
module.exports = {
    port: 8089,
    postDir: path.resolve(__dirname, '../posts'),
    generateConfig: {
        baseUrl: 'http://127.0.0.1:8089',
        docsPath: path.resolve(__dirname, '../docs'),
        urls: function (baseUrl) {
            const beforeUrl = '/api/posts.json'
            const staticUrls = [beforeUrl]
            const renderUrls = ['/']
            return fetch(`${baseUrl}${beforeUrl}`)
            .then(res => res.json())
            .then(data => {
                for (let i = 0, len = data.length; i < len; i++) {
                    const element = data[i]
                    renderUrls.push('/pages/' + element.filename)
                    const file_name = '/api/pages/' + element.filename + '.json'
                    staticUrls.push(file_name)
                }
                return Promise.resolve({
                    staticUrls,
                    renderUrls
                })
            })
        }
    }
}

6、gitment評論

• src/client-entry.js

import Gitment from 'gitment'
import 'gitment/style/default.css'

Vue.prototype.$gitment = Gitment

• src/views/Page.vue

export default {
    mounted() {
        const page = this.$route.params.page
        if (this.$gitment) {
            const gitment = new this.$gitment({
                id: page, // 可選。默認爲 location.href
                owner: 'zeromake',
                repo: 'zeromake.github.io',
                oauth: {
                    'client_id': '6f4e103c0af2b0629e01',
                    'client_secret': '22f0c21510acbdda03c9067ee3aa2aee0c805c9f'
                }
            })
            gitment.render('container')
        }
    }
}

注意若是使用了vuex-router-sync靜態化後會發生location.search和location.hash丟失。
由於window.__INITIAL_STATE__裏的路由信息被靜態化後是固定的。

1. 去掉vuex-router-sync

2. 手動補全

if (window.__INITIAL_STATE__) {
    let url = location.pathname
    if (location.search) url += location.search
    if (location.hash) url += location.hash
    const nowRoute = router.match(url)
    window.__INITIAL_STATE__.route.query = nowRoute.query
    window.__INITIAL_STATE__.route.hash = nowRoute.hash
    store.replaceState(window.__INITIAL_STATE__)
}

後記

1. 代碼：vue-ssr-blog

2. 拖了一個月才把這篇博文寫完，感受已經沒救了。

3. 而後說下請千萬不要學我用vue-ssr來作靜態博客，實在是意義不大。

4. 下一篇沒有想好寫什麼，要不寫下Promise，co實現？

5. 原文連接