preface

Remember before 1 year set up a personal home page of the blog, but the work force, each time to write blog, are manually write HTML, it will become very tedious, now many people in the mainstream of wordpress, hexo quickly set up a platform, such as those tools really convenient, but for the theme as well as some additional layout, This article is dedicated to teaching you how to build a personalized and automated blog.

start

The finished blog presentation: Yifenghua.win /

Github address: github.com/hua1995116/… (like 👍 a ha)

This platform is also based on.md files to build HTML automation process, because now the mainstream way to write is to use.md files to express, all the problems boil down to, how to make.md files into.HTML files. Then the problem becomes quite simple. There are a number of mD-to-HTML tools on the market, markdown, marked, node-markdown, etc. Today I’ll use marked to build our automated blog.

Go on

Marked the usage method is very simple.


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

Suppose our git.md looks like this:

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 masterCopy the code

If you want to export files:


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")}})}}Copy the code

Now that we know how to convert md files to HTML, we find that the resulting files have no styles, so we need to find a style library. I’m using Github markdown.css and a code-highlighting library, Prism. By referring to prism.css and prism.js, we can see that the HTML we open has styles and code highlighting.

Because we go to Github-Markdown-CSS, PRISM to download the corresponding CSS and JS, and then import.

After doing this, our file should look like this:


<! DOCTYPEhtml>
<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>
Copy the code

But we did this step by hand.

Next

Because I need a template mechanism to help us manually generate a file. Tempale.html


<! DOCTYPEhtml>
<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>
Copy the code

Let’s reconfigure our run file.


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")}})}})Copy the code

You can see a generated file that is complete.

extension

Paging: On this basis, I have extended it to add a paging function.

File directory: directory for.md files (to be developed)

Archive: Generate tagdata.json in the JSON directory

use

git clone https://github.com/hua1995116/myblog
Copy the code

Put the.md files you need to write into the Notes directory,

// Install depends on NPM install // compile node index.js // view node http.js locallyCopy the code

Other specific styles you can configure, and normal HTML, CSS is no different.

The compiled HTML code is in the HTML directory, on your site, or on Github – Pages. Every time you write a new blog, just run index.js and publish it.