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

時間 2019-12-12

原文原文鏈接

前言

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

開始

完成後的博客展現： http://yifenghua.win/php

github地址： https://github.com/hua1995116/myblog （喜歡的點個star哈）css

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

Go on

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

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

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

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

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

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

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

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

<!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") } }) } }) } })

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

擴展

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

使用

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

擴展

使用