使用 Jekyll 在 Github 上建立个人网站 (上)

通过本教程，我们想要学会：

1. 如何在本地搭建一个可以运行 jekyll 的环境
2. 如何使用 Github Page 来 Host 我们的网站。

PART1: 准备工作

下载一个纯文本编辑器

推荐使用 vscode/atom/sublime 之一即可。

安装 Ruby

1. 使用 Homebrew 安装

   • 参考：Mac OS X 上安装 Ruby

2. 使用 RVM 安装：

   • 参考：Mac OS 配置指南 | Ruby的安装和配置

安装 Jekyll

• 参考：Jekyll on macOS

如何正确的配置环境变量

Linux/Mac 里面带 $PATH、$HOME 之类的都是环境变量，而 $PATH 是用来指示系统会去哪些目录中寻找可执行的程序的环境变量。 所以我们如果要正确的使用 ruby、bundle、gem 这样的命令，就需要配置好环境变量。 环境变量可以通过 export 来声明，声明的环境变量会保留直到当前的 shell 结束（关闭）。

如果我们要长期的保存环境变量，就需要把 export xxx=xxx 这条命令写到 ~/.bash_profile 里面。Shell 启动的时候会自动的调用

1. 用文本编辑器打开 ~/.bash_profile, 如果家目录(~)下面没有这个文件的话，就新建一个。 比如用code打开

code ~/.bash_profile

2. 然在在 ~/.bash_profile 里添加：

export PATH=$HOME/.gem/ruby/X.X.0/bin:$PATH

别忘了把 x.x 改为你自己的 ruby 的版本的前两位数字

Reference

• 简书 | Mac环境变量的配置: https://www.jianshu.com/p/7e30b7b7ee48
• 知乎 | Mac环境变量的配置: https://zhuanlan.zhihu.com/p/25976099

PART2: 新建 jekyll 项目或者使用现有代码

方案一：新建 jekyll 项目

1. 安装 Jekyll and bundler gems

    gem install jekyll bundler
   

2. 在 ./myblog 创建一个项目

    jekyll new myblog
   

3. 改变当前的目录

    cd myblog
   

4. build 当前的网站，并且 host 在本地

    bundle exec jekyll serve
   

5. 点击 http://localhost:4000 预览网页吧。

使用现有代码

本示例使用 https://github.com/wild-flame/jkeyll-simple 项目来做示范

1. 克隆远程仓库

    git clone https://github.com/wild-flame/jkeyll-simple
   

2. 切换目录

    cd jekyll-simple
   

3. 安装当前所需要的 gem

    bundle install 
   

4. 编译并在本地运行代码

    bundle exec jekyll server
   

5. 打开 http://localhost:4000 预览网页吧。

接下来要做的工作

接下来在 PART3 我们会学习如何把本地的网站同步到 github 上并访问到。

PART 3：将网站同步到 Github 上，参考材料：

• 如何使用 github page 搭建博客
• Github Pages 使用入门
• 博客搭建详细教程

---