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

2018-06-24 00:41:57来源：未知阅读 ()

前言

记得在1年之前搭建了一个个人主页的博客，但是当时功力尚浅，每次写博客，都是自己手动写html，这样会变得非常的繁琐，现在很多人用主流的wordpress，hexo之类的快速搭建一个平台，那些工具确实方便，但是对于主题以及一些额外的排版，就显得非常的麻烦，本文致力于教你如何搭建一个个性化，并且自动化构建的博客。

开始

完成后的博客展示： http://yifenghua.win/

github地址： https://github.com/hua1995116/myblog （喜欢的点个star哈）

本平台也是基于.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>

但是这一步是我们手动写上的。

因为我的需要一个模板机制，来帮我们手动生成一个文件。
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即可发布。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：一个比较实用的商业级图表Echarts

下一篇：原生js封装添加class，删除class

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

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

前言

开始

Go on

Next

扩展

使用