教你如何搭建一個自動化構建的博客

時間 2019-11-17

原文原文鏈接

前言

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

開始

完成後的博客展現： yifenghua.win/css

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

本平臺也是基於.md文件構建成html的自動化流程，由於如今主流的編寫方式就是用.md文件來抒寫，全部問題就歸結爲，如何讓.md文件轉化成.html文件。那問題就變得很是的簡單了，如今市面上有不少md轉成html的工具，markdown，marked，node-markdown等等。今天我就用marked來構建咱們的自動化博客。java

Go on

Marked使用方法很是的簡單。node

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

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

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複製代碼

若是是想要輸出文件的形式：github

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，就有了樣式，還有代碼高亮的操做。web

由於咱們到，github-markdown-css，prism分別取下載對應的css和js，而後引入。npm

通過上述操做後，咱們的文件應該是這樣的:json

<!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>複製代碼

可是這一步是咱們手動寫上的。

由於個人須要一個模板機制，來幫咱們手動生成一個文件。
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")  
        }  
      })
    }  
  })
  }
})複製代碼

能夠看到一個生成後的文件，已經完整了。

擴展

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

歸檔：在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便可發佈。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

教你如何搭建一個自動化構建的博客

前言

開始

Go on

Next

擴展

使用