摘要：當(dāng)函數(shù)完成前端小白徒手搭博客之路前端小白徒手搭博客之路前言作為一個(gè)前端小白，一直以來，樣式布局設(shè)計(jì)靈感都是自己的痛點(diǎn)。

本博客為最最最基本的html靜態(tài)頁面打造而成。

github地址
線上地址

在github上搭建博客，免費(fèi)又方便，具體可以參考這兩篇文章：
怎樣在github上創(chuàng)建一個(gè)github pages的博客
手把手教你在Github Pages搭建自己寫的頁面

如果想打造博客專屬域名，如下：

1. 域名購(gòu)買與解析

這里我們可以通過萬網(wǎng)申請(qǐng)，查找你想申請(qǐng)域名，購(gòu)買就可以了。

購(gòu)買域名完成，進(jìn)入管理控制臺(tái)：

找到你已經(jīng)購(gòu)買的域名，點(diǎn)擊解析，進(jìn)入如下頁面：

添加兩條記錄：

主機(jī)記錄www對(duì)應(yīng) www.域名

主機(jī)記錄@對(duì)應(yīng) 域名

記錄類型-CNAME
記錄值-你的倉(cāng)庫(kù)名

2. CNAME

在你的倉(cāng)庫(kù)創(chuàng)建一個(gè)CNAME文件，內(nèi)容為你的域名，例如:

3. Settings

在倉(cāng)庫(kù)設(shè)置你的域名：

現(xiàn)在通過購(gòu)買的域名訪問你的個(gè)人站點(diǎn)了。

接下來你可以開始為你博客大展手腳添加各種炫酷樣式。

博客目錄結(jié)構(gòu)：

1. BootCDN

穩(wěn)定、快速、免費(fèi)的前端開源項(xiàng)目 CDN 加速服務(wù)。

我們可以從BootCDN引用需要用到的JS庫(kù)

// index.html

    

2. Iconfont

阿里巴巴矢量圖標(biāo)庫(kù)，阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺(tái)。

注冊(cè)一個(gè)用戶后，新建項(xiàng)目，把需要用到的圖標(biāo)加入到項(xiàng)目中，生成代碼，直接引入就可以用了。

// index.html

3. 極簡(jiǎn)圖床

免費(fèi)圖床，markdown鏈接好利器。

4. 評(píng)論

Gitment：使用 GitHub Issues 搭建評(píng)論系統(tǒng)

5. 文章

博客所有文章都放在md目錄下，用來直接訪問，只支持Markdown。

由于沒有服務(wù)器，所以用catalogue.js來放靜態(tài)數(shù)據(jù)。

function JsonDate() {}

JsonDate.prototype.catalogues = [{"id":"fb6d78f11adcee47d22c2d618694e152","title":"異步編程","year":2018,"createTime":1528103681796,"abstract":"如何維護(hù)本體希望看到如下輸出結(jié)果：但事實(shí)上，你會(huì)看到：怎么回事？大多數(shù)情況下，當(dāng)一個(gè)函數(shù)嵌套在另一個(gè)函數(shù)中時(shí)，它就會(huì)自動(dòng)繼承父宿主函數(shù)的作用域，因而就能訪問所有的變量了。那么，為什么嵌套的回調(diào)函數(shù)卻沒有返回正確的屬性的值呢？這個(gè)問題歸根于關(guān)鍵字和異步回調(diào)函數(shù)本身。別忘了，當(dāng)你調(diào)用這樣的函數(shù)的時(shí)候，它會(huì)首先初始化自己，然后調(diào)用底層的操作系統(tǒng)函數(shù)，并把回調(diào)函數(shù)插到事件隊(duì)列中去。執(zhí)行完會(huì)立即返回給函數(shù)，然后退出。當(dāng)函數(shù)完成...","next":"前端小白徒手搭博客之路"},{"id":"642ac0b4cacd8745d644aaf45d1cca7e","title":"前端小白徒手搭博客之路","year":2018,"createTime":1528103681794,"abstract":"前言作為一個(gè)前端小白，一直以來，樣式、布局、設(shè)計(jì)、靈感都是自己的痛點(diǎn)?？吹角岸巳耸侩S手一來就是一個(gè)高大上的網(wǎng)頁，真是羨慕不已。所以決定從開始，打好基礎(chǔ)，寫一個(gè)傳統(tǒng)的靜態(tài)頁面博客。項(xiàng)目地址線上地址我選擇在上搭建博客，具體可以參考這兩篇文章：怎樣在上創(chuàng)建一個(gè)的博客手把手教你在搭建自己寫的頁面如果想打造博客專屬域名，如下：域名購(gòu)買與解析這里我們可以通過萬網(wǎng)申請(qǐng)，查找你想申請(qǐng)域名，購(gòu)買就可以了。購(gòu)買域名完成，進(jìn)入管理控制臺(tái)：...","next":"What is Node","prev":"異步編程"},{"id":"08ad6d06e8a9c0c8aa4f4c45381e955d","title":"What is Node","year":2018,"createTime":1528103681789,"abstract":"出現(xiàn)之前應(yīng)用往往基于客戶端服務(wù)器模式，當(dāng)客服端向服務(wù)器請(qǐng)求資源時(shí)，服務(wù)器會(huì)響應(yīng)這個(gè)請(qǐng)求并且返回響應(yīng)的資源。服務(wù)器只會(huì)在接收到客服端請(qǐng)求時(shí)才會(huì)做出響應(yīng)，同時(shí)會(huì)在響應(yīng)結(jié)束后關(guān)閉與客戶端的連接。這種設(shè)計(jì)模式需要考慮到效率問題，因?yàn)槊恳粋€(gè)請(qǐng)求都需要處理時(shí)間和資源。因此，服務(wù)器在每一次處理請(qǐng)求的資源后應(yīng)該關(guān)閉這個(gè)連接，以便于響應(yīng)其他請(qǐng)求。如果同時(shí)有成千上萬個(gè)請(qǐng)求同時(shí)發(fā)往服務(wù)器，服務(wù)器會(huì)變成什么樣子呢？線程是系統(tǒng)能夠并行處理多任...","next":"Promise對(duì)象","prev":"前端小白徒手搭博客之路"},{"id":"00dada12c7e31b9f7bb37a3b2af7f7d4","title":"Promise對(duì)象","year":2018,"createTime":1528103681787,"abstract":"的含義所謂，簡(jiǎn)單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語法上說，是一個(gè)對(duì)象，從它可以獲取異步操作的消息。對(duì)象有一下兩個(gè)特點(diǎn)：對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：（進(jìn)行中）、（已成功）和（已失?。?。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)。一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。對(duì)象的狀態(tài)改變，只有兩種可能...","prev":"What is Node"}];

JsonDate.prototype.getCatalogues = function() {
    return this.catalogues;
};

JsonDate.prototype.getCatalogueInfo = function(index) {
    return this.catalogues[index];
};

這樣，就可以在頁面上引用：

So，發(fā)布新文章的時(shí)候，就很簡(jiǎn)單的了，只需把文件添加到md目錄下，再修改一下下catalogue.js的catalogues數(shù)據(jù)就行。

..因?yàn)樘闊┝?，便寫?del>一鍵發(fā)布的腳本shell.js。

shell.js是基于node環(huán)境，隨便寫寫，應(yīng)該可以用，貼上代碼：

"use strict";

const fs = require("fs");
const path = require("path");
const crypto = require("crypto");
const util = require("util");

const readline = require("readline");

const readdir = util.promisify(fs.readdir);
const stat = util.promisify(fs.stat);
const readFile = util.promisify(fs.readFile);
const writeFile = util.promisify(fs.writeFile);
const loadMd = util.promisify(load_md);

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let _folder = process.argv[2];
let _file = process.argv[3];

if (!_folder && !_file) {
    process.stdout.write("請(qǐng)輸入 -文章所在文件夾名 -要寫入的文件名： 
");
    process.stdout.write("-d （當(dāng)前文件夾，默認(rèn)文件catalogue.js）
");
    process.stdout.write("      or
");
    process.stdout.write("./ catalogue.js
");
    process.stdout.write("> ");
} else {
    load(_folder, _file)
        .then(data => {
            console.log(data);
            rl.close();
        })
        .catch(err => {
            err.msg && process.stdout.write("error：" + err.msg + "
");
            process.stdout.write("文件夾：" + err.folder + "
");
            process.stdout.write("文件：" + err.file + "
");
            process.stdout.write("請(qǐng)輸入正確的路徑名： 
");
            process.stdout.write("> ");
        });
}

rl.on("line", line => {
    let parts = line.split(new RegExp("[ ]+"));
    if (parts.length <= 1) {
        if (parts[0] === "-d") {
            load(parts[0], "")
                .then(data => {
                    console.log(data);
                    rl.close();
                })
                .catch(err => {
                    err.msg && process.stdout.write("error：" + err.msg + "
");
                    process.stdout.write("文件夾：" + err.folder + "
");
                    process.stdout.write("文件：" + err.file + "
");
                    process.stdout.write("請(qǐng)輸入正確的路徑名： 
");
                    process.stdout.write("> ");
                });
        } else {
            process.stdout.write("請(qǐng)輸入正確的格式 (文章所在文件夾名 要寫入的文件名)： 
");
            process.stdout.write("> ");
        }
    } else {
        load(parts[0], parts[1])
            .then(data => {
                console.log(data);
                rl.close();
            })
            .catch(err => {
                err.msg && process.stdout.write("error：" + err.msg + "
");
                process.stdout.write("文件夾：" + err.folder + "
");
                process.stdout.write("文件：" + err.file + "
");
                process.stdout.write("請(qǐng)輸入正確的路徑名： 
");
                process.stdout.write("> ");
            });
    }
});

function load(_folder, _file) {
    if (_folder === "-d" && !_file) {
        _folder = "md";
        _file = "md/catalogue.js";
    }
    _folder = path.resolve(__dirname, _folder);
    _file = path.resolve(__dirname, _file);
    return new Promise((resolve, reject) => {
        return (async () => {
            try {
                let catalogues = await loadMd(_folder);
                let file = await readFile(_file);
                let catalogues_reg = /[((
s*)*({([^]+?)})?(
s*)*)?]/;
                file = file.toString("utf8");
                if (!catalogues_reg.test(file)) throw {msg: "沒找到可替換內(nèi)容位置，請(qǐng)確保catalogues = []"};
                let f = file.replace(catalogues_reg, JSON.stringify(catalogues));
                await writeFile(_file, f);
                resolve("文章添加完畢！");
            } catch (err) {
                err.folder = _folder;
                err.file = _file;
                reject(err);
            }
        })();
    });
}

async function load_md(dir, callback) {
    try {
        let files = await readdir(dir);

        files = files.filter(fileName => path.extname(fileName) === ".md" && path.basename(fileName, ".md") !== "關(guān)于我");
        if (files.length === 0) callback({msg: "當(dāng)前文件夾下沒有md文件"});

        let catalogues = [];

        for (let i = 0; i < files.length; i++) {
            let status = await stat(dir + "/" + files[i]);
            let file = await readFile(dir + "/" + files[i]);

            file = file.toString("utf8");

            file = file.match(/[^x00-xff]/g).join("").substr(0, 210);

            let fileName = files[i].split(".")[0];

            let md5 = crypto.createHash("md5");
            md5.update(fileName, "uft8");
            let id = md5.digest("hex");

            let ctime = new Date(status.ctime);
            catalogues.push({
                id,
                title: fileName,
                year: ctime.getFullYear(),
                createTime: ctime.getTime(),
                abstract: file.length > 200 ? file + "..." : file
            });
        }

        if (catalogues.length) {
            catalogues.sort(compare("createTime"));

            catalogues.forEach((catalogue, i) => {
                if (catalogues.length <= 1) return;

                if (i !== catalogues.length - 1) catalogue.next = catalogues[i + 1].title;
                if (i !== 0) catalogue.prev = catalogues[i - 1].title;
            });

            callback(null, catalogues);
        }
    } catch (err) {
        callback(err);
    }
}

function compare(property) {
    return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
    };
}

本想寫成支持自定義目錄、自定義文件，但是頁面寫死的東西太多，自定義名的文件好像也沒什么用，不用在意..

現(xiàn)在，只需將文章添加到目錄下，再

> node shell -d

一下下，就可以開心地提交代碼了。

第一次寫文章難免會(huì)緊張和哆嗦，歡迎大家指正和批評(píng)。

前段時(shí)間剛好看到某云優(yōu)惠，入手一臺(tái)云服務(wù)器，后續(xù)會(huì)有博客升級(jí)版。

最后最后，走過路過千萬別錯(cuò)過Star一下哦！