每个人都应该有一个Jekyll博客

jopen 9年前

每个人都应该有一个Jekyll博客

免费使用Jekyll+Github Page搭建博客入门攻略
因为自己爱捣（zhuang）鼓（bi），从博客 百度空间到后来轻博客： Posterous、Tumblr、点点、推他、Lofter...再到自己搭建wordpress，写一些简单的静态html页面...我可真是在“玩”博客，而非写博客。直到有一天认识了Jekyll，被其极简写作理念所拯救......

阅前说明

此文主要记录了我自己在建此站点过程中遇见的一些问题和解决方案，完全是在自身能力层级范围内进行描述，有误之处望请包涵指正。


本教程适用对象包括但不限于：

  • 对建站、HTML、CSS等词汇完全免疫的人

  • 会修改网页图片链接的入门小白设计师

工具准备

第0步：买域名

懂的同学自行跳过此步，买域名为什么要放到前面来做掉？是为了防止有的同学弄到一半嫌麻烦，就没精神再捣鼓下去，而买了域名，钱都往里砸了，极有可能帮助剧情往下继续发展，有助于个人身心健康....

域名可在Go Daddy上使用支付宝购买，至于价格，相信我，你买的越贵你就越接近建站成功的时刻。

点此查看怎样购买GoDaddy域名

英文不好？那就万网、美联互橙、新网随便挑一个国内域名服务商买吧。
关于域名这块，还需要域名解析的预备知识，你可先收藏这个

那么接下来，让我们拿起工具开始吧！

每个人都应该有一个Jekyll博客

— 图片来自@jonrohan

第1步：注册github并搭建Page

1,注册Github

2,新建一个Repository(仓库)
如图，点击+ New Repository每个人都应该有一个Jekyll博客
3,输入相关配置，注意，在网址栏一定要输入username.github.io，username指的是你注册时的用户名
每个人都应该有一个Jekyll博客
4,新建好后，进入项目，点击右下角Settings（设置）
每个人都应该有一个Jekyll博客
5,点击Automatic page generator（页面自动生成器）
每个人都应该有一个Jekyll博客
6,选择一个你喜欢的模板，点击生成...其实到这一步，我们的网站已经生成了，你可以通过自己的域名username.github.io进行访问，只是目前，我们还没有学会对网站上的内容进行管理。

第2步：解析自己的域名到username.github.io



参考我们在准备阶段收藏的网页，在域名服务商那里将域名使用CNAME解析到自己的此处填写你的用户名.github.io。
接着，我们要进行github端的配置，进入我们所建的Page仓库主页，找到右下角的Clone in Desktop，将 项目克隆到本地。对了，你下好了github的客户端了么？还没有？那赶紧下了，然后登陆，这就要用到它的同步功能了（其实用github客户端同步文档 对Geek而言是一件不太光彩的事，但暂时我们先忍忍吧，先让自己看到一点效果，得到一点成就感，鼓舞着自己走下去） 我们新建一个文档，随便什么格式，然后在里面写入自己买的域名（注意：如果是CNAME解析，此处域名前需加上“www.”），然后将文档重命名成CNAME,不要加任何文件格式后缀。
然后此CNAME文档拖到我们克隆到本地的仓库文件夹，使用github客户端进行同步上传。过不了多久，你就可以在浏览器中打进你的域名，你会惊奇地发现，它已经自动跳转到你在github上设置的默认网页了！

第3步：本地安装git，并配置SSH

为了下一步铺垫

暂时先参考《mac安装最新版本的git》和《安装git》

  1. 提醒：本文将在2015-01-11更新

  2. 提醒：本文将在2015-01-11更新

  3. 提醒：本文将在2015-01-11更新

第4步：在本地安装Jekyll进行项目预览

（还未写）暂时参考：

特殊问题及解决方案

解决gem install jekyll 运行无法知道的问题

在代码 gem install jekyll 前加 sudo，在代码后加-V可看到安装详情过程（mac x os）

解决gem ruby install 很慢的问题

换成淘宝镜像源

解决报错：Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

打开 Xcode 会弹出更新说明，点击同意，安装完就可以了

测试SSH是否正常工作

参考测试SSH

添加ReadMore功能（文章摘要功能）


参考JavaChen's Blog和Trường TX blog

最终我的代码综合以上两位的方法,在index.html添加了如下图代码：



每个人都应该有一个Jekyll博客

给文章页面添加多说评论

1,注册多说账号，得到short_name （如图，cellier-me就是我的shortname）

每个人都应该有一个Jekyll博客

2,将生成的多说代码复制，找到仓库的_layouts文件夹下的post.html文档，使用代码编辑器打开，将多说代码粘贴到{ { content } },</div>的下面，对了，请养成随时Ctrl+S进行文档编辑保存的习惯

3,找到仓库里的_config.yml文档，代码编辑器打开，贴入如下代码

comments :
provider : duoshuo
duoshuo :
shortname : 你的shortname


- 更多关于多说设置的内容可参考 beeder同学写的以及 havee同学写的

- 而关于多说的CSS样式设置可参考 多说评论框css样式表自定义

- 样式代码贴入多说官网-个人-网站设置-基本设置里即可（下图位置）

每个人都应该有一个Jekyll博客
常用HTML代码：

// 新建标签页打开链接
<a href="此处填写要跳转的网址" target="_blank">链接文字</a>

// 插入图片：width 设置图片宽度；height 设置图片高度
<img src="图片路径地址" width="165" height="60" />

// 插入图片并居中
<div align=center><img src="图片网址" width="500" /></div>

常用HTML标签

  • 加粗字体, 使用<strong>

  • 斜体, 使用<em>

  • 标注, 像HTML使用的是标签<abbr>, 加上标注标题来阐述被标注对象

  • 引文, 像— 鲁迅, 使用<cite>

  • 删除线 使用标签<del>而下滑线则使用<ins>

  • 上标字 2B 使用<sup>而下标字 还是2B则用<sub>

  • 打字机体使用<tt>

  • 下划线还可使用<u>

  • 特殊符号&nbsp;表示 空格

  • 大字体使用<big>，小字体使用<small>

最后，我想说的是：

“没有十全十美的教程，如同不存在彻头彻尾的绝望”（改自村上春树语）

重要的是保持住一颗捣腾不安的心以及对知识的渴望与找寻.....


来自：http://www.cellier.me/2015/01/04/jekyll%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/