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

用过Wordpress搭建过博客,对于我这种喜欢折腾的人来说有点不合适。之后用Hexo+Github用过一段时间感觉也不太合适。Hexo只把生成的静态页面同步到GitHub,源文件还是容易丢失。然后就研究一下这个。
Hexo 搭建博客参考文章:
Mac上搭建基于GitHub的Hexo博客
Hexo的版本控制与持续集成

接下来是Jekyll

安装ruby

mac自带, 没有则使用brew安装
查看版本号

$ ruby -v
$ brew install ruby

版本号小于2.1可以参考这篇文章升级Ruby

安装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

安装jekyll

$ sudo gem install jekyll

安装博客

首先需要安装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 blog

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

New jekyll site installed in /Users/admin/chaiszblog. 

本地启动博客

进入到安装目录

$ cd chaiszblog
$ sudo jekyll serve

输出:

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

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

部署到github

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

https://github.com/chaishuanzhu/chaishuanzhu.github.io.git

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

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

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

添加文章

文章都放在_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
---

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

使用命令推送, 我一般用GitHub Desktop客户端

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

浏览器输入chaishuanzhu.github.io,就可以看见这篇文章了。

使用主题

有哪些简洁明快的 Jekyll 模板?
有哪些 Jekyll 模板值得推荐?
http://jekyllthemes.org/themes/easybook/
https://github.com/maoxiaoke/maoxiaoke.github.io

使用EasyBook这个主题需要注意把_config.yml中gems更改成plugins。并安装下面的插件。

plugins:
 - jekyll-paginate
 - jekyll-gist
 - jemoji

插件安装:

$ sudo gem install  jekyll-paginate
$ sudo gem install  jekyll-gist
$ sudo gem install  jemoji

绑定域名

在终端输入:

ping chaishuanzhu.github.io

得到ip地址:

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

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

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

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

cd blog
echo "chaisz.xyz" > CNAME

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

也可以绑定二级域名 blog.chaisz.xyz

HTTPS支持

Mac下使用Jekyll和github搭建个人博客_第1张图片
6B8C69B9-BACB-4319-B30C-2BE435A14033.png

Custom domains on GitHub Pages gain support for HTTPS
参考: 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

本文参考:Mac下使用Jekyll和github搭建个人博客

你可能感兴趣的:(Mac下使用Jekyll和github搭建个人博客)