1、安装jekyll

jekyll是很不错的博客工具，让你更专注于写博客创作本身，用简单熟悉的markdown来书写文字，jekyll帮你把他转化成静态网页。

按照官网的操作依次执行：

gem installbundler jekyll
jekyll new my-blog
cd my-blog
jekyll serve

然后在浏览器中打开http://www.diosapp.com.cn，恭喜，入门成功。

模板比较丑，默默的control+c关停，删掉项目文件夹，我可没兴趣从零开始自己写。

rm -rf my-blog

2、找个巨人的肩膀站

找了个长的很好看又开源的博客项目作为巨人的肩膀来踩，目标网站长这个样子，http://minimalmonkey.com/

拉取源代码到本地：

git clone https://github.com/minimalmonkey/minimalmonkey.github.io my-blog
cd my-blog
npm install
jekyll serve

3、代码解读

文件结构还是比较清晰的，打开文件结构目录

  1. gulpfile.js && _gulp gulp是基于流的自动化构建工具，参考官网：https://www.gulpjs.com.cn/ 查看_gulp中tasks的源码，可以知道，sass.js及browserify.js分别对scss和js做了监听和自动化编译。

  2. _layout && _includes 这两个文件夹里的html文件共同构建了很多的页面模板，其中用到了Liquid语言，Liquid的语法和Rails里的erb模板语言语法非常类似，相对浅显易懂。

  3. _posts 这里就是你写博客的地方了，顺便一提，Typora是一款不错的md编辑器。尤其是自带的帮助文档，Markdown语法随用随查，非常适合新手入门。 然后看一下文件夹内的md文件，文件都是以年-月-日-标题.md的形式命名，文章以三个-开始，定义该篇博文使用的layout，title，除此以外还定义了summary,date和color， 
    ---
layout: post
title:  "ColorWall"
summary: "A kind of tutorial on how I created a cool warped effect like the one seen on Yugo Nakamura's brilliant wonderwall site"
date:   2009-10-25 00:00:00
color:  lime
---

    如果好奇这些定义在哪里使用，可以打开_includes/panels.html一探究竟。

  4. _site 这里就是自动生成好的静态网站了，随便找个云服务器上传上去就可以了。当然如果没有自己的服务器，也可以使用 GitHub Pages来托管你的网站。

  5. _src 写前端的童鞋对这里就比较熟悉了，js和scss都在这里了。对前端代码不擅长，没有仔细阅读，留做下一阶段目标了。

  6. about && contact && lab 无他，就是配置了三个页面的路由。

  7. assets 字体和图片文件，其中的iconfont用的是iconmoon，是个很有意思的在线制作iconfont的工具。larry.svg是做了twitter的小蓝鸟展翅动画，原作者有一篇文章详细介绍了动画实现方式：传送门 ，考虑到国内无法访问Twitter，我尝试自己用sketch做了一个新浪的图标，想实现眨眼的动画效果，实现效果不佳，按下不表。

  8. css && js 自动build好的css和js，谁build的，自然是gulp这个田螺姑娘默默的就帮忙自动化build了。

  9. node_modules 这个以及package.json,package-lock.json就不用多说了。

  10. feed.xml 这玩意是帮助实现RSS订阅的。

4. Disqus

Disqus是原作者用于给该博客集成的评论组件，作为一个懒人，自然懒的去更改了，所以最简单的办法就是去disqus的官网注册一个账号，然后相应的在源码里替换一下配置即可。

在Disqus首页选择GET STARTED，点击I want to install Disqus on my site，注册账号，输入WebSite Name，比如我的就是diosapp，选择Category为Tech，创建，选择付费为Basic免费版订阅，然后在What platform is your site on?的询问中，点击Jekyll。然后根据指引，进行一系列配置，外观设置、网站地址配置，名称配置，语言设置。然后愉快的在原代码中，将disqus配置的url替换成自己的就可以啦。

image-disqus

缺点，自然是不翻wall，则无法访问。国内也有相应的一些服务，比如畅言，尝试了一下，效果不是很满意，放弃了。

5、写在最后

知道鱼是怎么游的有三种办法，观察一条鱼，解剖一条鱼，创造一条鱼。