MAC 搭建GITHUB PAGES + Jekyll 步骤

前提要求

首先需要有一系列的前提工具要求

1. GIT

用来在本地创建仓库,并与远程仓库连接。具体步骤参见 github pages 官网入门教程

2. Ruby

需要2.1以上版本,在 mac 上一般会预装ruby,但是可能版本不够高,此时推荐使用RVM来更新ruby的版本。具体步骤也可以参见简书上的一个 教程.

提醒: 使用RVM安装ruby时还需要提前安装好xcode,这个直接在 App Store 上傻瓜安装就好。

3. Bundle

Using Bundler to install and run Jekyll. Bundler manages Ruby gem dependencies, reduces Jekyll build errors, and prevents environment-related bugs.

运行以下代码

1
gem install bundler

4. Jekyll

这个可以不用提前安装,在接下来的步骤中会说明如何安装。

搭建博客站点的远程仓库

仍然是按照 github pages 的官网教程来就行。

搭建本地 Jekyll 站点仓库

1. Clone 远程 github 博客仓库到本地

在此不赘述,使用git clone命令即可

2. 安装 Jekyll

按照 github pages 的帮助文档里面的Step 2,一切顺利,就可以安装好 Jekyll.

3. 寻找模板

我们最终的博客站点肯定是希望很漂亮,如果按照帮助文档的建议一步步往下,是没有那么漂亮的。所以推荐直接到Jekyll的一个主题汇集站点,寻找自己喜欢的自己,然后fork到自己的 github 中。最后再将文件都拷贝到自己本地的 Jekyll 站点仓库里。

4. 本地预览博客

如果一切顺利,在本地 Jekyll 仓库根目录运行

1
bundle exec jekyll serve

它会启动一个本地的服务器,部署我们的博客站点,在我们修改了仓库中的文件时它还会自动重新构建,可以说是比较方便的了。
然后在浏览器中打开localhost:4000,就可以预览我们的站点长什么样了~~~

上传本地修改到远程仓库

没什么好说的,就是常用的git push。不过有一些要注意的:

有些你fork下来的模板,在本地跑的时候,所有的资源都可能会有一个baseUrl,这个在项目根目录的_config.yml中可以发现相应配置:

1
baseurl: 'xxx' # the subpath of your site, e.g. /blog

如果不修改 baseurl,你会发现 push 上去后,真正打开你的线上博客站点时,所有的样式全部丢失,功能也不正常了。
这是因为所有的资源都是相对于 baseurl 的,而线上找不到那些资源。解决办法就是在_config.yml中将baseurl设置为空字符串即可。

1
baseurl: ''