Mac下使用Jekyll和github搭建个人博客

0 链接

http://alex-my.xyz/web/Mac下使用Jekyll和github搭建个人博客

1 安装ruby

mac自带, 没有则使用brew安装

brew install ruby

2 安装gem

我机子上也是自带的, 或许曾经安装过。没有gem的参考以下网站:

https://rubygems.org/pages/download

如果安装好了gem, 建议更换为国内的源

# 查看源列表
gem sources -l
# 将源移除
gem sources --remove https://rubygems.org/
# 添加国内源
gem sources --add https://gems.ruby-china.org/
# 缓存
gem sources -u 

输入gem –version查看版本号。对比下官网的版本。可以使用以下命令更新

sudo gem install --system

3 安装jekyll

sudo gem install jekyll

4 安装博客

首先需要安装bundler

sudo gem install bundler

否则会报错:

Dependency Error: Yikes! It looks like you don't have bundler or one of its dependencies installed

我还装了以下这些

sudo gem install jekyll-paginate
sudo gem install jekyll-gist

创建博客,如果没有找到jekyll命令，请重启终端。

sudo jekyll new alexblog

安装过程会显示一堆安装的内容，最后一行:

New jekyll site installed in /Users/alex/Blog/alexblog. 

5 本地启动博客

进入到安装目录

cd alexblog
jekyll serve

输出:

  /Users/alex/Blog/alexblog jekyll serve
Configuration file: /Users/alex/Blog/alexblog/_config.yml
Configuration file: /Users/alex/Blog/alexblog/_config.yml
            Source: /Users/alex/Blog/alexblog
       Destination: /Users/alex/Blog/alexblog/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.554 seconds.
 Auto-regeneration: enabled for '/Users/alex/Blog/alexblog'
Configuration file: /Users/alex/Blog/alexblog/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

将http://127.0.0.1:4000复制到浏览器打开，就可以看见了。

(add 2017.3.1)
后来运行 jekyll serve的时候报错:

xxx uninitialized constant Bundler::Plugin::API::Source xxx

可以通过以下命令解决:

gem update --system
gem install bundler

在执行gem install bundler的时候又报错了。查看了下, /usr/bin/bunder不存在, 而是存在/usr/local/bin/bunder
所以，用以下代码代替:

sudo gem install -n /usr/local/bin bundle

然后就正常了。

6 部署到github

我的用户名为alex-my，要按照username.github.io创建一个仓库
所以，我建立了一个alex-my.github.io的仓库
得到地址

https://github.com/alex-my/alex-my.github.io.git

进入到本地, 将本地的内容和github尚的仓库关联

cd alexblog
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/alex-my/alex-my.github.io.git
git push -u origin master

注意替换为你自己的地址,在执行git push的时候，需要你输入github的账号和密码。
这个时候在浏览器上输入: ，就可以看见博客了。

7 添加文章

文章都放在_posts目录下面，按照格式年-月-日-文章名.markdown

在_posts下建立文件:

2017-02-22-test.markdown

文件开头需要参照默认的那篇:

---
layout: post
title:  "Welcome to Jekyll!"
date:   2017-02-22 09:56:49 +0800
categories: jekyll update
---

• title: 文章标题
• date: 显示日期
• categories: 标签分类
  文章完整内容如下:

---
layout: post
title:  "First Test"
date:   2017-02-22 09:56:49 +0800
categories: test
---

这是第一篇文章，测试用。

使用命令推送,我是使用PhpStorm这个IDE的。

git add _post/2017-02-22-test.markdown
git commit -m "add test file"
git push origin master

浏览器输入alex-my.github.io，就可以看见这篇文章了。

8 使用主题

参见https://github.com/alex-my/alex-my.github.io
或者输入域名 alex-my.xyz，也就是本博客所在。
本博客使用插件来分类categories和tags，但是，github出于安全的考虑，会禁止插件运行。
这也就是网上很多人提到的，本地运行好好的，一旦推送到github后，就显示404。

为了解决这个问题，本博客仓库用了master和source两个分支。主分支master存放执行jekyll build后_site目录下的内容。source分支存放平常开发，撰写文章所用。
具体可以查看source分支下的makefile文件。

本主题将文章中的categories当做是导航栏目

// 文章会出现在linux栏目下
categories: linux
// 文章会同时出现在database,linux栏目下
categories: [database,linux]    

将文章中的tags当做是language的下拉菜单

// 文章会出现在language/C++菜单下
tags: C++

也可以混合一起

// 文章既会出现在web,mac栏目下，也会出现在language/PHP菜单中
categories: [web, mac]
tags: PHP

以上设置可以参看 _includes/nav.html 中的设置。

9 绑定域名

在终端输入:

ping alex-my.github.io

得到ip地址:

PING github.map.fastly.net (151.101.100.133): 56 data bytes

打开域名供应商的控制台, 我这边在万网申请的xyz域名。
添加解析, 添加两条A记录:

记录类型    主机记录    解析线路(运营商)   记录值 
A           @           默认              151.101.100.133
A           www         默认              151.101.100.133

记录值填写刚才获得的ip地址。
在博客根目录添加CNAME文件,并将你的域名写入:

cd alexblog
echo "alex-my.xyz" > CNAME

将CNAME提交。待域名解析完成，就可以了。万网这边1分钟解析时间。

10 About

alex-my.xyz

blog.csdn.net/alex-my