使用 Github Pages 搭建網(wǎng)站
時(shí)間：2023-07-08 21:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-08 21:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
使用 Github Pages 搭建網(wǎng)站：Github Pages 是 github 公司提供的免費(fèi)的靜態(tài)網(wǎng)站托管服務(wù)，用起來(lái)方便而且功能強(qiáng)大，不僅沒(méi)有空間限制，還可以綁定自己的域名。很多非常著名的公司和項(xiàng)目也都用這種方式來(lái)搭建網(wǎng)站，如微軟和 twitter 的網(wǎng)站，還有 谷歌的 Material Design 圖標(biāo) 網(wǎng)站。
分類和文檔
到
https://pages.github.com/ 上，看到可以創(chuàng)建的網(wǎng)站有兩類，一類是為自己或者是自己的組織創(chuàng)建站點(diǎn)，就是新建一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)的名字叫做，username.github.io 或者是 orgnizationname.github.io ，注意這里的 username 和 orgnizationname 要嚴(yán)格替換成你自己的用戶名或者組織名，大小寫也要區(qū)分，不然就會(huì)有問(wèn)題。然后就往倉(cāng)庫(kù)里面放頁(yè)面內(nèi)容就行了。第二類是為項(xiàng)目創(chuàng)建網(wǎng)站，這個(gè)其實(shí)主要步驟都是一樣的，只不過(guò)稍微比創(chuàng)建用戶或組織網(wǎng)站復(fù)雜一點(diǎn)點(diǎn)。
下面我們來(lái)創(chuàng)建一個(gè)組織網(wǎng)站，詳細(xì)步驟在
https://pages.github.com/ 頁(yè)面上是有的。
制作過(guò)程
下面我們動(dòng)手來(lái)做一下。
首先創(chuàng)建一個(gè)組織，名為 gitbeijing 。
然后再該組織之下，創(chuàng)建一個(gè)名為
gitbeijing.github.io 的倉(cāng)庫(kù)。注意這個(gè)倉(cāng)庫(kù)的名字是有嚴(yán)格規(guī)定的，不要拼錯(cuò)。到新項(xiàng)目中，添加一個(gè)新文件，名字叫 index.html ，里面的添加自己想要在網(wǎng)站首頁(yè)展示的內(nèi)容。保存之后，過(guò)幾分鐘就可以到 gitbeijing.github.io 這個(gè)鏈接中看到頁(yè)面了。
jekyll
Jekyll 是一個(gè)簡(jiǎn)單的，支持博客結(jié)構(gòu)的，靜態(tài)網(wǎng)站生成器。
上面這段話是 Jekyll 之父 Tom 在 blogging-like-a-hacker 中說(shuō)的。
Jeklly 的具體使用本身跟 git 沒(méi)有直接聯(lián)系，所以這里就不細(xì)說(shuō)了。它主要能完成的功能有下面幾項(xiàng)：
- 頁(yè)面不用 html 來(lái)寫了，而用更為簡(jiǎn)單的 markdown 格式來(lái)寫
- 可以使用布局文件和片段文件
- 代碼高亮支持
- 可以使用變量
詳細(xì)內(nèi)容參考 jekyll 官網(wǎng) 。 我也錄了一期詳細(xì)的 Jekyll 使用視頻，放在我的好多視頻網(wǎng)站上。
Jekyll 的好處是簡(jiǎn)單易用，同時(shí)是 Github Pages 服務(wù)直接支撐的，也就是說(shuō)只要按照 Jekyll 規(guī)范來(lái)寫的內(nèi)容，推送到
http://github.com 之后就能夠自動(dòng)轉(zhuǎn)換為 html 顯示出來(lái)。但是 Jekyll 的不足是靈活性弱，gitbeijing 就沒(méi)有使用 Jekyll ，而是使用了 Gatsby 來(lái)生成靜態(tài)頁(yè)面，然后把生成好的靜態(tài)頁(yè)面再托管到 gitbeijing.github.io 。
綁定自己的域名
另外，有一個(gè)功能很重要，就是綁定自己的域名。想想如果有天 github 網(wǎng)站被和諧了，那怎么辦？如果一開(kāi)始就是用自己的域名，那就簡(jiǎn)單了，換一臺(tái)服務(wù)器就好了。
綁定域名的具體的操作步驟在這里 。我的 gitbeijing.com 這個(gè)域名是在 godaddy.com 上買的。 到 godaddy.com 上，添加 A Record 指向 185.199.111.153 ，注意這個(gè) IP 可能會(huì)在未來(lái)發(fā)生變化，具體值請(qǐng)參考官方文檔。并且添加一個(gè) CNAME ，以便讓 www.gitbeijing.com 可以重定向到 gitbeijing.com 。
這樣后面用
http://gitbeijing.com 或者
http://www.gitbeijing.com 就都可以指向 Github 了。但是 github pages 上面網(wǎng)站眾多，如何能找到我的網(wǎng)站呢？
要到 gitbeijing/gitbeijing.github.io項(xiàng)目的 settings 頁(yè)面，添加域名，并強(qiáng)制使用 HTTPS 。
點(diǎn)按鈕確認(rèn)后，github 會(huì)在倉(cāng)庫(kù)中自動(dòng)創(chuàng)建 CNAME 文件，里面的內(nèi)容為
gitbeijing.com這樣操作結(jié)束，可能還要稍微等幾個(gè)小時(shí)給 DNS 擴(kuò)散以及 HTTPS 的證書的頒發(fā)。然后訪問(wèn) <gitbeijing.com> 或者訪問(wèn) <www.gitbeijing.com> 都可以跳轉(zhuǎn)到 https://gitbeijing.com ，并打開(kāi)網(wǎng)站了，效果完美。
總結(jié)
喜歡分享是一個(gè)好程序員的標(biāo)志，我給我的很多初學(xué)編程的朋友的建議就是，先學(xué)習(xí)如何用 Github Pages 搭建自己的個(gè)人網(wǎng)站，一來(lái)可以鍛煉一些基本的網(wǎng)站開(kāi)發(fā)技巧，二來(lái)可以建立一個(gè)分享的陣地。
Ref:
在線咨詢
