为你博客中的代码片段着色。

Markdown中本身支持代码片段的语法，生成的html用<code>标签包围。 但是代码颜色没有高亮显示。

highlight.js

要实现代码高亮可以使用highlight.js

安装highlight.js:

npm install highlight.js --save

使用highlight.js:

var fs = require('fs');
var markdown = require('marked');
var hljs = require('highlight.js');

markdown.setOptions({
    highlight: function (code, lang) {
        return hljs.highlight(lang, code).value;
    }
});

var content = fs.readFile('blog.md');
var html = markdown(content);

代码高亮后的html在浏览的时候发现并没有被着色，但是发现代码里的关键字都被设置了样式。 所以定义好样式的颜色就能看到着色后的代码了。

highlight.js官方也提供了一些样式表，可以到这里选取一个来使用。

CSS中使用 margin:0 auto; 可以让元素居中。

使用的时候需要注意下面几点：

1. 只能让元素相对于父元素居中，不能让元素内部的元素居中。
2. 元素必须要指定宽度。
3. 元素必须显示为块级元素，即 display:block。 div元素本身就是块级元素，所以可以不显示设置，但是span,img等非块级的元素就要设置。

背景

公司每周末需要提交每天工作内容。 由于每天工作内容基本上都是做feature、改bug， 所以在周五统一从git的迁入日志把自己的日志中摘出来汇总。 这是一个体力活，项目架构有若干个git库，每个git库里面有若干人的工作分支合并进去。 所以这个事情要花费近1个小时来完成。

使用git log命令汇总

git log命令有丰富的参数，在git库目录下面执行这个命令， 就可以汇总我自己一周内每天的日志，并且以CSV格式文件输出：

git log --pretty="%cd,%s" --date=short --since=5.days --committer="Your Name" --no-merges -999 > log.csv

参数详解：

• --committer 仅显示指定提交者的日志。这里写自己提交代码用的名字即可。
• --since 仅显示指定时间内的日志。我要显示本周内的，所以是5.days。
• --no-merges 不显示合并的日志。我只想显示我的日志，不显示合并的日志。
• --pretty 格式化显示内容。%cd代表提交日期，%s代表提交描述。由于是导出CSV格式，所以用逗号隔开。
• --date 指定日期格式。short格式是以YYYY-MM-DD格式输出。
• -n 指定显示最大条数。git log命令的显示结果比较多的时候，会有上下翻页的交互，这样没办法重定向到文件。 所以这里指定最多显示999条数据，就不会有交互，直接输出日志
• 结尾是一个重定向输出到文件的命令，最终结果会保存在log.csv文件里面。

多个git库需要汇总的话，可以使用批处理脚本，分别在每个库目录下执行命令，重定向到同一个CSV文件中。 汇总后的CSV直接用强大的excel打开，排序，生成图表什么的。

第2节中介绍了使用jade作为模板引擎生成html页面文件。

回顾一下generate.js的代码：

var jade = require('jade');
var fs = require('fs');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var html = fn({ 'content': '<span>hello</span>' });

fs.writeFileSync('index.html', html);

content的html片段可以是从文件中读取。

但是用html直接来写博客，内容的排版很不方便。

Markdown

Markdown是一种轻量级的标记语言，简练的语法用来写作博客、排版很方便。

marked可以帮助我们将markdown翻译为html。

安装marked：

npm install marked --save

使用也很简单：

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

因此，之前的generate.js可以修改为如下：

var jade = require('jade');
var fs = require('fs');
var marked = require('marked');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var content = fs.readFile('blog.md');

var html = fn({ 'content': marked(content) });

fs.writeFileSync('index.html', html);

其中blog.md文件里面是使用markdown写作好的博客文章。 使用marked转换为html片段后，再使用jade模板生成完整的html页面。

想要你的博客更加个性化？ 为你的博客配置一个属于自己的域名吧。 当购买了心仪的域名后，阅读这篇文章，介绍如何使用自己的域名访问博客。 我购买的域名是lihui.io。 下面介绍如何绑定这个域名到我的Github Pagse，以便在浏览器输入 http://lihui.io 就能访问我的博客。

1 配置Github Pagse

在Github Pagse的仓库页面，点击Settings进入配置页面。 在页面中找到Custom domain区域，在里面输入要配置的域名，然后点击Save。

这里可以输入的域名分为三种：

1. 一级域名：lihui.io
2. www二级域名：www.lihui.io
3. 自定义二级域名，比如blog.lihui.io

这三种的域名解析配置不太一下，下面会介绍。

2 配置域名解析

在购买域名的供应商网站，进入到域名管理界面，找到配置域名解析的页面。 不同的供应商页面会有所不同，但大致功能是类似的。

2.1 lihui.io 或 www.lihui.io 的配置

根据Github的帮助信息，这两种域名的配置类似，需要为要配置的域名添加一条ALIAS或ANAME或A解析记录。

ALIAS和ANAME的配置类似：

• 选定记录类型后，记录值输入原来的域名leehooi.github.io。
• 如果是lihui.io，那么主机记录输入@。
• 如果是www.lihui.io，那么主机记录输入www。

但是有一些供应商并不支持ALIAS和ANAME的记录类型。

那么只能用A类型：

• 选定记录类型为A。
• 记录值需要输入一个IP地址。 Github提供了192.30.252.153和192.30.252.153两个IP地址，并要求为这两个IP分别添加一条记录。 具体参考Github的帮助。

配置完解析记录就可以通过新域名访问了。

如果同时配置了lihui.io和www.lihui.io的域名：

• 当访问www.lihui.io时，Github会自动跳转到lihui.io。
• 如果Github Pagse中配置的域名是www.lihui.io， 那么当访问lihui.io时，Github会自动跳转到www.lihui.io。

2.2 blog.lihui.io 的配置

自定义二级域名需要配置一条CNAME类型的记录。

主机记录输入blog。

记录值输入leehooi.github.io。

至此域名的配置已经完成了。 配置完成后新域名不一定立刻生效，因为DNS的更新需要一定时间，一般几个小时之内就能访问了。

Visual Studio Code 能够自动检测grunt文件，无需配置就可以使用快捷键执行grunt编译任务：

VS Code can autodetect tasks from within Gulp, Grunt and Jake files. This adds their tasks to the task list without requiring additional configuration (unless you need to use a problem matcher, more on that in a moment).

但是如果grunt文件不在VS Code管理的根目录，那么用快捷键执行就会报错。 解决方法是在tasks.json中配置命令的cwd参数为grunt文件所在的文件夹。 其中${cwd}是VS Code预定的变量，代表当前的工作目录。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "grunt",
    "isShellCommand": true,
    "showOutput": "always",
    "options": {
        "cwd": "${cwd}/subfolder"
    }
}

Github Pages能够将我们的页面展示在互联网上。 虽然页面内容由我们来决定，但是所有页面都需要手动去写很不现实。 Github Pages官方推荐了使用Jekyll来生成博客。 这时一个ruby环境的静态博客生成工具，感兴趣的朋友可以了解一下。

作为前端开发，nodejs和JavaScript是比较常用的工具和语言，用起来会更顺手。

经过一番查找，发现hexo是一款基于Node.js的静态博客框架。 安装使用了一番，感觉不适合我搭建轻博客的初衷。 原因是自己的想法会被框架束缚(比如我想对生成文章的地址进行定制，使用本地图片等等)。 想要按照自己的意愿来只能通过配置或在hack。

使用Jade模板语言

Jade的官方介绍：

Jade is a terse language for writing HTML templates.

• Produces HTML
• Supports dynamic code
• Supports reusability (DRY)

简练、支持动态代码，对于生成博客页面最合适不过。

比如index.jade的文件内容如下：

div !{content}
ul
  each val in [1, 2, 3, 4, 5]
    li= val

generate.js的代码：

var jade = require('jade');
var fs = require('fs');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var html = fn({ 'content': '<span>hello</span>' });

fs.writeFileSync('index.html', html);

命令行执行：

node generate.js

生成的index.html内容：

<div><span>hello</span></div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

静态博客生成器

上面的代码片段足以证明，使用jade是能够支持生成静态博客这个想法的。

接下来需要完善的是：

1. 完善generate.js代码。content的内容应该是从文件中读取，而不是hardcode在代码中。
2. 完善index.jade文件。让你的页面看上去更完整、生动。

现在免费的、开源的博客系统已经有许多，并且提供丰富的功能和模板，让我挑花了眼。 最终我决定自己搭建一个功能单一的轻博客。 这个文章系列会介绍我是一步一步如何搭建一个轻博客的。 如果你已经具备了一些简单的前端开发的知识，那么就可以轻松理解这里的文章并搭建属于自己的博客。

为什么用Github Pages

• 它是免费的。
• 使用git代替ftp上传页面，便于页面管理，而且更酷。
• 虽然只提供静态页面的托管，但是对于建立一个轻博客足够。

注册Github Pages

去Github Pages会看到详细的向导，介绍如何创建一个托管页面的仓库。 当然，创建仓库的前提已经注册了Github的账号。 登录Github后创建一个仓库，值得一提的是仓库的名称必须是username.github.io的格式。 可能有些人看到这个还是不清楚怎么命名仓库。 这里举个栗子，我的Github用户名是leehooi，那么仓库的名称就是leehooi.github.io，创建好的git仓库地址就是https://github.com/leehooi/leehooi.github.io.git。

创建第一个页面

仓库创建好了之后，在本地电脑由仓库地址(https://github.com/leehooi/leehooi.github.io.git)克隆一个本地仓库。 在本地仓库根目录创建一个index.html的文件，里面随便写几个字符。 完成后提交并且push。 在浏览器输入网址leehooi.github.io便可以看到网址首页里面是刚才输入的几个字符。

至此，博客的原型已经完成，并且可以在其他地方通过互联网访问了(虽然没人想访问这样简陋的网站)。

后面的系列会介绍如何自动生成html。