GitHub+markdown+jekyll打造完美个人博客


以前建过个人网站,也用过第三方的博客系统, 然后又回归到自建的个人博客,但总有不敬人意 的地方。比如自建的博客涉及到购买的服务器的 稳定性、流量成本、维护成本、数据的安全性、 文本编辑器的舒适度等,第三方的博客系统又觉 得局限性比较大、缺乏插件、觉得不牛逼等原 因。总之人是很贪心的,总想找到一个既不用担 心服务器稳定性、又不用担心流量成本、也不用 担心数据安全性、而且还能方便的维护资源、并 且还有丰富的插件的个人博客解决方案。于是外 事问Google,经过一阵寻觅后发现大牛们的博 客方案不正是我所需要的么,于是便有了上一篇 的补脑笔记,把涉及到的知识大概整理了一下, 准备开始搭建自己的个人学习笔记博客。今天这 篇笔记将记录我使用 Git+GitHub+Markdown+Jekyll搭建博客系统的 过程。 注:以下过程均在OS X系统上操作,Win系 统的童靴请勿效仿,但可借鉴。 让人不再担心本地备份与远程协作,一切提 交均有记录,均可追溯。 让人不再担心写废,想到哪里,写到哪里。 由于OS X系统自带Git,所以不需要再安装Git, GitHub+Markdown+Jekyll 打造完美的个人博客 GitHub Git 自带的Git版本为1.8.5.2。 不再忧虑排版,专注于写作。 Markdown是我认为最好的写作利器没有之一。 GitHub完美支持,个人写作使用的DayOne也完 美支持,Win系统下也有MarkdownPad这种成熟 的工具。 Github Pages:Websites for you and your projects. Github Pages 是面向用户、组织和项目开放的 公共静态页面搭建托管服 务,站点可以被免费托 管在 Github 上,你可以选择使用 Github Pages 默 认提供的域名 username.github.io 或者自定 义域名来发布站点。Github Pages 支持自动利 用 Jekyll 生成站点,也同样支持纯 HTML 文档, 将你的 Jekyll 站点托管在 Github Pages 上是一 个不错的选择。 通俗一点讲。你可以将你个人网站的html、 css、js、image等按一定目录结构托管在github 上,以index.html为入口(即个人网站首页), 使用username.github.io就可以访问你的个人网 站了。 再通俗一点讲。github为你提供了一台无限流 量、稳定、的服务器。你将个人网站的资源以一 定目录结构上传(托管)到github,该服务器的 ip就是username.github.io。 上述两次提到目录结构,下面我解释一下这个目 录结构。 Markdown 什么是Github Pages Jekyll 的核心其实是一个文本转换引擎。它的概 念其实就是: 你用你最喜欢的标记语言来写文 章,可以是 Markdown,也可以是 Textile,或者 就是简单的 HTML, 然后 Jekyll 就会帮你套入一 个或一系列的布局中。在整个过程中你可以设置 URL路径, 你的文本在布局中的显示样式等等。 这些都可以通过纯文本编辑来实现,最终生成的 静态页面就是你的成品了。 上述多次提到的目录结构即Jekyll的目录结构。 如下: . |--_config.yml> |--_drafts |--articles1.textile |--articles2.md |--_includes |--footer.html |--header.html |--_layouts |--default.html |--post.html |--_posts |--2014-06-17-articles1.textile |--2014-06-17-articles1.md |--_site |--index.html |--other files _config.yml :保存配置数据。 什么是Jekyll 如何使用Github Pages与Jekyll Jekyll目录结构 _drafts :存放未发布的文章。 _includes :存放页面片段,即页头 ( head.html )、页脚 ( footer.html )、导航 ( navigation.html )、评论 ( disqus_comments.html )等,这些 资源通过标签添加到index.html中,从而形 成一个完整的页面。 _layouts :存放模板文件。文章模板、 关于页面模板、首页模板等。 _posts :存放文章的文件。并且文章文 件名称要符合 YEAR-MONTH-DAY- title.MARKUP 格式。 _site :经过jekyll转换的页面。 index.html :网站首页。 other files :其他文件,存放css、 js、image等。 首先会加载_posts及文件夹下的所有文章, 将其参数和文章内容组织保存在内存中,所 有的文章的内容、参数都在site.posts对象 (其他文件夹下的文章不会放入site.posts 中)。 其次加载_layouts文件夹下的所有模板。 再次加载_includes文件夹下的所有需要被引 入的内容。 最后根据每一篇需要编译的文章选择的其参 数定义的模板来创建一个模板,并将当前文 章的内容、参数等进行扩展后放在page对 Jekyll解析流程 象、content对象中,然后进行模板的编 译,生成html文件,并按照一定规则放在 _site文件夹下。也就是说在创建一篇文章 时,其实所有文章的内容都已经被读取出来 了,这也为文章相互之间的关联提供了可 能。 注:这里默认安装环境已具备Ruby、 RubyGems环境。 安装jekyll: $ sudo gem update —system $ sudo gem install jekyll 安装模板,默认的模板是Maruku,我们替 换为RDiscount。 $ sudo gem install rdiscount Maruku是纯ruby写的Markdown模板解释 器。 RDiscount是C写的模板解释器。 为什么要替换为RDiscount呢,有心人对两者做 了比较,优劣可见一斑。 Maruku: 08.424132s total time, 00.08 4241s average RDiscount: 00.082019s total time, 00 .000820s average 新建一个jekyll目录: $ jekyll new blog 进入到该目录下,你就能看到上述的目录结 构: 在本地安装jekyll $ cd blog jekyll集成了一个开发用的服务器,可以让你使用 浏览器在本地进行预览。启动server,访问地址 为http://localhost:4000/: $ jekyll serve 至此,一个简单的基于本机服务器的jekyll框架的 个人网站就算搭建完毕,在浏览器中访问http://l ocalhost:4000/,就可以看到index.html中的内 容,一般在制作模板时多采在本地安装的方式, 便于调试。更多配置信息请参见[Jekyll文档](http ://jekyllcn.com/docs/home/)。 这篇笔记的主题不是如何在本机搭建个人网站, 所以这种使用方式是重点。 由于Github Pages完美支持Jekyll,所以你只需 要安照Jekyll的文件目录结构,托管在Github中 即可,不需要在本机安装Jekyll,只需要关注于 github,可以借鉴大师们设计的Jekyll模板,然 后push或pull你的文章即可。 注册GitHub账号,只需要一个邮箱和密码。 GitHub官网 创建一个Repository,命名格式为: username.github.io,这样就生成了你的 User site。可参见GitHub Pages 注意:这里的username必须和你的账号名 一致。 不管用命令行还是用Finder,总之新建一个 目录,我这里起名为GitRepo。 结合Github Pages使用Jekyll 进入GitRepo目录,键入git init命令,初始 化一个git库。 cd /Users/JaceFu/GitRepo 将刚才在Github中创建的Repo克隆到你本 地的Git库中,即刚在本地创建的GitRepo目 录中。 cd /Users/JaceFu/GitRepo git clone https://github.com/usernam e/username.github.io 在GitRepo文件中会看到名为 username.github.io的文件,这就是你从Github 中克隆的Repo文件。 Hello World,进入Repo目录中,创建一个 HTML文件,名为index,内容为“Hello World”。 cd /Users/JaceFu/GitRepo/username.gi thub.io echo “Hello World” > index.html 将创建的index.html文件push到github中 cd /Users/JaceFu/GitRepo/username.gi thub.io git add . git commit -m “Hello World update” git push 在浏览器中访问 http://username.github.io ,你将 会看到index.html文件中的内容,我们这里 会显示“Hello World”。至此,基于Github Pages功能的个人站点就算搭建好了。 在克隆到本地的Repo文件中,按照上述的 Jekyll文件目录结构手动创建所需的文件资 源,并上传。由于Github本身完美支持 Jekyll,所以只要符合Jekyll的文件目录, Github就自动使用Jekyll解析形成页面。 至此,我们应该有了一定的理解,这里我再简单 梳理一下: Jekyll可以将我们使用markdown写的文章按 照指定模板解析为html文件。 Github Pages可以充当我们的服务器,通过 username.github.io可以访问到我们上传的 html页面。 Github Pages完美支持Jekyll,所以不需要 我们自己编写复杂的html页面,只要将 Jekyll的目录结构上传至Github中,就可以 通过username.github.io访问由Jekyll解析生 成的html页面,从而形成了个人网站。 基本配置参见官方配置文档。 不同的模板,在该 文件中的配置项也不一样,因为我自己使用了大 师设计的模板,配置了如下参数(部分): title:网站名称。 description:网站说明。 logo:网站logo。 disqus_shortname:disqus标示符。 search:是否运行搜索。 url:网站中一些资源文件使用的url地址。 encoding:编码。 配置_config.yml文件 markdown:md解析模板。 timezone:时区。 可以看一下_posts下的jekyll给的例子: --- layout: post title: "Welcome to Jekyll!" date: 2014-01-27 21:57:11 categories: jekyll update --- You'll find this post in your `_post s` directory - edit this post and re -build (or run with the `-w` switch) to see your changes! To add new posts, simply add a file in the `_posts` directory that follo ws the convention: YYYY-MM-DD-name-o f-post.ext. Jekyll also offers powerful support for code snippets: { % highlight ruby % } def print_hi(name) puts "Hi, #{name}" end print_hi('Tom') #=> prints 'Hi, Tom' to STDOUT. { % endhighlight % } Check out the [Jekyll docs][jekyll] for more info on how to get the most 编写博文 out of Jekyll. File all bugs/featur e requests at [Jekyll's GitHub repo] [jekyll-gh]. [jekyll-gh]: https://github.com/mojo mbo/jekyll [jekyll]: http://jekyllrb.com 可以看到在博文的最上方有被两个---包裹起来的 一段,这里就定义了文章的一些参数,更多参数 在FrontMatter和Variables获取,简单的只需要 关注几个就好: title:文章的标题。 date:文章的日期。 categories:定义了文章所属的目录。 layout:文章所使用的模板名称。 tags:文章标签。 这里就写一个最简单的文章,只是用其中的两个 参数:layout,title,如下: --- layout: mylayout title: hello-jekyll --- Hello jekyll! 将这个写完的文章保存为 “年-月-日-标 题.markdown”的名字形式,上传至Github中的 _posts文件中,Jekyll会自动解析生成该文章的 html页面。 注:文章的文件名不要使用中文,否则会出 现Bug。 如果想自己编写模板可以参见如何创建Jekyll模 板。 或者可以使用大师们设计好的模板。Jekyll 模板锦集。 个人网站要有一个称心的域名,使用 username.github.io实在不像话,所以我说一下 如何配置个性域名。如何申请域名这里就不再累 赘。 在Github中的User Site Repo根目录(即Github 中Jekyll目录的根目录)下创建CNAME目录,内 容为你的个性域名,格式为 www.yourdomain.com即可。 然后在域名管理系统中解析域名,添加CNAME 记录,服务器为username.github.io。等待一个 多小时后,就可以使用自己的域名访问了。 至此,使用Github Pages和Jekyll搭建个人网站 的过程记录完毕。 更多内容请关注微信号:DevTalking 或访问www.devtalking.com了解更多IT咨询 编写模板 个性域名 结束
还剩10页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

xp65

贡献于2016-02-21

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf