Github pages和Jekyll搭建

前言

最近才发现Github原来也可以支持博客的搭建,利用Jekyll这个静态网站生成器,可以很快搭建一个博客来记录自己开发学习生活的一些知识点和经验。之前的WordPress用的不怎么顺手,一台服务器既要搭建博客,又要玩些其他小应用还是不怎么方便,所以既然有了这个免费的技术分享区还是可以好好利用的。

Step 1.Github选址

GitHub是拿来干什么的就不多说了,GitHub Pages(Website for you and your project.),这就是我们所需要搭建的博客了,通过Git方式对博客进行管理,这种方式免费,安全,快捷。

  • 新建repository名为username.github.io,username为你github的用户名。那么他的master分支上的文件就能在username.github.io的根目录访问到。
  • 创建仓库后,进入Setting,拉动滚动条至GitHub Pages那一栏,点击Automatic page generator.
  • 进入创建用户页面,可以自己编辑,也可以从readme加载。
  • 点击continue to layout,继续选择主题。选好后点击PUBLISH,发布,整个技术博客站点的CSS,HTML和IMG都会导入到你的仓库中。
  • 最后在浏览器中输入username.github.io就可以进入到你的博客主页中了。
    ps.觉得域名丑的,或者不想用这个域名的,可以花钱买个域名或者把自己已经买的域名映射过去。在仓库根路径下创建一个名为”CNAME”的文件,注意没有后缀。文件中填入你所要指向的域名。这样访问 http://username.github.io 时浏览器就接收到重定向指令,跳转到CNAME里面指定的域名去了。接着还需要到你域名的服务商那里修改域名的记录,通过在终端输入ping username.github.io可以获得博客的ip,添加”www”和”@”两条记录,这样就完成修改域名了。

    Git教程-廖雪峰
    Git使用教程图文详解

Step 2.本地环境搭建

这一步不是必须的,但是强烈建议完成。这样,在博客发布之前方便调试检验一下。

  • 首先更新本机上的ruby。
    • 安装RVM
      • $ curl -L get.rvm.io | bash -s stable
      • $ source ~/.bashrc
      • $ source ~/.bash_profile
      • 测试安装是否正常rvm -v
    • 用RVM升级Ruby
      • 查看当前ruby版本$ ruby -v
      • 列出已知的ruby版本$ rvm list known
      • 安装最新版本ruby$ rvm install x.x.x
      • 查看当前ruby版本$ ruby -v
  • 安装Bundle
    • $ gem install bundle
    • 在根目录下创建一个叫Gemfile的文件,注意没有后缀
    • 在Gemfile文件中输入
      source 'https://gems.ruby-china.org//'
      gem 'github-pages'
    • 保存后,在命令行中执行$ bundle install
    • $ bundle update
    • 启动转化和本地服务 $ bundle exec jekyll serve
  • 安装Jekyll

Step 3.Jekyll

  • Jekyll目录
    • _config.yml 是配置文件,你可以在里面配置你博客会用到的常量,比如博客名,邮件
    • _includes:就是你文章各个部分的html文件,可以在布局中包含这些文件
    • _layouts:存放模板。就是你网页的布局,主页布局,文章布局。当然不是指CSS那样的布局,是指,你包含哪些基本的内容到页面上。包含的内容就是includes里面的文件。
    • _posts: 存放博客文章
    • index:博客主页
    • CNAME文件:域名地址
    • CSS:存放博客所用CSS
    • JS: 存放博客所用JavaScript
  • 如何发表文章
    • 文章的写法,在Markdown开头加上一段:
---
layout: posttitle: "Welcome to Jekyll!"
date: 2014-01-27 21:57:11
categories: Blog
---

文件命名格式: 时间加标题 比如:2015-08-15-HowTOBuildBlog.md
ok,你可以写文章了,放入_post文件夹即可。

  • 修改主题
    • 学习学习前端,并且研究下Jekyll官网,自己修改。或者fork别人在github写好的模板进行修改

Step 4.同步本地和GitHub博客文件

使用git命令或者用图形化客户端直接进行文件同步,方法简单不详述。

Step 5.Markdown

使用这种语法写文件简单的多了,附上markdown语法和心得

参考网址:
http://www.jianshu.com/p/9a6bc31d329d
https://zhuanlan.zhihu.com/p/21333968

Step 6.代码高亮

代码:
2017022454565java_highlight.png

在文中使用效果:

1
2
3
4
5
public void hello(){
int a = 0;
int b = 1;
int c = a + b;
}

Step 7.MarkDown解析器

现在github推荐kramdown作为markdown解析器。其解析速度很快比PHP markdown和Maruku都要快几倍。kramdown有很多一般markdown所没有的语法特点,包括和GFM也有差异。另外也可以很方便地作为文件转换使用。
kramdown和markdown较大的差异比较

Step 8.生成目录

没有目录还是一件很苦恼的事情。特别是长篇博客,所以去查了markdown如何生成目录,在此更新一下。
kramdown默认是支持TOC。在_config.yml中的配置方式为:

1
2
3
markdown: kramdown
kramdown:
input: GFM

在编写文章时,插入下面代码,渲染之后就可以生成TOC了:

2017022426562屏幕快照 2017-02-24 14.48.52.png

Step 9.插入数学公式

/source/_includes/head.html中将下面的代码插入<head></head>标签之间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

接着使用LaTeX表达式进行编辑。