怎样免费个人博客搭建(github pages)入门篇
2017-02-06| 程成| 1398| 0| 其他

最近我自己用github pages搭建了自己的免费博客,效果页面地址:https://buymobile.github.io/(可以绑定自己的域名)

 


看了一篇文章(鸡汤),感觉还不错,就想自己搭建一个个人博客。地址:https://zhuanlan.zhihu.com/p/19743861?columnSlug=cnfeat

 


后台百度看到github提供博客功能,还是免费的,就自己搭建了一个博客原型。下面是搭建步骤:

 

 

jekyll是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如Disqus。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。

 


因为Jekyll是基于Ruby写的,所以首先安装Ruby环境,和Ruby包管理工具gem

 

1、安装ruby

 

安装成功示例:


$ ruby -v
ruby 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32]

 

2. 安装RubyGems

 

(1)使用gem安装jekyll

 


打开cmd命令行程序,输入以下命令:


$ gem install jekyll

 


所有Jekyll的gem依赖包都会被自动安装。

 

注:

 

1、ruby.taobao.com已经不再维护,可以使用https://gems.ruby-china.org/,找了好久当时。。

 

2、一般会报错,cannot find bundler,自己安装下gem install bundler即可。少什么装什么,我当时装了4个插件

 

 

(2)使用jekyll创建博客站点

 

先进入你想创建博客的目录下,比如我要在D盘创建一个博客,就在命令行输入:


cd d:

 

然后输入创建博客的命令:

 

jekyll new blog 
# 创建一个新的站点

 


控制台可以看见(创建的地址有所不同)New jekyll site installed in D:/blog. 的提示。

 

 

(3)开启jekyll内置服务器


 

cd blog# 一定要进入创建的对应blog目录,否则服务无法开启$ jekyll serve# 
启动一个地址为的服务器


Jekyll服务器默认端口是4000,所以打开浏览器输入:http://localhost:4000 就可以看到生成的博客页面。




author


(4)jekyll结构解读

 


我们进入刚生成的Blog目录,可以看到Jekyll的结构如下:



blog
	.sass-cache
	_includes
		footer.html
		head.html
		header.html
		icon-github.html
		icon-github.svg
		icon-twitter.html
		icon-twitter.svg
	_layouts
		default.html
		page.html
		post.html
	_posts
		2016-06-26-welcome-to-jekyll.markdown
	_sass
	_site
	css
			main.scss
	.gitignore
	_config.yml
	about.md
	feed.xml
	index.html

 

.sass-cache

sass的编译缓存文件。

_include

网页模块包含文件。可以方便的把这些文件加载到你的布局或者文章中,进行重用。他们都代表了最终生成的网页中的一部分。可以用这个标签:

 


author



来把_include 目录下的文件file.ext包含进来。

_layouts

存放包裹在网页外部的模板。为网站所有网页提供一个基本模板。每个网页只需关注自己的内容。例如 default.html 文件:




author





这个文件中包含的就是所有网页文件所共有的东西,每个页面的内容会被填充下面这行代码中:





author




在需要使用这个模板的页面中,用YAML头信息进行引用:




author





图中 index.html 文件的头部:




---layout: default---

 


作用是通过 layout 告诉Jekyll生成 index.html 时,要在_layouts 目录下找 default.html 文件,然后把当前文件解析后添加到 default.html 的content 的部分,组成最终的 index.html 文件。


在我们写的markdown文档中也要设置YAML头信息,如我的这篇博文的头信息:



---layout: post
title:  "Jekyll和Github搭建个人静态博客"
date:   2016/6/26 13:03:42
categories: original---



layout表示使用post布局,title 是文章标题,date是自动生成的日期,categories 是该文章生成html文件后的存放目录,也就是文章的分类属性。可以在_site/original下找到。(category 只能添加一个分类属性, categories 可以添加多个分类属性。各属性使用空格隔开)

因为文章套用的是post模板,所以title会传入 post.html 文件中的Jekyll和Github搭建个人静态博客中,成为最终 index.html 页面中的文章列表标题:





author




而 post.html 又套用了default.html 模板,而default页面中的头部又由 head.html 构成:



<head></head>


head页面中的title属性:


<title>Jekyll和Github搭建个人静态博客</title>



就可以读取到这篇博文中的title并且设置在最终 index.html 文件中。

_posts

这个目录存放的就是我们所有的博文了。文件名字格式很重要,必须使用统一的格式:



YEAR-MONTH-DAY-title.MARKUP


 

例如,2016-06-26-MakeBlog.md,写成这样文件名才会被解析。

index.html 文件中:



<span class="post-meta"></span>



post.date的值就由统一格式的文件名中的日期而来。

_sass

存放网站用到的sass文件。

_site

一旦Jekyll解析完整个网站,就会将最终的静态网站源代码放在这里(默认)。最好将这个目录放进你的.gitignore文件中。

_ plugins

虽然Jekyll默认没有生成这个文件夹,但你自己可以在根目录下创建这样一个文件夹来存放插件。这里就不详细展开插件的用法了。

_config.yml

Jekyll的配置文件,决定了如何解析网站的源代码,详细配置信息可以看这里。

> 使用Jekyll写博文

可以使用你喜欢的任何一个markdown编辑器,保存为规定格式(年是4位数字,月和日都是2位数字。MARKUP扩展名代表了这篇文章 是用什么格式写的。)的文件名:



YEAR-MONTH-DAY-title.MARKUP


 

在文章头部添加YAML头信息(YAML front- matter):



---layout: post
title:  "Jekyll和Github搭建个人静态博客"
date:   2016/6/26 13:03:42
categories: original---


 

写上你的内容,保存在_posts目录里即可。

然后刷新浏览器,如果页面没有变化就需要通过Jekyll build去重新生成页面:



jekyll build

 


如果一开始启动服务时使用的是:



jekyll serve --watch



那么直接刷新浏览器就行,Jekyll监视到有更新会自动重新生成网站。


如果要添加文章摘要,并且显示在上面 index.html 中,可以在YAML头信息中添加一行(这里标记我们暂用~~~,你也可以换成任何你喜欢的):



excerpt_separator: ~~~



头信息变为:



---layout: post
title:  "Jekyll和Github搭建个人静态博客"
date:   2016/6/26 13:03:42
categories: original
excerpt_separator: ~~~---



Jekyll会自动取每篇文章从开头到第一次出现 excerpt_separator 也就是 ~~~ 的地方作为文章的摘要,并将此内容保存到变量 post.excerpt 中。

因为要显示在 index.html 的文章列表上:




author



所以需要在h2标签后再添加:



author



文章列表代码变为:



author

 


 

这样,文章摘要就被添加到了文章列表上。


本地搭建Jekyll和写文章的所有过程大致就是这些了。如有更多疑问到Jekyll官网和Jekyll中文网查阅详细资料。

 


4、使用github pages创建个人博客

 


大致步骤为

1.创建github账号

2.创建库

3.用git bash导到本地(自行安装git)

4.上传文件

 

 

 

注:error: src refspec master does not match any解决办法

http://www.jianshu.com/p/8d26730386f3


如果需要安装github for windows软件,下载离线版,因为被墙


 

×
作者:程成
QQ:492245711