用Jekyll搭建个人的Blog

第一篇blog –纪念搭建我的个人Blog

前段时间，我的一个室友提起搭建个人的blog，当时没太在意。偶然间在浏览简书的时候，看见了一篇文章勾起了我的兴趣。然后就开始鼓捣起来，期间也遇到一些坑。现在开始进入正题：

第一步先搭建本地Jekyll

Jekyll是什么？上文给的链接中讲得很清楚，是一个生成静态Blog的简易工具，支持markdown语法，支持自定义样式等。

1、先安装rubyGems：
//因为之前安装的rubyGems是taobao，由于原作者不维护了，所以就换了一个ruby-china(如果已经是了，先更新一下)

$ gem sources --add https://gems.ruby-china.org/ --remove https://ruby.taobao.org /
$ gem sources -l
https://gems.ruby-china.org

// 确保只有 gems.ruby-china.org

2、使用gem安装Jekyll 
//由于用的是mac，所以直接打开终端输入下面指令

 gem install jekyll

但是提示安装jekyll的一系列依赖工具，所以又挨个安装了jekyll的依赖，但是在安装中出现类似的错误/usr/bin 的“Operation not permitted”，所以就在网上找到了解决办法。按照文章里的操作，顺利解决。接着来：

3、使用Jekyll创建你的博客站点
jekyll new blog  #创建你的站点


4、开启Jekyll服务
//进入blog目录,记得一定要进入创建的目录，否则服务无法开启
cd blog         
jekyll serve      #启动你的http服务

因为Jekyll默认的端口号是4000，所以打开浏览器输入：http://localhost:4000就可以访问自己的blog了。
关于jekyll其他一些命令的用法上文中也有我就直接copy了一下:

再次感谢上文的作者们
$ jekyll build
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中。

$ jekyll build --destination <destination>
# => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --source <source> --destination <destination>
# => 指定源文件夹<source>中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --watch
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中，
#    查看改变，并且自动再生成。

$ jekyll serve
# => 一个开发服务器将会运行在 http://localhost:4000/
# Auto-regeneration（自动再生成文件）: 开启。使用 `--no-watch` 来关闭。

$ jekyll serve --detach
# => 功能和`jekyll serve`命令相同，但是会脱离终端在后台运行。
#    如果你想关闭服务器，可以使用`kill -9 1234`命令，"1234" 是进程号（PID）。
#    如果你找不到进程号，那么就用`ps aux | grep jekyll`命令来查看，然后关闭服务器。[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).

让我们再来看看Jekyll的目录：

├── _config.yml              (配置文件)
├── _drafts                  (drafts（草稿）是未发布的文章)
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes             (加载这些包含部分到你的布局)
|   ├── footer.html
|   └── header.html
├── _layouts                 (包裹在文章外部的模板)
|   ├── default.html
|   └── post.html
├── _posts                   (这里都是存放文章)
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site                 (生成的页面都会生成在这个目录下)
├── .jekyll-metadata      (该文件帮助 Jekyll 跟踪哪些文件从上次建立站点开始到现在没有被修改，哪些文件需要在下一次站点建立时重新生成。该文件不会被包含在生成的站点中。)
└── index.html            (网站的index)

Jekyll的主题

既然自己的blog搭建好了，当然要更好看一些。你可以自己写HTML5+CSS来定制自己的Jekyll主题，也可以在求助万能的网站，来寻找各种主题。

使用 Github Pages 的服务

1、创建我们的仓库
把username替换成自己的名字

2、设置我们的仓库

3、部署我们的blog
我们先把刚刚新建的仓库git clone到本地，然后cd 到仓库的目录下，执行jekyll serve -B

//克隆下来到本地的git文件夹
cd username.github.com
jekyll serve -B

注意，启动前确保其他目录下没有jekyll服务，可以 ps aux|grep jekyll 查看进程,有的话,用kill -9 进程号 杀掉其他进程。
现在我们打开http://localhost:4000,即可看见我们在Github上创建的主页，理论上和https://username.com/username.github.io/ 访问的应该是一模一样的。
接着我们把我们自己做好的blog目录整个都拷贝到这个仓库文件夹中(如果是自己下载的主题：直接将下载的主题文件拷贝替换掉原blog文件下的所有文件，启动一下服务，即可。)，当然，这个仓库之前的文件可以删除了，只留下README即可。把整个文件都push到github上去

git add --all                          #添加到暂存区 
git commit -m "提交jekyll默认页面"       #提交到本地仓库
git push origin master                 #线上的站点是部署在master下面的

注意，在提交前，请确保_config.yml文件里面下面是这样配置的，因为这个是Github Pages的规定，如果选择了其他的模式，会立即收到编译警告的邮件提醒的。

highlighter: rouge
markdown: kramdown

申请个人域名

我的个人域名是在万网申请的。申请好了之后就是和自己的blog绑定（上面链接文章写的比较清楚）：
1、我们要绑定的话需要在username.github.com目录下增加一个CNAME文件。 在里面添加你的域名，假设为example.com，然后推送CNAME文件到远程仓库:

git add CNAME
git push origin master

在这里遇到比较大的一个坑，当时想了半天CNAME是什么格式的文件，在网上找了半天，也没找到答案。最后才发现自己想错了，直接在终端进入从git上克隆下来的文件夹，然后在终端输入指令
vim CNAME
输入自己的域名，保存退出，提交就行了。
2、到域名服务商增加你的CNAME记录。 添加两条记录，@和www的主机记录，记录类型为CNAME类型，CNAME表示别名记录，该记录可以将多个名字映射到同一台计算机。 记录值请写username.github.io.,值得注意的是io
后面还有一个圆点，切记。

添加@和www的记录的时候出现了冲突，我直接把冲突给删除了。上文链接文章中也有相关介绍。

申请”小绿锁”HTTPS

在这一块我也遇见很多坑，最后看了这篇文章，然后直接在Cloudflare上申请了https。
具体的可按照上面操作。

写文章

有两个规定先记下：

文章必须新建在./_posts文件夹中
文章名称必须是yyyy-mm-dd-xxxxx-xxx-xxx格式，后缀名可以是.markdown | .html | .textile （不过我还是推荐markdown形式，因为易学、通用、效率高）

总结

在最后，再次感谢上面几篇文章的作者，以后我的blog主题的作者，正是有了你们的付出，才让技术没有界限。
通过这次的实验，以及动手的操作，才发现未知并不可怕，只要你开动自己的脚步，总能窥探一二。希望以后的日子里，不仅仅忙碌，还能怀揣着酒和故事，带着诗意，去远方。