教你如何搭建一個自動化構建的部落格

藍色的秋風發表於2019-03-03

前言

記得在1年之前搭建了一個個人主頁的部落格，但是當時功力尚淺，每次寫部落格，都是自己手動寫html，這樣會變得非常的繁瑣，現在很多人用主流的wordpress，hexo之類的快速搭建一個平臺，那些工具確實方便，但是對於主題以及一些額外的排版，就顯得非常的麻煩，本文致力於教你如何搭建一個個性化，並且自動化構建的部落格。

開始

完成後的部落格展示： yifenghua.win/

github地址： github.com/hua1995116/… （喜歡的?一個哈）

本平臺也是基於.md檔案構建成html的自動化流程，因為現在主流的編寫方式就是用.md檔案來抒寫，所有問題就歸結為，如何讓.md檔案轉化成.html檔案。那問題就變得非常的簡單了，現在市面上有很多md轉成html的工具，markdown，marked，node-markdown等等。今天我就用marked來構建我們的自動化部落格。

Go on

Marked使用方法非常的簡單。


var marked = require(`marked`);
console.log(marked(`I am using __markdown__.`));
// Outputs: <p>I am using <strong>markdown</strong>.</p>複製程式碼

假設我們的git.md是這樣的：

st = status
co = checkout
cob = checkout -b
br = branch
bra = branch -a
ci = commit
cim = commit -m
cia = commit --amend
re = reset
rb = rebase
rbi = rebase -i
rbim = rebase -i origin/master
rbid = rebase -i origin/devlop
rbc =erebase --continue
rba = rebase --abort
fe = fetch
psom = push origin master
puom = pull origin master複製程式碼

如果是想要輸出檔案的形式：


const fs = require(`fs`)  
const marked = require(`marked`) 
fs.readFile(`./notes/git.md`, `utf8`, (err,markContent)=>{  
  if(err){  
    throw err  
  }else{   
    fs.writeFile(`./git.html`,marked(markContent.toString()), err=>{  
      if(err){  
        throw err  
      }else{  
        console.log("success")  
      }  
    }) 
  }  
})複製程式碼

既然我們已經知道了md檔案如何轉成html，但是我們發現，這樣生成的檔案是沒有樣式的，所以我們需要去找一個樣式的庫，我現在用的是github-markdown.css 還有一個程式碼高亮的庫，prism 。引用prism.css和prism.js ，就可以發現我們開啟的html，就有了樣式，還有程式碼高亮的操作。

因為我們到，github-markdown-css，prism分別取下載對應的css和js，然後引入。

經過上述操作後，我們的檔案應該是這樣的:


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/github-markdown.css">
<link rel="stylesheet" type="text/css" href="../css/prism.css">
</head>
<body>
<pre><code>
st = status
co = checkout
cob = checkout -b
br = branch
bra = branch -a
ci = commit
cim = commit -m
cia = commit --amend
re = reset
rb = rebase
rbi = rebase -i
rbim = rebase -i origin/master
rbid = rebase -i origin/devlop
rbc =erebase --continue
rba = rebase --abort
fe = fetch
psom = push origin master
puom = pull origin master
</code></pre>
<script type="text/javascript" src="../js/prism.js"></script>
</body>
</html>複製程式碼

但是這一步是我們手動寫上的。

Next

因為我的需要一個模板機制，來幫我們手動生成一個檔案。
Tempale.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/github-markdown.css">
    <link rel="stylesheet" type="text/css" href="../css/prism.css">
    <!-- <link type="text/css" rel="stylesheet" href="./css/shCoreEclipse.css"/> -->
</head>
<body scroll="no">
    <div class="markdown-body">
        @markdown
    </div>

<script type="text/javascript" src="../js/prism.js"></script>
</body>
</html>複製程式碼

再來重新配置我們的執行檔案。


const fs = require(`fs`)  
const marked = require(`marked`) 
fs.readFile(`./template1.html`, `utf8`, (err, template)=>{  
  if(err){  
    throw err  
  }else{  
    fs.readFile(`./notes/git.md`, `utf8`, (err,markContent)=>{  
    if(err){  
      throw err  
    }else{   
      template = template.replace(`@markdown`, marked(markContent.toString()))
      fs.writeFile(`./git.html`,  template, err=>{  
        if(err){  
          throw err  
        }else{  
          console.log("success")  
        }  
      })
    }  
  })
  }
})複製程式碼

可以看到一個生成後的檔案，已經完整了。

擴充套件

分頁：再此基礎上我又對其進行了擴充套件，增加了一個分頁的功能。

tagdata.json
tagdata.json

檔案目錄：.md 檔案的目錄（待開發）

歸檔：在json目錄下生成tagdata.json

tagdata.json
tagdata.json

使用

git clone https://github.com/hua1995116/myblog複製程式碼

將需要寫的.md檔案放到notes目錄下，


// 安裝依賴
npm install
// 編譯
node index.js
// 本地檢視
node http.js複製程式碼

其他具體的樣式你可以自行配置，和普通寫html，css無差異。

編譯後的html程式碼在html目錄下，將其放到你的站點下，或者github-pages上即可。
每次寫完新的部落格，只要執行下index.js即可釋出。

相關文章