用Jekyll和Github搭建个人博客
References
- http://jekyllcn.com/docs/usage/
- http://jekyllbootstrap.com/usage/jekyll-quick-start.html
- http://jekyllthemes.org/
- http://jmcglone.com/guides/github-pages/
- https://help.github.com/articles/using-jekyll-as-a-static-site-generator-with-github-pages/
- 利用github-pages建立个人博客, Github+Jekyll 搭建个人网站详细教程
- Configuring a Godaddy domain name with github pages
- How to use Git, ICons, 使用jekyll来写博客的一些心得
- 使用Dropzone和七牛优化博客图床, Jekyll博客中如何用相对路径来加载图片?,
- jekyll访问统计+标签页+评论+搜索+目录树, Markdown中插入图片有什么技巧?
Goal
- 用Jekyll和github来搭建博客系统
- 用markdown来写博文,格式主题和发布由jekyll完成,同步和管理由git完成
- 买个人域名,并连接到github page
- 给博客添加 统计访问,评论和搜索功能
- 通过github或者七牛来管理博客中的图片
Git配置, Github建立repo
-
git 配置
-
git是版本控制工具,github是公共的git server。为了本地管理你的网站,首先需要安装git。Linux简单的用
yum install git-core
或者apt-get install git
, Mac 上只要是安装了xcode terminal就默认安装了git,要是没安装,可以用 homebrew 来安装brew install git
. 初学者可以通过GUI安装,Mac OS用http://sourceforge.net/projects/git-osx-installer/ , Windows用http://msysgit.github.com/。 -
安装后,做一些简单的配置,
# 用了 --global 选项,那么更改的配置文件就是位于你用户主目录下的那个,以后你所有的项目都会默认使用这里配置的用户信息 $ git config --global user.name "ZhenZHAO" $ git config --global user.email zhen.now@gmail.com # 去home目录检查一下 $ cd ~/.ssh # 添加SSH Key到GitHub # 在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。 # 用文本编辑工具打开id_rsa.pub文件,如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。 # 在GitHub的主页上点击设置按钮: github account setting # 选择SSH Keys项,把复制的内容粘贴进去,然后点击Add Key按钮即可
-
git config 更多的用法:link, 或者通过
$ git help config
快速查。通用的git查询$ git help <verb> $ git <verb> --help $ man git-<verb>
-
git的几个基础的命令
$ git init $ git status $ git diff $ git clone <repo> [NewName] $ git add <filename> / git add . $ git commit -m 'description' $ git commit -am 'description' # add and commit $ git push [-u] origin master # -u for the first use $ git pull
-
- git入门的几个资源
-
使用 Github
- 访问https://github.com/new,登录,以
username.github.io
或者username.github.com
创建新的仓库
- 访问https://github.com/new,登录,以
-
从本地自己创建
-
创建一个新目录,然后
git init
-
在该目录下手动创建如下文件和文件夹, 以下的目录 (参考官网)
_includes
:被模板包含的HTML片段,可在_config.yml
中修改位置_layouts
:网页排版模板_posts
:博客文章默认的存放位置_pages
: 其他需要生成的网页,如About页_config.yml
:关于jekyll模板引擎的配置文件index.html
:默认的主页assets
: 辅助资源 css布局 js脚本 图片等.gitignore
:git将忽略这个文件中列出的匹配的文件或文件夹,不将这些纳入源码管理_sites
最终生成的静态网页
-
编辑index.html
-
push到github
$ git add . / git add -A $ git commit -m "initial commit" $ git remote add origin https://github.com/<username>/<username>.github.com.git $ git push -u origin master
-
-
克隆模版或者别人的网站
-
去http://jekyllthemes.org/ 或者github上找一些喜欢的模版,然后clone下来
git clone https://github.com/zhenZHAO/zhenzhao.github.com.git
-
删去别人的.git文件夹
rm -rf .git
-
参考官网, 把他人的博客删去,并且做一些小的调整
-
修改后上传到自己的github
$ git init $ git commit -am "first commit" $ git remote add origin https://github.com/<username>/<username>.github.com.git $ git push -u origin master
-
买域名与github pages链接
个人是在Goddady 上买的域名,可以百度一些优惠码,并且支持支付宝支付。接下来就是将 XXX.github.io 绑定到你买的域名上,参考Configuring a Godaddy domain name with github pages, 以下步骤来设置:
-
Set up my user page on Github (zhenzhao.github.io)
- to put it simple, follow the steps: New repository-> username.github.io->create (done)
- refer here
-
Commit a file called CNAME with one line:
zhaozhen.me
(the domain name you brought)$ cd zhenzhao.github.io $ echo "zhaozhen.me" > CNAME $ git add . $ git commit -m 'CNAME' $ git push -u origin master
-
Go to GoDaddy site to manage your URL
- log in and go to the ‘Domain Management’
-
Add an “A (Host)” record with “host” =
@
and “Points to” =192.30.252.153
- 自己的域名下添加一条A记录,地址就是Github Pages的服务IP地址
-
Add a “CNAME (Alias)” record with “host” =
www
and “Points to” =zhenzhao.github.io
- add the alias (your github page address) to your domain
-
Wait for changes to propogate.
-
try to access your brought domain, which should link you to the github page
-
or, you can test it with
dig
dig zhaozhen.me +nostats +nocomments +nocmd
-
Jekyll 介绍
jekyll是一个基于ruby开发的,专用于构建静态网站的程序。它能够将一些动态的组件:模板、liquid代码等构建成静态的页面集合,Github-Page全面引入jekyll作为其构建引擎,这也是学习jekyll的主要动力。同时,除了jekyll引擎本身,它还提供一整套功能,比如web server。我们用jekyll–server启动本地调试就是此项功能。读者可能已经发现,在启动server后,之前我们的项目目录下会多出一个_site
目录。jekyll默认将转化的静态页面保存在_site
目录下,并以某种方式组织。使用jekyll构建博客是十分适合的,因为其内建的对象就是专门为blog而生的,在后面的逐步介绍中读者会体会到这一点。但是需要强调的是,jekyll并不是博客软件,跟workpress之类的完全两码事,它仅仅是个一次性的模板解析引擎,它不能像动态服务端脚本那样处理请求。
Jekyll 安装
参考 JekyllCN 和Mac下Jekyll安装, 以MacOS为例,
-
安装 Xcode Command-Line Tools
$ xcode-select --install
-
安装RUBY 和 Gem (MacOS默认安装) (升级一下)
$ sudo gem update --syetem $ gem -v $ ruby -v
-
安装jekyll
$ sudo gem install jekyll # 如果上边的命令报错,没有/usr/bin的权限,那么 $ sudo gem install -n /usr/local/bin jekyll $ jekyll -v $ which jekyll
-
安装一些其他模块
$ gem update jekyll $ sudo gem install jekyll-sitemap jekyll-seo-tag jekyll-feed
-
进入本地的Github page测试
$ jekyll --server --safe
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 语法
评论功能
模板本身有评论功能,但是用的是国外的Disqus,Disqus在国内被屏蔽的。 主流的评论系统有Disqus, Facebook comment, IntenseDebate, Livefyre等。我这里选择的是IntenseDebate,其它的访问速度貌似较慢。 去IntenseDebate注册账号,并获取到key,并定义在
_config.yml
中,如: intensedebate_identifier: 1ce8d80a5f6d373a46f4ceaf3dff8859,intensedebate_identifier取你自己想定义的名称,值为你注册后获取到的key 在_includes
目录下创建disqus.html,并添加如下代码,这样文章就有了评论功能。
静态的网站不可能自己存放评论,于是只能考虑外挂评论了,查了一下比较靠谱和广泛的就是DISQUS了; Disqus是一个社会化的评论解决方案,请允许我使用这个烂透了的词,调用它的接口非常简单,在自己的页面加载他的一段JS代码即可,如果别人注册了Disqus,那么就可以方便的留言,交流,一处登录,处处方便,而且Disqus也提供了一些spam等策略,不用自己操心了,并且可以和一些现有的博客系统很好的转换对接。越来越多的网站开始使用Disqus的服务了,这是一个非常不错的趋势,Jekyll配合Disqus实在是完美了。我别无所求了。
站内搜索
blog当然不能缺少站内搜索功能。主流的站内搜索都是主流的搜索引擎提供的。作为一个google控,当然必须选择google啊。当然你必须拥有一个google帐号。
google的站内搜索叫:custome search engine:http://www.google.com/cse
创建一个自定义搜索与添加评论类似只要三步:
- 填写自定义搜索的名字、描述、语言、站点信息,这些信息中唯一需要注意的是站点信息,建议使用mydomain.com作为搜索范围,因为这样的话,会自动转化成.mydomain.com/,能包含全站的内容
- 选择样式和尝试搜索。尝试搜索有时不能成功,但是不要紧
- 将生成脚本写到网页中
这时,可能搜索功能仍然无法使用,尤其是你的网站没有什么名气,也没有什么外链。因为google的爬虫不可能很快的抓到你的网站。但这里有个技巧可以让你的网站立刻被google收录(姑且不论排名),那就是google的Webmaster Tools工具,该工具是免费的,而且还集成了站点流量统计功能,十分强大。
搜索的思路有2种:
站点统计
我这里添加百度统计,添加谷歌统计因为被墙了,会影响文章的访问速度,添加也需要先去百度统计网站注册账户,申请key,申请到key后类似上一步定义在_config.yml中,同时会得到一段代码,把它添加到_includes目录下的head.html中,这样统计功能就添加完成
<!--百度统计--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?56385150d223d3a72bebe8a0d4a94e19"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>
这里介绍的站点统计是google的analytics,analytics的使用十分简单,同样的原理,利用注入脚本来实现流量统计的外挂,统计功能十分强大,谁用谁知道。这里就不再唠叨了。。
添加访问量
在_includes目录下的head.html中添加
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
在_includes目录下的footer.html中添加如下代码,这样文章底部有了统计访问量功能
<span id="busuanzi_container_site_pv">本站总访问量:<span id="busuanzi_value_site_pv"></span>次</span>
在_layouts目录下的post.html中添加如下代码,这样每篇文章有了统计访问量功能
<span id="busuanzi_container_page_pv"> | 访问量:<span id="busuanzi_value_page_pv"></span> 次</span>
博客图片管理
-
在github page的assert文件夹中,创建一个img文件夹,然后用

-
使用Dropzone和七牛优化博客图床
-
设置七牛帐号
- 去七牛官网注册账号
- 创建一个空间,记得选择公开空间。
-
设置Dropzone
- Dropzone是通过拖拽的方式,增强了文件的处理流程。
- 下载软件
- 这个软件可以在App Store上直接购买,但是买到的是功能受限的,它不能操作外部文件。不过没有关系,再从官网上下载非沙箱版本,然后覆盖掉Application文件夹下的即可。
- 安装Qiniu插件
- 这个插件已经上传到了官方网站的非官方插件处,可以直接戳这里下载。
- 安装插件
- 下载后的是一个zip包,把这个包解压以后双击安装即可。
- 启用插件
- 从增加列表中选择我们安装好的七牛插件
- 然后填写配置:
- server: 七牛上的空间名
- username: 七牛的access_key
- password: 七牛的secret_key
- remote path(可选): 本地同步图片的目录,如果你希望本地也存一份图片,选一个地址即可
- root url: 七牛的公共链接根目录
-