建站教程
免费使用Jekyll+Github Page搭建博客入门攻略
<small>因为自己爱捣（zhuang）鼓（bi），从博客百度空间到后来轻博客： Posterous、Tumblr、点点、推他、Lofter...再到自己搭建wordpress，写一些简单的静态html页面...我可真是在“玩”博客，而非写博客。直到有一天认识了Jekyll，被其极简写作理念所拯救......</small>
阅前说明
<p>此文主要记录了我自己在建此站点过程中遇见的一些问题和解决方案，完全是在自身能力层级范围内进行描述，有误之处望请包涵指正。</p>
本教程适用对象包括但不限于：
- <p>对建站、HTML、CSS等词汇完全免疫的人
- <p>会修改网页图片链接的入门小白设计师
工具准备
- 网页代码编辑器：Dreamweaver/Sublime Text
- Markdown 编辑器（本人用的Typed）
- Github客户端
- 本文涉及到本地安装Jekyll进行预览，所以使用到OS X系统的终端:Terminal(终端)
- VPN工具，便于搜索更多资料（本人使用鱼摆摆)
- TXT/印象笔记，用于记录相关代码或者教程
第0步：买域名
懂的同学自行跳过此步，买域名为什么要放到前面来做掉？是为了防止有的同学弄到一半嫌麻烦，就没精神再捣鼓下去，而买了域名，钱都往里砸了，极有可能帮助剧情往下继续发展，有助于个人身心健康....
域名可在Go Daddy上使用支付宝购买，至于价格，相信我，你买的越贵你就越接近建站成功的时刻。
英文不好？那就万网、美联互橙、新网随便挑一个国内域名服务商买吧。
关于域名这块，还需要域名解析的预备知识，你可先收藏这个
那么接下来，让我们拿起工具开始吧！
— 图片来自@jonrohan
第1步：注册github并搭建Page
<p>1,注册Github
2,新建一个"Repository-中文叫做版本库或者仓库，相当于是一个目录，这个目录里面的每个文件的修改、删除，Github都能进行管理、跟踪以及复原":Repository(仓库)
<small>如图，点击+ New Repository</small>
http://7d9kkp.com1.z0.glb.clouddn.com/$}`Q(}T)8K_HL4CADIP4$~9.jpg
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
- <p>去git-scm下载与你系统对应的安装包，然后安装。
- <p>安装完成后，在开始菜单找到“Git”->“Git Bash”进行打开操作。
MAC OS X
- <p>先安装个Xcode，在AppStore搜索安装即可；(安装包大，下载有些时间)
- <p>运行Xcode，找到“Xcode”菜单->“Preferences”，再“Downloads”标签，点击“Command Line Tools”，进行Install。因为Xcode其实默认集成了Git，只是没有安装。
关于git安装的更多知识可参考《mac安装最新版本的git》和《安装git》
要是你想学习更多关于git的知识，那就去看大而全的Git教程
<b>一些基本的git命令：</b>
//创建一个仓库
$ 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到本地了吗，这个时候就需要使用<code>git init</code>命令将这个文件夹目录设置为本地git可以管理的仓库。
关于ssh链接github可参考使用SSH密钥连接Github【图文教程】
第4步：在本地安装Jekyll进行项目预览
可参考下面两篇
特殊问题及解决方案
<dl>
<dt><p>解决gem install jekyll 运行无法知道的问题</dt>
<dd><p><b>在代码 gem install jekyll 前加 sudo，在代码后加-V可看到安装详情过程（mac x os）</b></dd>
<dt><p>解决gem ruby install 很慢的问题</dt>
<dd><p><b>换成淘宝镜像源</b></dd>
<dt><p>解决报错：Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.</dt>
<dd><p><b>打开 Xcode 会弹出更新说明，点击同意，安装完就可以了</b></dd>
<dt><p>测试SSH是否正常工作</dt>
<dd><p><b>参考测试SSH</b></dd>
</dl>
添加ReadMore功能（文章摘要功能）
参考JavaChen's Blog和Trường TX blog
最终我的代码综合以上两位的方法,在index.html添加了如下图代码：
给文章页面添加多说评论
<p>1,注册多说账号，得到short_name （如图，cellier-me就是我的shortname）
2,将生成的多说代码复制，找到仓库的_layouts文件夹下的post.html文档，使用代码编辑器打开，将多说代码粘贴到{ { content } },</div>的下面，对了，请养成随时Ctrl+S进行文档编辑保存的习惯
3,找到仓库里的_config.yml文档，代码编辑器打开，贴入如下代码
<code>
comments :
provider : duoshuo
duoshuo :
short_name : 你的short_name
</code>
- 更多关于多说设置的内容可参考beeder同学写的以及havee同学写的
- 而关于多说的CSS样式设置可参考多说评论框css样式表自定义
- 样式代码贴入多说官网-个人-网站设置-基本设置里即可（下图位置）
常用HTML代码：
<code>
// 新建标签页打开链接
<a href="此处填写要跳转的网址" target="_blank">链接文字</a>
</code>
<code>
// 插入图片：width 设置图片宽度；height 设置图片高度
<img src="图片路径地址" width="165" height="60" />
</code>
<code>
// 插入图片并居中
<div align=center><img src="图片网址" width="500" /></div>
</code>
常用HTML标签
- <p>加粗字体, 使用
<strong> - <p>斜体, 使用
<em> - <p>标注, 像 <abbr title="一种超文本标记语言">HTML</abbr> 使用的是标签
<abbr>, 加上标注标题来阐述被标注对象 - <p>引文, 像 <cite>— 鲁迅</cite>, 使用
<cite> - <p><del>删除线</del> 使用标签
<del>而<ins>下滑线</ins> 则使用<ins> - <p>上标字 2B 使用
<sup>而下标字 还是2B则用<sub> - <p><tt>打字机体</tt>使用
<tt> - <p><u>下划线</u>还可使用
<u> - <p>特殊符号
表示 空格 - <p><big>大字体</big>使用
<big>，<small>小字体</small>使用<small>
<b>最后，我想说的是：</b>
“没有十全十美的教程，如同不存在彻头彻尾的绝望”（改自村上春树语）
重要的是保持住一颗捣腾不安的心以及对知识的渴望与翻墙找寻.....
转载请注明：From cellier
网友评论