← 上一章:【狀況題】聽說 git push -f 這個指令很可怕,什麼情況可以用它呢? 下一章:【冷知識】一定要有 GitHub 才能得到別人更新的檔案嗎? →


使用 GitHub 免費製作個人網站

GitHub 除了提供免費的 Git Server 外,如果推上去的分支的名字剛好叫做 gh-pages,你可以用 GitHub 當做靜態檔案的伺服器,它比一般外面虛擬主機要便宜得多,也安全得多。不過也有一些限制:

  1. 僅呈現靜態頁面內容,如果是什麼 PHP 或是 ASP 的它不會理你。
  2. 不支援 .htaccess 之類的設定檔,所以無法設定使用者密碼。
  3. 僅能使用 Git 上傳,沒有什麼 FTP 之類的東西。
  4. 不像 Repository 有 Private 的設定,所有的 GitHub Pages 都是公開的,甚至放在 Private 專案裡,頁面也是公開的。

整體上來說,GitHub Pages 的優點還是多於缺點,至少它穩定、安全又沒收你錢。接著就試試看如何把頁面放上去吧。

新增專案

首先在 GitHub 上開一個全新的專案:

GitHub Pages

在專案名稱的地方,填寫「username.github.io」,這個 username 指的是自己的 GitHub 帳號,所以我這邊是填 eddiekao.github.io

接下來,我先找一個空的目錄,建立 index.html,內容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>你好,GitHub</title>
  </head>
  <body>
    <h1>覺得厲害</h1>
  </body>
</html>

完成之後,就是 git addgit commit 的基礎指令了(可參考「把檔案交給 Git 控管」章節):

$ git add index.html

$ git commit -m "add index"
[master (root-commit) 80450b2] add index
 1 file changed, 10 insertions(+)
 create mode 100644 index.html

接下來就是一般的 Push 了,如果忘記怎麼操作可參閱「Push 上傳到 GitHub 」章節。

$ git remote add origin https://github.com/eddiekao/eddiekao.github.io.git

$ git push -u origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 327 bytes | 327.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/eddiekao/eddiekao.github.io.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

順利推上去之後,回到專案的頁面看看應該可以看到東西已經推上去了:

GitHub Pages

這時候,輸入網址 https://eddiekao.github.io/ 便可連上頁面:

GitHub Pages

另外,坊間有其它像是 Jekyll 或是 Octopress 之類的好用套件,可以使用 Markdown 語法編寫,並幫你轉成 HTML 格式或是產生整個 Blog,甚至有方便的指令可一行指令自動上傳到 GitHub Pages 上。

本書所有內容(https://gitbook.tw/)以及我個人的 Blog(https://kaochenlong.com/)就是透過這些套件完成的,同時也是放在 GitHub Pages 上,又安全又穩定。詳情請見這些套件的官方網站介紹。

客制化網址

覺得原來的網址不好記嗎?沒關係,GitHub Pages 有支援客制化網址,只要簡單兩個步驟就可完成:

  1. 在該專案的根目錄放一個檔名為 CNAME 的檔案,內容只要放你想要客制化的那個網址。
  2. 請幫你管理網域的人,幫你設定一組 CNAME 指到 eddiekao.github.io. 即可。(你的網域管理人應該知道什麼是 CNAME)

參考網址:https://pages.github.com/


← 上一章:【狀況題】聽說 git push -f 這個指令很可怕,什麼情況可以用它呢? 下一章:【冷知識】一定要有 GitHub 才能得到別人更新的檔案嗎? →

Comments