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


    前言

    记得在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>

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

    Next

    因为我的需要一个模板机制,来帮我们手动生成一个文件。 
    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")  
            }  
          })
        }  
      })
      }
    })

    可以看到一个生成后的文件,已经完整了。

    扩展

    分页:再此基础上我又对其进行了扩展,增加了一个分页的功能。

    文件目录:.md 文件的目录(待开发)

    使用

    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即可发布。

  • 相关阅读:
    VHD进阶:差分VHD备份系统
    默认系统为UEFI启动的GPT分区的WIN7(8),如何安装VHD的UEFI WIN8(7)
    在WIN7/8下把XP装入VHD (上)
    USB鼠标线序
    组合与继承
    结构体内存对齐
    多媒体编码与格式
    网络病毒
    寄存器
    0
  • 原文地址:https://www.cnblogs.com/qiufenghua/p/7783040.html
Copyright © 2020-2023  润新知