网上有不少资源,但大多是“授人以鱼”,文中一步一步的告诉你怎么做,却没有解释为什么,以及他是如何知道的。他们默认着你知道种种专业名词的含义,默认着你掌握着特定技能。你折腾半天,查资料,看教程,一步步下来,有进行不下去的地方,再去查其他人的做法,最终也建立起了自己的独立博客。但却,恍然不知,你用到的技术是什么含义。

我认为,初学者,要想在一个项目中,切实提高自己,需要活用活学。遇到一个专业名词,就去搞懂它,而不是马马虎虎混过去。一个技能点、一个技能点的攻破,然后将点系统的连起来,形成自己的知识网络,不断去细化和扩充。所以,这篇文中,尽力的在“授人以渔”。读者边看边实践之后,一方面,可以搭建好自己的独立博客;另一方面,会学到涉及的知识。前者是实际应用,是至顶向下的过程;后者是基础知识,是自底向上的过程。至底向上与至顶向下相结合,才能融会贯通。我希望在文中表达的,或者说希望读者接收到的,也就是融会贯通的学习能力。

目录

引子

Step 1. 选地

注册Github,新建仓库,新建GitHub Pages,克隆到本地。

1.1. 什么是Git和GitHub? 分布式版本控制系统,代码托管,开源项目。

1.2. 什么是GitHub Pages? 介绍用的Blog

1.3. 如何使用?

Step 2. 建造

安装Jekyll环境,运行本地服务器。

2.1. 什么是Jekyll? 静态网站生成器

2.2. Jekyll文件目录

2.3. 如何发表文章?

Step 3. 装修

选择模板,下载,安装。

3.1. 3.1. 如何选择和修改主题?

Step 4. 定制

4.1. 如何使用独立域名?

4.2. 如何添加评论功能?

最后

不要忘记初衷,在折腾之后,表达写作,才是最重要的事情。

参考


引子

在互联网的世界里,建自己的博客就像是在搭建房子。当然,你可以直接用别人为你建好的房子,比如Tumblr、简书、新浪博客、Lofter、博客大巴等等。

Tumblr和Lofter都是自己比较喜欢的,房子建得美丽又实用。在同一个平台下,就感觉你们在同一个社区。当然不是这个社区居住的人们,也是可以进来逛一逛的。简书,也是如此。顺便提一句,选择简书,是喜欢它的写作体验。

不过,有时候,你想从头到尾自己建房子,就是搭建个自己的独立博客。如果你不知道如何选择,可以读一读《What are the best solutions for a personal blog?》(需翻墙),文章分析了不同博客平台的优缺点和针对人群。当然,我的选择是 Jekyll+Github Pages。

开辟土地、搭建、装修、到注册门牌号等,都是需要动手的。土地就是你的服务器,房子是你的网站,装修是网站主题,布局和色彩等等,当然门牌号就是你的域名了。别忘了你还要写文章,这才是关键,你房间里放的不是家具,而是你的思考成果。

话不多说了,我们开始建房子的美妙旅途吧 ;)


Step 1. 选地

互联网上有免费的地,也有收费的地。Github Pages就是一个免费好用的地。

具体步骤:

  • 首先,注册 Github 
  • 然后,建立一个仓库 

Repository name(仓库名)必须是 yourusername.github.io

比如,我的用户名是Yogayu,那么仓库名就取为 Yogayu.github.io。这一点很重要,不要弄错。

  • 最后,按照提示步骤操作 

一种简单的方式是,下载GitHub的桌面客户端,安装完成后,粘贴 http://github.com/yourusername/yourusername.github.io.git 克隆到本地。

  • 之后,新建一个index.html文件,push到对应的master 分支(推荐官网教程)。等一段时间之后(可以听首歌),网站生效,访问yourusername.github.io,就能看见完整的网页了。

到此,我们的地就选好了,也就是在用GitHub的服务器。

若这一过程中有问题,可以参照官网文档

1.1. 什么是 GitHub?

在说GitHub之前,必须要提到Git。Git是分布式版本控制系统。GitHub可以托管各种Git版本库,并提供一个web界面。

Github 就像是程序员们的Facebook,程序员们,写代码,做项目,在此和全世界的人们分享。 会使用GitHub的资源,比会搭建个人博客的价值大得多。

1.2.那么GitHub Pages是什么呢?

Website for you and your project.

GitHub Pages有两种。一种是为个人或者组织的博客。一种是为项目的博客。前者一个账号只能建一个,后者,可以建很多个。

这样的博客,免费、独立、安全。

1.3.1. Git和Github如何使用?

可选择终端或图形化界面操作。怎么顺手怎么来吧。


Step 2. 搭建

环境搭建。

  • 安装Ruby,Mac一般默认安装了Ruby,这一步可以忽略。官网安装
  • 安装Bundler,在Terminal中输入:  gem install bundler
  • 安装Jekyll,同理输入: source 'https://rubygems.org' gem 'github-pages' *当然,如果你在墙内,很容易出问题,无法安装,推荐修改镜像源(淘宝镜像源)。
  • 安装Jekyll gem install jekyll 在你希望存放的目录下,输入: jekyll new your-site-name 进入:  cd your-site-name 运行本地服务: jekyll s 在浏览器中输入: http://localhost:4000 就可以在本地进行查看和调试你的网站了。

2.1. 什么是Jekyll?

Jekyll is a simple, blog-aware, static site generator. Jekyll 是一个简单的博客形态的静态站点生产机器。

解释一下,Jekyll可以将纯文本转换为静态博客网站。你整个网站的页面都是它生成的,从主页index到文章post。 比如,文章怎么写?标准网页格式是扩展标记语言HTML。纯手写?未免太麻烦。大家,多偏爱Markdown。所以,就用它写。不过,你需要有一个能把你用Markdown格式写的文章,转化为HTML网页的东西,这里使用的就是静态网页生成器。

静态网页是相对于动态网页而言的,如果感兴趣可以自己学习。

2.2. Jekyll目录

解释一下整个jekyll的目录(官方文档): 为了之后不至于完全茫然,很值得先看一看,第一次看不懂没关系,用着用着就知道什么意思了。就像练习吉他和弦的转换,开始很难,可换着换着你就会了。

这个很奇怪的结构是,文件目录树,config.yml这样的代表一个文件,drafts这样的代表一个文件夹,与它连接的文件,比如begin-with-the-crazy-ideas.textile,就在文件夹中。一开始,我没怎么看官方文档,嫌麻烦,不如直接开始干。结果是绕了不少弯路,修改主题的时候,找半天各个部分。

先说需要了解的,其余以后依个人需求学习

  • _config.yml 是配置文件,你可以在里面配置你博客会用到的常量,比如博客名,邮件
  • _includes:就是你文章各个部分的html文件,可以在布局中包含这些文件
  • _layouts:存放模板。就是你网页的布局,主页布局,文章布局。当然不是指CSS那样的布局,是指,你包含哪些基本的内容到页面上。包含的内容就是includes里面的文件。
  • _posts: 存放博客文章
  • index:博客主页
  • CNAME文件:域名地址
  • CSS:存放博客所用CSS
  • JS: 存放博客所用JavaScript

可以设置每个html文件的title(标题)和layout(布局)。比如index的layout一般是default。你也可以添加其他的页面,加上不同的layout。

当你想定制博客的时候,以上目录就很有用了。

2.3. 如何发表文章?

文章的写法,在Markdown开头加上一段:

---
layout: posttitle: "Welcome to Jekyll!"
date: 2014-01-27 21:57:11
categories: Blog
---

文件命名格式: 时间加标题 比如:2015-08-15-HowTOBuildBlog.md

ok,你可以写文章了,放入_post文件夹即可。


Step 3. 装修

3.1. 如何选择和修改主题?

  • 一种方式是使用程序员们写好的,免费开源。

推荐两个超级丰富的资源 1. Jekyll 主题 2. Jekyll 主题搜集

  • 另一种是,你也可以自己写或修改,需要懂一些前端的知识。

之前,我在Codecademy上学了两、三天,进行入门。正好用自己的博客,来做练习。 其实前端还蛮好玩的,特别满足强迫症的强迫意愿。

推荐资源: - 基础学习:Codecademy - 框架: Bootstrap

虽然下了dreamweaver, 没怎么用,不过官网上的教程不错。 推荐使用 Sublime Text, 多么好用的代码编辑器啊,还有一个不错的教程。再配上Jekyll的本地服务器,在Cheome上调试。那感觉~

自己写是好,也要看看别人是如何做的,优秀的网站是如何设计的。文章可以注重注重排版,字体选择,屏幕适配调整等。不过说实在的,个人博客最重要的还是你的文章内容。


Step 4. 定制

如果你已经做到了这一步,那么恭喜你,你的个人博客已经搭建完成。不过要享受折腾的快乐,或想要更好的独特性,就继续进行吧。

4.1. 如何使用独立域名?

  • 购买域名 著名的有 Godaddy,支持支付宝。在网上可以搜到优惠码。

  • 在你本地网站文件夹中添加一个文件 CNAME,写入你的域名即可。

  • 考虑到我国网络特殊情况,进行域名解析,可以选择dnspad 添加两条A记录(教程),对,计算就是机网络课上学的A记录。在你的Godaddy上看你买的域名,就能找到,两条A记录。

买域名这事,我自己还有点经历。一开始我买了个azureyu.cn的域名,cn是国内的,然后让提交身份证信息,输入各种资料。又要进行网站备份,一大推看不懂的备份名词,最后放弃了。买了个国外的域名azureyu.com,没有了以上复杂环节,马上就可以用了。

4.2. 如何添加评论功能?

这些平时习以为常的东西,到这都是纯手工制造。 我使用的是Disqus

  • 注册Disqus
  • 在博客中添加,就会自动获得它为你生成的一段代码,复制它

  • 新建一个名为Comments的html文件,复制进去这段代码,保存到文件夹includes里去。然后在layouts的post文件里加入:

其实,就是在你的网页中加入一段代码,加载之后在网页中加入Disqus,就会自动获得它为你生成的一段代码。

要还想添加一些feather就去折腾吧。比如分享、文章目录、代码高亮、标签云、搜索等等。我想到现在,学习这些内容,对你已经很简单了。


最后

个人建议:

  • 多看官方文档,系统清晰很多
  • 利用好而不是滥用搜索引擎
  • 遇见问题,先看看他人如何解决

用一句作为结束:

不要忘记初衷,在折腾之后,表达写作,才是最重要的事情。


参考:

  1. http://www.ruanyifeng.com/blog/2012/08/bloggingwithjekyll.html
  2. http://beiyuu.com/github-pages/
  3. http://daringfireball.net/projects/markdown/
  4. http://stevelosh.com/
  5. http://jekyllbootstrap.com/
  6. http://gaohaoyang.github.io
  7. http://segmentfault.com/a/1190000000406013
  8. http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html

使用jekyll在GitHub Pages上搭建个人博客【转】的更多相关文章

  1. 利用Octopress在github pages上搭建个人博客

    利用Octopress在github pages上搭建个人博客 SEP 29TH, 2013 在GitHub Pages上用Octopress搭建博客,需要安装ruby环境.git环境等.本人在Fed ...

  2. 使用Jekyll + GitHub Pages免费搭建个人博客

    使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...

  3. 让搭建在 Github Pages 上的 Hexo 博客可以被 Google 搜索到

    title: 让搭建在Github Pages上的Hexo博客可以被Google搜索到 date: 2019-05-30 23:35:44 tags: 配置 --- 准备工作 搭建好的博客 npm & ...

  4. GitHub Pages + Hexo搭建个人博客网站-github风格-采坑记录

    目录 1.本机安装nodejs 2.github上创建仓库 3.安装hexo 4.hexo主题 5.配置主题 6.添加文章 7.使用分类和标签 8.增加文章目录 9.推送github 使用github ...

  5. 使用Hexo和Github Pages快速搭建个人博客

    在编程路上,每天都在网上查看别人的博客,大牛的文章写得通俗易懂,同时博客网站也非常华丽.作为出入编程的一枚小白也想拥有这样一个自己的网站.那就立马去买一个域名了,在网上找教程来搭建. 搭建的过程还算比 ...

  6. Github Pages+Gridea搭建个人博客

    1 概述 Github Pages可以用来托管个人网站,静态的,便于用来实现博客,可以在一个仓库的settings中开启: Gridea是一个静态博客写作客户端,所有文件都在本地,没有数据库,实现简单 ...

  7. 在github上搭建个人博客并在线更新

    换博客比更博还勤的我终于决定写一篇博客搭建教程了.. FAQ Q:\(hexo\)需要本地编译.\(jekyll\)虽然可以直接上传\(md\)..但是如果在github上直接编译也太难受了叭,毕竟不 ...

  8. 如何使用 GitHub Pages 维护自己的博客

    目录 前置知识 实际操作 声明 本文地址:如何使用 GitHub Pages 维护自己的博客 前置知识 首先,你应该知道如何用 Hexo 在本地搭建一个博客系统,具体见 Hexo. 其次,我们如果想使 ...

  9. hexo在git上搭建个人博客

    公司实习第一天接到的任务是:搭建一个基于Nodejs的开源项目的开发环境,接到任务时以为不是很困难,后来才知道该项目已于去年被废弃,搭配环境的时候遇到了不少问题,折腾了两天还是没有最终完成... 不过 ...

随机推荐

  1. HTML5学习总结

    一.HTML5概念 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列新 ...

  2. 【MongoDB】MongoDB 3.2 SCRAM-SHA-1验证方式

    新版本已取消addUser方法,改使用createUser方法 官方地址:https://docs.mongodb.com/manual/tutorial/create-users/ 官方地址:htt ...

  3. CString转string

    如题,找了半天... //CString转string USES_CONVERSION; CString temp; temp = _T("kjdsaflkjdlfkj"); ch ...

  4. jq封装的tab切换

    function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...

  5. EUI List列表实现人物列表

    一  Scroll+List ,拖动组件到exml. List不能写定高度,不然无法自动扩展.  二 新建List条目皮肤, ListItemSkin皮肤 名字Label的文本{data.name} ...

  6. 7.openssl enc

    对称加密工具.了解对称加密的原理后就很简单了. [root@xuexi tmp]# man enc NAME enc - symmetric cipher routines SYNOPSIS open ...

  7. 日志处理之logging模块

    日志级别: 'CRITICAL': CRITICAL, 'ERROR': ERROR, 'WARN': WARNING, 'WARNING': WARNING, 'INFO': INFO, 'DEBU ...

  8. web初学之JavaBean

    JavaBean 1.javaBean类:特殊的java类,以封装和重用为目的.通常JavaBean与Jsp搭配使用构成JavaBean技术. (1)JavaBean的规范: ●JavaBean是个公 ...

  9. 9.5.8 Optimizing InnoDB Disk I/O

    如果你数据库设计以及sq操作都是最佳实践,但是你数据库仍然被较重的io活动拖累的较慢,那么试一试看看top或者windows的任务管理器,cpu使用率和工作量低于70%,那么或许是您的硬盘较慢. 1 ...

  10. ASP.NET之Cookie(坑爹的Response.Cookies.Remove)(转)

      在web开发中Cookie是必不可少的 .NET自然也有一个强大的Cookie操作类,我们用起来也非常方便,不过在使用中我们会发现一个坑爹的事情Response.Cookies.Remove删除不 ...