2016-06-20 • Blog

如何快速给自己构建一个温馨的"家"——用Jekyll搭建静态博客

前言

我相信，每个程序员都有一个愿望，都想有一个属于自己的”家”——属于自己的博客，专属的网站。在自己的“家”中，可以和志同道合的兄弟一起分享和讨论任何技术，谈天说地。更重要的是可以当做自己的技术积累，提升自己实力。那么接下来就来说说我博客搭建过程。

一.本地搭建Kekyll

Jekyll是什么？它是一个简单静态博客生成工具，相对于动态博客。

简单。因为它是不需要数据库的，通过markdown编写静态文件，生成Html页面，它的优点是提升了页面的响应速度，并且让博主可以只专注于写文章，不用再去考虑如何排版。
静态。Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。
博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。

//使用gem安装Jekyll
gem install jekyll


//使用Jekyll创建你的博客站点
jekyll new blog  #创建你的站点


//开启Jekyll服务
//进入blog目录,记得一定要进入创建的目录，否则服务无法开启
cd blog    	 
jekyll serve 	 #启动你的http服务 

本地服务开启后，Jekyll服务默认端口是4000，所以我打开浏览器，输入：http://localhost:4000 即可访问

到这里一个简单的博客页面就会显示出来了。

关于jekyll其他一些命令的用法如下:

$ jekyll build
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中。

$ jekyll build --destination <destination>
# => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --source <source> --destination <destination>
# => 指定源文件夹<source>中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --watch
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中，
#    查看改变，并且自动再生成。

$ jekyll serve
# => 一个开发服务器将会运行在 http://localhost:4000/
# Auto-regeneration（自动再生成文件）: 开启。使用 `--no-watch` 来关闭。

$ jekyll serve --detach
# => 功能和`jekyll serve`命令相同，但是会脱离终端在后台运行。
#    如果你想关闭服务器，可以使用`kill -9 1234`命令，"1234" 是进程号（PID）。
#    如果你找不到进程号，那么就用`ps aux | grep jekyll`命令来查看，然后关闭服务器。[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown, 也可以是 Textile, 或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

接下来再说说jeykll的目录结构：

├── _config.yml  			(配置文件)
├── _drafts  				(drafts（草稿）是未发布的文章)
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes 			(加载这些包含部分到你的布局)
|   ├── footer.html
|   └── header.html
├── _layouts 			    (包裹在文章外部的模板)
|   ├── default.html
|   └── post.html
├── _posts 				  (这里都是存放文章)
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site 				(生成的页面都会生成在这个目录下)
├── .jekyll-metadata	  (该文件帮助 Jekyll 跟踪哪些文件从上次建立站点开始到现在没有被修改，哪些文件需要在下一次站点建立时重新生成。该文件不会被包含在生成的站点中。)
└── index.html 		   (网站的index)

二.开发或者选择Jekyll主题

再来说说博客的外观，这可能是很多人很看重的，一个高逼格的博客里面看文章也是一种享受。这里就需要自定义主题了。你可以选择自己开发一套，也可以直接选择已有的，然后自己再更改css布局形成自己的。jekyll主题在这里，你可以选择到你自己喜欢的主题。下载下来，改改css，或者借用一下，就会有很漂亮的blog就出炉了。

三.使用Github Pages服务

1. 创建我们自己的仓库

以下用usename代替自己的用户名

2. 配置我们的仓库

在Settings里面找到Github Pages

选择Launch automatic page generator

接下来的界面就直接选择Continue to layouts

到了这个界面就随便选择一个模板，点击Publish Page即可

这里就生成了一个静态网页了，直接访问刚刚的设置的地址https://halfrost.com/username.github.io/，这个地址，就可以访问到了。

接下来我们要做的就是把我们的Jekyll生成的blog部署到Github Pages上去即可

3.部署blog

我们先把刚刚新建的仓库git clone到本地，然后cd 到仓库的目录下，执行jekyll serve -B

cd username.github.com
jekyll serve -B

注意，启动前确保其他目录下没有jekyll服务，可以ps aux|grep jekyll 查看进程,有的话,用kill -9 进程号杀掉其他进程。

现在我们打开http://localhost:4000,即可看见我们在Github上创建的主页，理论上和https://username.com/username.github.io/ 访问的应该是一模一样的。

接着我们把我们自己做好的blog目录整个都拷贝到这个仓库文件夹中，当然，这个仓库之前的文件可以删除了，只留下README即可。把整个文件都push到github上去

git add --all                          #添加到暂存区 
git commit -m "提交jekyll默认页面"       #提交到本地仓库
git push origin master                 #线上的站点是部署在master下面的

注意，在提交前，请确保_config.yml文件里面下面是这样配置的，因为这个是Github Pages的规定，如果选择了其他的模式，会立即收到编译警告的邮件提醒的。

highlighter: rouge
markdown: kramdown

等待大概1-2分钟之后，再次刷新username.github.io，就能看到我们的blog了。

四.申请个人域名

现在很多地方都支持个性化域名，比如新浪微博，就可以自己申请一个个性域名，那么以后只要访问weibo.com/你的名字，这个网址就可以直达你的主页。同理，我们也希望有一个名字直达我们的博客首页，那么我们就需要先买一个域名。一般国内用的比较多的应该就是万网，国外的就是Go Daddy。选择一个你喜欢的用户名，如果没有人先买下那个域名，那就可以恭喜你了，可以去买下来了。

买好域名以后，就是配置的问题了。

我们要绑定的话需要在username.github.com目录下增加一个CNAME文件。在里面添加你的域名，假设为example.com，然后推送CNAME文件到远程仓库:

git add CNAME
git push origin master

2.到域名服务商增加你的CNAME记录。添加两条记录，@和www的主机记录，记录类型为CNAME类型，CNAME表示别名记录，该记录可以将多个名字映射到同一台计算机。记录值请写username.github.io.,值得注意的是io 后面还有一个圆点，切记。

注意，当添加@的记录的时候，很可能会提示冲突了，和MX那条冲突了，这里我就直接删除了MX的@规则。想知道原因，其实可以看这个链接，http://cn.v2ex.com/t/204489 。结论还是自己删除MX的@吧。

如果是国内的域名，解析会很快，一般10分钟之内就能解析完成。我们就可以直接通过访问我们买的个性域名访问到我们的博客了。

五.给博客增加访客评论功能

一般静态博客添加访客评论功能都是用disqus来集成的。一般都是放在博客的一篇文章的最后，当然这个排版就看你自己怎么设计的了。我这里就贴一下我集成disqus的代码。大家估计都类似。

<section class="post-comments">
  
    <div id="disqus_thread"></div>
    <script>
    
    var disqus_config = function () {
        this.page.url = "http://vno.onevcat.com/2016/06/%E5%A6%82%E4%BD%95%E5%BF%AB%E9%80%9F%E7%BB%99%E8%87%AA%E5%B7%B1%E6%9E%84%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%B8%A9%E9%A6%A8%E7%9A%84_%E5%AE%B6_-%E7%94%A8Jekyll%E6%90%AD%E5%BB%BA%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/";
        this.page.identifier = "/2016/06/%E5%A6%82%E4%BD%95%E5%BF%AB%E9%80%9F%E7%BB%99%E8%87%AA%E5%B7%B1%E6%9E%84%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%B8%A9%E9%A6%A8%E7%9A%84_%E5%AE%B6_-%E7%94%A8Jekyll%E6%90%AD%E5%BB%BA%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2/";
    };

    var disqus_shortname = 'halfrostsfield';
    
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    </script>
    <noscript>要查看<a href="http://disqus.com/?ref_noscript"> Disqus </a>评论，请启用 JavaScript</noscript>
    
  
  
  
  
</section>

六.申请”小绿锁”HTTPS

要想使用HTTPS开头，目前就2种做法，一是申请HTTPS证书，免费的就用Let’s Encrypt 提供的免费 SSL 证书，二是使用kloudsec提供的服务。申请SSL证书的做法我就不说了，我来说说第二种使用kloudsec提供的服务的做法。

实现原理看 Kloudsec 的文档里描述的 HOW DOES IT WORK?，它提供的服务处于我们的网站服务器和我们的网站访问者之间，其原理是缓存了我们服务器上的页面，所以实际用户建立的 HTTPS 连接是用户的浏览器与 Kloudsec 之间的。

首先注册Kloudsec的账户，填写邮箱和密码，接下来会让你填写仓库的地址和域名，它会检测仓库是否存在。然后最后是激活 Kloudsec 账号并登录。

然后最关键的一步来了，就是要设置域名解析规则。

按照上面给的，要设置3个A的解析规则。设置完成之后点击Verify DNS records，如果通过，那么就可以接下来的设置了。

这里会有一些免费和付费的服务，大家看自己需要选取。

这里的SSL Encryption要选上，打开会有如下的设置。

这里如果不上传自己的SSL，就会用它帮你生成免费的SSL证书。如果要用自己的，点击ADD CUSTOM CERT按钮上传SSL证书。

这里是一些插件。看自己需不需要。

最后，SETTING里面加上这个IP地址。这个IP是GitHub Pages 的可用 IP地址。

使用 Kloudsec 的好处

摆脱了证书不可信存在安全风险的不友好提示。
配置方便，一劳永逸。
访问速度并未受影响
小绿锁看着舒心

后来又发现了第三种方法能用HTTPS访问博客的方法：使用 GitLab 提供的 Pages 服务，那它直接支持添加自定义域名的 SSL 证书，可以配合免费申请的 SSL 证书一起使用。详情可见零成本打造安全博客的简单办法。

七.日后维护

至此，个人博客也绑定好域名成功上线了。以后的维护工作其实并没有多少。

1. 本地编辑文章：

用markdown工具，先写好博文，注意，每篇博文前面题头都要带下面这些格式。

---
layout: post
title: 如何快速给自己搭建一个温馨的"家"——用Jekyll生成静态博客
author: 一缕殇流化隐半边冰霜
date: 2016.06.21 01:57:32 +0800
categories: Blog
tag: Blog
---

文章写完之后，通过jekyll build生成页面，jekyll serve -B 通过本地localhost:4000查看文章。

2. 发布线上博客

本地确认文章无误，可以通过git add,git commit,git push 等git命令推送文章到Github Pages服务器就可以啦。过1，2分钟，访问自己的域名就可以看到新的博文啦！

结尾

关于静态博客的搭建就到这里了，如果大家还有什么不清楚了，请直接给我留言就好。静态博客还有一个hexo，也是很优秀的静态博客，如果大家有兴趣，想折腾的，也可以去试试它。唐巧就是用这个搭建博客的。当然也有动态博客，ghost搭建的，搭建动态博客就需要自己买一个服务器，然后去安装node.js环境，日后的维护也都需要自己一个人去完成。有兴趣的同学一样可以去试试！

Halfrost's Field | 冰霜之地