教你如何搭建一个自动化构建的博客

时间 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

扩展

使用