本文翻译自 Setup up a jekyll blog using github pages and disqus comments，原作者 Vincent Daubry。
想不想马上就开始搭建个人博客，简单易学，还好看？这篇文章将教你用 Jekyll 搭建博客，配上一款养眼的主题，然后跑在 GitHub Pages 上。
为什么选用静态的站点生成器？
相比于使用类似 WordPress 这样的 CMS（译者注：内容管理系统，允许用户在 Web 上创建和发布内容），我们有几条理由来选择使用静态站点生成器。对于本文来说，我们主要关注于 Jekyll 带给我们的简单：
- 上手容易（熟悉 Markdown 的话就更好了）
- 相当少的设置
- 部署方便，不需要运行服务器端程序
- 可以直接放到 GitHub 上用（感谢 GitHub Pages）
即便是静态站点生成器，这里也列出了很多款，那凭什么选择 Jekyll？
- 这可是当下最流行的静态站点生成器之一（不信看这里）
- GitHub 在用（GitHub 创始人 Tom Preston-Werner 编写）
- 基于 Ruby 生态系统
挑选一款 Jekyll 博客主题
默认的模板在设计上只能说一般般，不过你可以从 jekyllthemes.org 找到更棒的模板。你正在阅读的本站博客用的是 Read Only 模板，把它克隆下来你就可以开始啦。（译者注：原文博客用的模板是 clean-blog）
强烈推荐把每个页面顶部那张默认的大图换一张，在 stock-up 你可以找到很多基于知识共享许可协议的高清大图。
为了在本地预览效果，你需要先安装 Jekyll，参见这里。不过总体来说再复杂也只是这一句：
1
gem install jekyll
（译者注：然而 Windows 系统上复杂一点点，上面那个命令在 Windows 上其实是跑不起来的，如果你没有配好环境，请先阅读 快速在 Windows 上搭建 Jekyll 开发环境。）
为了让 Jekyll 在你的电脑上跑起来，请阅读 Jekyll 基本用法。
部署 Jekyll 博客
要部署你的博客，你只需要做以下任意一件事即可：
1. 手动生成静态博客
1
jekyll build
执行完后会将静态页面全部生成到 _site 文件夹下，然后把这个文件夹用 HTML 服务进行托管即可：
- 在远程服务器上运行 Apache
- 扔到亚马逊 S3 上作为静态站点
- 拷贝到 Dropbox 上作为公开的文件夹（不确定有没有用，算了还是别试了……）（译者注：这句话是原作者说的，不关我的事……）
2. 用 GitHub Pages 托管，而你需要做的只是在 GitHub 上建一个这种名字的仓库：
1
your_github_username.github.io
每次你把你的 Jekyll 博客仓库推送到 GitHub 仓库上，GitHub 就会自动为你生成和部署静态站点。
使用 Disqus 为你的博客添加评论功能
添加 Disqus 评论功能非常简单：
- 去 Disqus 创建个账号
- 一步步开通 Disqus 站点账号之后，进入到 Universal Code install instructions 页面
- 将 Disqus 提供的代码贴到 _layout / post.html 文件里面
(译者注：国内接入社会化评论需取得 ICP 备案，也就是说随着国内使用人数的增多，Disqus 随时有被屏蔽的可能性。)
添加发邮件功能
Clean-Blog 模板（译者注：就是原文博主用的那个模板）自带一个非常棒的“联系我”页，不过他发邮件用的是 PHP 脚本，GItHub Pages 不会执行任何 PHP 脚本，所以这对我们来说根本没用。
不过好在还有其他很多提供邮件发送功能的服务商可用，我选的是 formspree 因为他简单还免费。
因为我并不需要验证整个邮件表单是否有效（只需要验证值的合法性、检查下邮件格式对不对），所以我直接把 jqBootstrapValidation 删掉只用纯 HTML5 验证。
“联系我”表单使用 JavaScript 提交，所以我依然保留了这部分代码，然后稍稍做了点修改：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(function() {
$("#contactForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: "//formspree.io/[email protected]",
method: "POST",
data: $(this).serialize(),
dataType: "json",
success: function(data){
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function(){
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
}
});
});
});
于是现在你不用写后端也能发邮件啦！
以上。
如果你觉得这篇教程还有提升空间，欢迎留言评论。
本文源码在这里：vdaubry.github.io（译者注：翻译版的在这里 walterlv.github.io）
本文会经常更新，请阅读原文： https://blog.walterlv.com/jekyll/2017/09/15/setup-a-jekyll-blog-1.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 ([email protected]) 。