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

2015.01.04

免费使用Jekyll+Github Page搭建博客入门攻略

因为自己爱捣(zhuang)鼓(bi),从博客 百度空间 到后来轻博客: Posterous 、Tumblr、点点、推他、Lofter...再到自己搭建wordpress,写一些简单的静态html页面...我可真是在“玩”博客,而非写博客。直到有一天认识了Jekyll,被其极简写作理念所拯救......

阅前说明

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

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

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

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

工具准备

第0步:买域名

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

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

点此查看 怎样购买GoDaddy域名

英文不好?那就万网、美联互橙、新网随便挑一个国内域名服务商买吧。

关于域名这块,还需要域名解析的预备知识,你可先 收藏这个

那么接下来,让我们拿起工具开始吧!

— 图片来自 @jonrohan

第1步:注册github并搭建Page

1, 注册Github

2,新建一个 Repository(仓库)

如图,点击 + New Repository

3,输入相关配置,注意,在网址栏一定要输入 username.github.io ,username指的是你注册时的用户名

4,新建好后,进入项目,点击右下角 Settings (设置)

5,点击 Automatic page generator (页面自动生成器)

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

Git是什么?它是最先进的分布式版本控制系统,什么?听不懂?那我举个糖炒栗子甜蜜蜜地告诉你:假设你是个苦逼的设计师,那么下图应该是你常有的遭遇:

这时候,git就出现了,他不但能帮你自动记录每次文档的改动,还能让其他人协作编辑,这样的话,你就不需要手动管理这么多文档,也不用U盘来U盘去的了,想看其他同学改了什么,直接瞄一眼修改记录解决了。简直是IT届的“暖男欲女”,赶紧用它“装逼”用它“飞!”....

Windows
  1. git-scm 下载与你系统对应的安装包,然后安装。

  2. 安装完成后,在开始菜单找到“Git”->“Git Bash”进行打开操作。

MAC OS X
  1. 先安装个Xcode,在AppStore搜索安装即可;(安装包大,下载有些时间)

  2. 运行Xcode,找到“Xcode”菜单->“Preferences”,再“Downloads”标签,点击“Command Line Tools”,进行Install。因为Xcode其实默认集成了Git,只是没有安装。

关于git安装的更多知识可参考 《mac安装最新版本的git》《安装git》 .

要是你想学习更多关于git的知识,那就去看 大而全的Git教程 .

一些基本的git命令:

//创建一个仓库
$ mkdir cellier
$ cd cellier
$ pwd
/Users/cellier/username.github.io
//通过git init命令把这个目录变成Git可以管理的仓库
$ git init
Initialized empty Git repository in/Users/cellier/username.github.io /.git
//要更新你的本地仓库至最新改动,执行:
git pull

我们原先不是将github上的库clone到本地了吗,这个时候就需要使用 git init 命令将这个文件夹目录设置为本地git可以管理的仓库。

关于ssh链接github可参考 使用SSH密钥连接Github【图文教程】 .

第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 BlogTrường TX blog

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

给文章页面添加多说评论

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

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

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

comments :<br /> &nbsp;&nbsp;&nbsp;provider : duoshuo<br /> &nbsp;&nbsp;&nbsp; duoshuo : <br /> &nbsp;&nbsp;&nbsp;short<em>name : 你的short</em>name

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

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

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

常用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>

最后,我想说的是:

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

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

我来评几句
登录后评论

已发表评论数()