转载:傻瓜都可以利用github pages建博客

傻瓜都可以利用github pages建博客

原文出处:http://cyzus.github.io/

1.前言
鉴于我自身建站经历,不熟悉各种编码语言,口袋里没有多少钱,却殷切希望拥有一个独立的个人博客,在翻阅了各种教程后,看完各种眼花缭乱的代码后,终于将这个网站在github pages上搞出来了。在此,我不希望大家都重蹈覆辙,为了方便大家,我在此为大家做一个傻瓜教程
2.了解github
说了那么多,首先得了解一下什么是github,GitHub是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目(引自维基百科)。说白了github就是开发者的百度云(有人说是Facebook),用来存储或者共享自己写的代码,非常便利,是近年来很火爆的一个网站服务。
3.为什么选择github?
能看到我的这篇文章的道友应该都知道,为什么我们要在github上建站?
github有一个很有爱的项目,叫做github pages,这个项目是给开发者建立一个私人页面,上面用来分享新颖的想法和自己写的代码,而且最主要的是,这个是免费而且没有空间流量限制的。这也就是我为什么放弃了自由度很高的,却需要支付高昂的主机费的wordpress,而转投了github pages阵营。
那么废话少说,开始我们的教程吧
4.注册github账号
打开https://github.com/站点,注册一个账号
img
拿到了这个账号你就可以做两件事啦
建立咱们的博客
托管自己写的代码

我们今天主要讨论的当然还是建立博客~
5.完成注册
注册完后别急着关掉页面,先选择free来明确你老子就是冲着免费来的态度,然后甭管别的,直接点击下面绿色的Finish sign up
img
接着,到你的邮箱验证账号,这样你才能之后生成你的个人主页
6.创建仓库
接下来到这个页面去创建一个新仓库https://github.com/new
这个新仓库就将是存放你即将拥有的博客的地方
注意,你的仓库名不能随便取,这样会导致github混乱,取名的格式应该为“用户名.github.io
后面的操作照配图做就可以了
img
7.进入仓库设置
建完仓库后,在当前页面右边选择Settings,进入设置页面,在这里生成你的github pages
img
8.自动生成博客
在设置页面往下拉,在github pages那一栏点击“launch automatic page generator
img
9.编辑用户界面
到这一步,其实是让你编辑你的页面上所展示的信息,如果你就只想有这一面的话,你就可以开始编辑了
title是页面的标题tagline是页面宣传词(这么理解吧)body就是正文了
img
记住编辑是用markdown语言,如果你编辑完了(如果你要想有我这样的有很多页面的博客事实上根本不用管它),直接点下面的绿色按钮,“continue to layouts
img
10.公布页面
这一步对于只要一个展示页面的同学来说,应该算是终结了,选择一个喜欢的主题模板,然后点击“Publish page”,你的页面就公布出来了!
img
如果还想继续做博客,那就继续看吧。
11.预览页面
在继续教程前,你可以先预览一下你的页面,但实际你最后做出的效果会和这个比起来好几百倍,但你可以先确认一下能不能显示出页面来
12.下载安装github
下载属于你的系统的github,并安装
Windows:https://windows.github.com/
Mac: https://mac.github.com/
我之后就用Windows示范了
13.克隆你的仓库
登录你的账号,在左上角点击“+”,然后选择“clone”,点击存放你博客的仓库,把它克隆到本地,并选择存放克隆文件位置,一般默认就好
img
默认的位置在我的文档下的github文件夹里
14.选择主题框架
这时候,你就该真正考虑一下你的博客主题风格了,如果你前端开发的功底不好,就不建议频繁更换主题了,虽然要改也不是不行,只是要折腾就是了
到这个网站选择你喜欢的模板http://jekyllthemes.org/
img
我就以这套模板为范例来进行教程,因为这个极其精简,可塑性(后期更改性)极强,推荐一下http://jekyllthemes.org/themes/cool-concise-high-end/
img
点击“downlod”,把它下载下来吧
15.应用主题
打开存放你克隆下来仓库的文件夹,把里面的文件全部都删了(没错),除了隐藏文件夹“.git”不要删就好了,然后把模板里的东西全部拖到你的原博客仓库里
img
16.配置博客
我先简单介绍一下这个仓库里的内容,你根据自身需要用文本编辑器来修改内容
img
index.html:这是你博客的主页面,里面的内容就是你的主页了

_config.yml:这是你博客的基本配置文件,里面有你博客的名字,以及存放博主的一些基本信息

_layouts:这文件夹里面存放你每个页面的设计,一般有default.html(默认页面)和posts.html(博文页面)

_includes:这个文件夹里的的内容将会通用到你博客每个页面,起到一种便利的作用

_posts:这里面装的就是你的博文啦,记住,要用markdown语法写,要不上传会失败的。

那么以上就是一个Jekyll规范的博客的基本内容了,想想也不难吧
17.上传到github
现在你已经把博客基本配置完成了,那么就该把它上传到github公布吧
打开github软件,你会发现changes那栏多了数字,这就是你本地文件发生改变数目的情况,在“summary”随便写串东西记录一下,然后按“commit to master”,等“Sync”出现数字后,你就戳那里同步到github吧!
img
img
18.后记
稍等一会儿,打开你的网站,就会发现你的博客已经神奇的出现了,比如我的:http://cyzfiles.github.io/
那么教程到这儿也差不多完了,之后你可以在_posts 文件夹里继续撰写博文,然后按照第17步 上传到github即可