GitHub + Jekyll 搭建个人网站

本文基于Mac OS 10.14.2 (18C54)版本

本文需要了解GitHub及Git的使用

在通过GitHub + Jekyll搭建个人播客的过程中遇到了很多问题. 在网上搜了很多教程. 发现差别还是挺大的. 所以在此总结一下.

首先我们需要有一个GitHub账号

接下来我们先用一个不带模板(主题)的方式进行搭建

普通搭建(不带模板)

• 建立repository(仓库)

    我们登陆GitHub账号, 新建一个代码库, 可以看到我的GitHub账号的用户名是**zooooooooom**, 代码库名随意即可(英文)
  

这里要强调一下, 该仓库名称可以随意起. 区别就是注意下命名规则, 经过测试:
这边我的用户名是zooooooooom

步骤

1. 创建仓库, clone到本地

新建好仓库之后, 先把仓库clone到本地

~ ⌚ 11:09:17
$ cd Desktop

~/Desktop ⌚ 11:09:22
$ git clone git@github.com:zooooooooom/xxx.git
Cloning into 'xxx'...
warning: You appear to have cloned an empty repository.

这里我clone到桌面, 是一个空的文件夹

2. 创建分支Branch: gh-pages

这里解释一下为什么要创建名为 gh-pages 的分支, GitHub Pages 中明确定义了只有 gh-pages 分支的代码才会被自动生成网站链接，因此需要在拷贝下来的代码中添加对应分支。

接下来创建并切换到 gh-pages 分支, 并创建了一个index.html的文件 ,用一个编辑器打开或者vim等. 随便添加一点内容方便之后的查看. 这里我添加的内容是"这里是gh-pages分支的index.html网页"

~/Desktop/xxx on  master ⌚ 11:14:06
$ git checkout --orphan gh-pages
Switched to a new branch 'gh-pages'
~/Desktop/xxx on  gh-pages ⌚ 11:14:35
$ touch index.html

接下来我们将之push到代码仓库

~/Desktop/xxx on  gh-pages! ⌚ 11:17:29
$ git add index.html

~/Desktop/xxx on  gh-pages! ⌚ 11:19:51
$ git commit -m "add index.html"
[gh-pages (root-commit) 9782a47] add index.html
 1 file changed, 1 insertion(+)
 create mode 100644 index.html

~/Desktop/xxx on  gh-pages ⌚ 11:20:13
$ git push origin gh-pages
Counting objects: 3, done.
Writing objects: 100% (3/3), 257 bytes | 257.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com:zooooooooom/xxx.git
 * [new branch]      gh-pages -> gh-pages

上面的步骤完成之后我么就可以刷新我们的GitHub仓库查看里面应该会多一个分支, 并且在这个分之下会有我们刚刚推送的index.html文件

这时候我们可以通过 https://zooooooooom.github.io/xxx/这个地址直接访问到我们刚才添加的网页内容, 这里的zooooooooom是我的GitHub起的用户名, 用你自己的即可, 也可以修改. 如图:

但是如果我们想更简单的访问我们的地址呢? 比如我们想直接通过 https://zooooooooom.github.io/ 直接访问. 这里需要进行特殊的设置. 把当前的仓库名称改为 zooooooooom.github.io, 对, 就是把 xxx 改为 zooooooooom.github.io 下面是解释

下面举例: 仓库名为xxx

仓库名采用 xxx.github.io 规则

• 如果 xxx==用户名, 可以直接通过 https://xxx.github.io 访问
• 如果 xxx!=用户名, 则需要通过 https://用户名.github.io/xxx.github.io 访问, 可以把 xxx.github.io 看成一个整体

仓库名采用 xxx

• 这种情况, 都需要通过 https://用户名.github.io/xxx, 这里把 xxx看成一个整体

总结:

首先要确保是在 gh-pages 分支下

其次就是仓库名称命名的问题

Jekyll + themes

最基础简单的页面我们已经完成了, 当然这并不是我们想要的. 我们肯定是想要看到更丰富美观的网页. 下面我我们将进行结合模板做出更美观的网页