GitHub + Jekyll 搭建個人網(wǎng)站
本文基于Mac OS 10.14.2 (18C54)版本
本文需要了解GitHub及Git的使用
在通過GitHub + Jekyll搭建個人播客的過程中遇到了很多問題. 在網(wǎng)上搜了很多教程. 發(fā)現(xiàn)差別還是挺大的. 所以在此總結(jié)一下.
首先我們需要有一個GitHub賬號
接下來我們先用一個不帶模板(主題)的方式進行搭建
普通搭建(不帶模板)
-
建立repository(倉庫)
我們登陸GitHub賬號, 新建一個代碼庫, 可以看到我的GitHub賬號的用戶名是**zooooooooom**, 代碼庫名隨意即可(英文)
這里要強調(diào)一下, 該倉庫名稱可以隨意起. 區(qū)別就是注意下命名規(guī)則, 經(jīng)過測試:
這邊我的用戶名是zooooooooom
步驟
1. 創(chuàng)建倉庫, 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. 創(chuàng)建分支Branch: gh-pages
這里解釋一下為什么要創(chuàng)建名為 gh-pages 的分支, GitHub Pages 中明確定義了只有 gh-pages 分支的代碼才會被自動生成網(wǎng)站鏈接胰伍，因此需要在拷貝下來的代碼中添加對應(yīng)分支相味。
接下來創(chuàng)建并切換到 gh-pages 分支, 并創(chuàng)建了一個index.html的文件 ,用一個編輯器打開或者vim等. 隨便添加一點內(nèi)容方便之后的查看. 這里我添加的內(nèi)容是"這里是gh-pages分支的index.html網(wǎng)頁"
~/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倉庫查看里面應(yīng)該會多一個分支, 并且在這個分之下會有我們剛剛推送的index.html文件
這時候我們可以通過 https://zooooooooom.github.io/xxx/這個地址直接訪問到我們剛才添加的網(wǎng)頁內(nèi)容, 這里的zooooooooom是我的GitHub起的用戶名, 用你自己的即可, 也可以修改. 如圖:
但是如果我們想更簡單的訪問我們的地址呢? 比如我們想直接通過 https://zooooooooom.github.io/ 直接訪問. 這里需要進行特殊的設(shè)置. 把當前的倉庫名稱改為 zooooooooom.github.io, 對, 就是把 xxx 改為 zooooooooom.github.io 下面是解釋
下面舉例: 倉庫名為xxx
倉庫名采用 xxx.github.io 規(guī)則
- 如果 xxx==用戶名, 可以直接通過 https://xxx.github.io 訪問
- 如果 xxx!=用戶名, 則需要通過 https://用戶名.github.io/xxx.github.io 訪問, 可以把 xxx.github.io 看成一個整體
倉庫名采用 xxx
- 這種情況, 都需要通過 https://用戶名.github.io/xxx, 這里把 xxx看成一個整體
總結(jié):
首先要確保是在 gh-pages 分支下
其次就是倉庫名稱命名的問題
Jekyll + themes
最基礎(chǔ)簡單的頁面我們已經(jīng)完成了, 當然這并不是我們想要的. 我們肯定是想要看到更豐富美觀的網(wǎng)頁. 下面我我們將進行結(jié)合模板做出更美觀的網(wǎng)頁
