摘要：當函數完成前端小白徒手搭博客之路前端小白徒手搭博客之路前言作為一個前端小白，一直以來，樣式布局設計靈感都是自己的痛點。

本博客為最最最基本的html靜態頁面打造而成。

github地址
線上地址

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

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

1. 域名購買與解析

這里我們可以通過萬網申請，查找你想申請域名，購買就可以了。

購買域名完成，進入管理控制臺：

找到你已經購買的域名，點擊解析，進入如下頁面：

添加兩條記錄：

主機記錄www對應 www.域名

主機記錄@對應 域名

記錄類型-CNAME
記錄值-你的倉庫名

2. CNAME

在你的倉庫創建一個CNAME文件，內容為你的域名，例如:

3. Settings

在倉庫設置你的域名：

現在通過購買的域名訪問你的個人站點了。

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

博客目錄結構：

1. BootCDN

穩定、快速、免費的前端開源項目 CDN 加速服務。

我們可以從BootCDN引用需要用到的JS庫

// index.html

    

2. Iconfont

阿里巴巴矢量圖標庫，阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。

注冊一個用戶后，新建項目，把需要用到的圖標加入到項目中，生成代碼，直接引入就可以用了。

// index.html

3. 極簡圖床

免費圖床，markdown鏈接好利器。

4. 評論

Gitment：使用 GitHub Issues 搭建評論系統

5. 文章

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

由于沒有服務器，所以用catalogue.js來放靜態數據。

function JsonDate() {}

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

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

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

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

So，發布新文章的時候，就很簡單的了，只需把文件添加到md目錄下，再修改一下下catalogue.js的catalogues數據就行。

..因為太麻煩了，便寫了一鍵發布的腳本shell.js。

shell.js是基于node環境，隨便寫寫，應該可以用，貼上代碼：

"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("請輸入 -文章所在文件夾名 -要寫入的文件名： 
");
    process.stdout.write("-d （當前文件夾，默認文件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("請輸入正確的路徑名： 
");
            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("請輸入正確的路徑名： 
");
                    process.stdout.write("> ");
                });
        } else {
            process.stdout.write("請輸入正確的格式 (文章所在文件夾名 要寫入的文件名)： 
");
            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("請輸入正確的路徑名： 
");
                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: "沒找到可替換內容位置，請確保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") !== "關于我");
        if (files.length === 0) callback({msg: "當前文件夾下沒有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;
    };
}

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

現在，只需將文章添加到目錄下，再

> node shell -d

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

第一次寫文章難免會緊張和哆嗦，歡迎大家指正和批評。

前段時間剛好看到某云優惠，入手一臺云服務器，后續會有博客升級版。

最后最后，走過路過千萬別錯過Star一下哦！