Bootstrap“授人以渔”的教您搭建私房独立博客

“授人以渔”般教你搭建私房单独博客
——使用jekyll在GitHub Pages上搭建私房博客

网上有很多资源,但大多是“授人以鱼”,文中一步一步的告知您如何是好,却从未解释为啥,以及他是怎样掌握的。他们默许着你理解各样专业名词的意思,默许着您左右着一定技能。你折腾半天,查资料,看教程,一步步下去,有进行不下去的地点,再去查其余人的做法,最后也树立起了和睦的独自博客。但却,恍然不知,你用到的技艺是何等意义。

我认为,初学者,要想在一个项目中,切实加强协调,需求活动活学。蒙受一个专业名词,就去搞懂它,而不是差三错四混过去。一个技能点、一个技艺点的占领,然后将点系统的连起来,形成自己的学问网络,不断去细化和壮大。所以,那篇文中,尽力的在“授人以渔”。读者边看边实践之后,一方面,可以搭建好和谐的单身博客;另一方面,会学到涉及的学问。前者是实际拔取,是至顶向下的过程;后者是基础知识,是自底向上的进度。至底向上与至顶向下相结合,才能融会贯通。我希望在文中表述的,或者说希望读者接受到的,也就是融会贯通的就学能力。

目录

引子

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. 怎么样挑选和改动大旨?

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

    GitHub.jpg

  • 然后,建立一个库房

NewRespsitory.png

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

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

  • 末尾,依照提醒步骤操作
QuickStep.png

一种简单的艺术是,下载GitHub的桌面客户端,安装到位后,粘贴
http://github.com/your\_user\_name/your\_user\_name.github.io.git
克隆到地头。

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

    firstIndex.png

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

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

1.1. 什么是 GitHub?

在说GitHub从前,必必要涉及Git。Git是分布式版本控制系统。GitHub可以托管各样Git版本库,并提供一个web界面。
Github
就好像程序员们的非死不可,程序员们,写代码,做项目,在此和满世界的人们享受。
会动用GitHub的资源,比会搭建个人博客的价值大得多。

1.2.那么GitHub Pages是何等吧?

Website for you and your project.

GitHub
Pages有三种。一种是为私家仍旧社团的博客。一种是为项目标博客。前者一个账号只好建一个,后者,可以建很三个。
这么的博客,免费、独立、安全。

1.3. Git和Github怎么样使用?

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


Step 2. 搭建

条件搭建。

  • 安装Ruby,Mac一般默许安装了Ruby,这一步可以忽略。官网安装
  • 安装Bundler,在Terminal中输入:
    gem install bundler
  • 安装Jekyll,同理输入:
    gem 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.png

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

静态网页是相对于动态网页而言的,若是感兴趣可以友善上学。

2.2. Jekyll目录

解释一下整个jekyll的目录(法定文档):
为了将来不至于完全未知,很值得先看一看,第五次看不懂没提到,用着用着就领会如何意思了。就好像训练吉他和弦的转移,开首很难,可换着换着您就会了。

struct.png

以此很想获得的协会是,文件目录树,_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. 怎么着公布作品?

作品的写法,在马克(Mark)down先导加上一段:

---
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学习了两、四日,举办入门。正好用自己的博客,来做练习。
实际上前端还蛮有意思的,越发知足偏执性精神障碍的逼迫意愿。

引进资源:

虽说下了dreamweaver,
没怎么用,不过官网上的教程是的。
推荐使用 Sublime
Text
,
多么好用的代码编辑器啊,还有一个正确的教程。再配上Jekyll的当地服务器,在Chrome上调节。那感觉~

自己写是好,也要看看人家是哪些做的,优异的网站是什么样统筹的。文章可以器重强调排版,字体拔取,屏幕适配调整等。但是说其实的,个人博客最主要的要么你的小说内容。


Step 4. 定制

若是你曾经到位了这一步,那么恭喜你,你的个人博客已经搭建完结。但是要分享折腾的欢乐,或想要更好的独特性,就继续举办呢。

4.1. 什么样使用独立域名?

  • 购买域名 闻明的有
    Godaddy,接济支付宝。在网上能够搜到让利码。

godaddy.png

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

  • 设想到我国网络越发情状,进行域名解析,可以选取Dnspod
    添加两条A记录(教程),对,就是电脑网络课上学的A纪录。在您的Godaddy上看您买的域名,就能找到,两条A记录。

AA.png

买域名那事,我要好还有点经历。一初阶自我买了个azureyu.cn的域名,cn是国内的,然后让提交身份证音信,输入种种材料。又要举办网站备份,一大推看不懂的备份名词,最终废弃了。买了个国外的域名azureyu.com,没有了上述复杂环节,立时就可以用了。

4.2. 拉长评论

这么些日常习惯的事物,到那都是纯手工创立。
本人使用的是Disqus

Disqus.png

  • 注册Disqus
  • 在博客中加上,就会自行获得它为您转移的一段代码,复制它
add.png

comment.png

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

addcmt.png

骨子里,就是在您的网页中投入一段代码,加载之后在网页中参预Disqus,就会自动获取它为您转移的一段代码。

要还想添加一些feature就去折腾啊。比如分享、文章目录、代码高亮、标签云、搜索等等。我想到现在,学习那个情节,对您已经很粗略了。


最后

村办提议:

  • 多看官方文档,系统清晰很多
  • 行使好而不是滥用搜索引擎
  • 欣逢问题,先看看别人怎么着化解

用一句作为完毕:

毫无遗忘初衷,在折磨之后,表达写作,才是最重点的业务。


参考:

  1. http://www.ruanyifeng.com/blog/2012/08/blogging\_with\_jekyll.html
  2. http://beiyuu.com/github-pages/
  3. http://daringfireball.net/projects/markdown/
  4. http://stevelosh.com/
  5. Bootstrap,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
  9. http://jekyllbootstrap.com/usage/jekyll-quick-start.html\#toc\_0

作者「AzureYu
小说宣称:自由转发-非商用-非衍生-保持署名 | BY-NC-SA

相关文章