“授人以渔”的驱动而多建筑私房独立博客

“授人以渔”般叫你长建筑私房独立博客
——使用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
就比如是程序员们的Facebook,程序员们,写代码,做项目,在此与中外的众人享受。
会面使用GitHub的资源,比会搭建个人博客的价十分得几近。

1.2.那GitHub Pages是什么为?

Website for you and your project.

GitHub
Pages有点儿种植。一种是啊个体或者组织的博客。一种植是也项目的博客。前者一个账号只能打一个,后者,可以建造多单。
如此这般的博客,免费、独立、安全。

1.3. Git以及Github如何使用?

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

  • Git简易指南
  • Git教程-廖雪峰
  • 争运用GitHub
    -知乎
  • 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。所以,就因故它们形容。不过,你需要有一个能将你用Markdown格式写的稿子,转化为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. 怎么样发表文章?

章的写法,在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
    主题征集

  3. 任何一样栽是,你吗可以协调写或改动,需要懂得一些前端的学识。

之前,我在Codecademy读书了点滴、三天,进行入门。正好用好之博客,来开练习。
其实前端还颇好玩的,特别满足强迫症的逼迫意愿。

推荐资源:

  • 基础学习:Codecademy
  • 框架:
    Bootstrap

虽下了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. 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

相关文章