利用Github Page 搭建個(gè)人博客網(wǎng)站

時(shí)間：2022-08-11 12:21:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-11 12:21:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

轉(zhuǎn)載請(qǐng)注明出處：

http://blog.csdn.net/tzs_1041218129/article/details/53214497

http://www.54tianzhisheng.cn/Blog/html/blog_github.html (閱讀效果最好)

更多精彩文章請(qǐng)關(guān)注微信公眾號(hào)：猿blog

http://weixin.qq.com/r/5UTh_bzEGOFnrfia9xH3 (二維碼自動(dòng)識(shí)別)

前言

最近這幾天，沒事干，想找點(diǎn)事折騰下，于是自己便想到了自己一直想干的一件事：搭建一個(gè)屬于自己的博客網(wǎng)站。目前搭建個(gè)人 blog 網(wǎng)站最好的是用 wordpress ，但是那個(gè)折騰起來(lái)好像還挺麻煩的，再加上還需要自己修改些前端代碼和用 PHP 做（雖然我學(xué)了幾天拍黃片，但是早已忘了），然后就是用 Github Page 吧，自己也一直在這個(gè)最大的交友網(wǎng)站裝 X 。想想就用這個(gè)吧（后來(lái)好像覺得這個(gè)還挺省事的）

再說(shuō)說(shuō)擁有個(gè)人博客網(wǎng)站的好處吧：

• 裝 X（如果網(wǎng)站夠炫）
• 很好的用來(lái)總結(jié)自己所學(xué)的知識(shí)
• 面試加分（在簡(jiǎn)歷上放上自己的個(gè)人網(wǎng)站鏈接，面試官就可以更好的了解你，知道你所學(xué)知識(shí)的深度和廣度）
• 不再受其他博客平臺(tái)的規(guī)則所束縛

如果你現(xiàn)在還沒有自己個(gè)人博客網(wǎng)站的話，那么我覺得你看完本篇博客后，強(qiáng)烈的建議你去折騰折騰下，搞個(gè)自己的，讓自己也能夠體驗(yàn)裝 X 的感覺。

要想用搭建一個(gè)個(gè)人博客網(wǎng)站，首先你得有一個(gè)域名，這樣別人才可以通過域名訪問，其次你還要一個(gè)空間來(lái)存放你的頁(yè)面。

• 域名 域名的話，你可以在萬(wàn)網(wǎng)、阿里云、騰訊云等注冊(cè)，我的域名 www.54tianzhisheng.cn 就是在騰訊云注冊(cè)的，記得是騰訊云一元錢（一個(gè)域名+主機(jī)）搞的，這是騰訊云對(duì)學(xué)生才有這優(yōu)惠。 .cn 的域名需要備案，備案的審核速度我覺得還是挺快的，還需要上傳證件。當(dāng)然你也可以買其他的那些不需要備案的域名，省得麻煩事。
• 空間 空間有免費(fèi)的空間，也有收費(fèi)的空間。免費(fèi)的當(dāng)然就不夠穩(wěn)定了，收費(fèi)的就很貴了，終究是很不爽，有沒有什么地方是既免費(fèi)又穩(wěn)定的空間呢？有，Github 。它允許上傳個(gè)人網(wǎng)站項(xiàng)目并自定義你的域名，而且又有穩(wěn)定的服務(wù)，實(shí)在是不能夠在好了。

下面就一起跟著我來(lái)一步一步的利用 Github 搭建個(gè)人博客網(wǎng)站吧！

1. 擁有一個(gè)域名

這個(gè)步驟我就不詳述了。

舉例：

• 打開騰訊云官網(wǎng)
• 搜索你想要的域名，下單買一個(gè)

2. 擁有一個(gè) Github賬號(hào)

互聯(lián)網(wǎng)崇尚自由與分享。Github 是一個(gè)全世界程序員聚集的地方，大家相互分享自己寫的代碼，提升別人，也提升自己。大家都在為著開源社區(qū)努力著。因?yàn)槲覐拈_源項(xiàng)目中學(xué)到很多知識(shí)，所以我也非常愿意分享我的所見所學(xué)所得，我的 Github 主頁(yè)：https://github.com/zhisheng17 （歡迎 follow 和對(duì)我的項(xiàng)目給個(gè) star 或者 fork 我的項(xiàng)目一起來(lái)和我完善項(xiàng)目）

如果還沒有 Github 賬號(hào)的話你就先去注冊(cè)一個(gè)吧，有的話，直接登錄就行，后面的操作都要用到 Github 的。

3. Github 上新建個(gè)人網(wǎng)站項(xiàng)目

登錄 GitHub 之后，在頁(yè)面右上角點(diǎn)擊 + 加號(hào)按鈕，點(diǎn)擊 New repository。

由于我們是新建一個(gè)個(gè)人網(wǎng)站項(xiàng)目，所有倉(cāng)庫(kù)的名稱需要安裝 GitHub 個(gè)人網(wǎng)站項(xiàng)目的規(guī)定來(lái)寫。

規(guī)則就是：

http://YOUR-GITHUB-USERNAME.github.io

比如我的 GitHub 用戶名是 zhisheng17，那我就要填寫 http://zhisheng17.github.io。然后選擇公開模式，接著點(diǎn)擊創(chuàng)建倉(cāng)庫(kù)按鈕。

創(chuàng)建成功之后，進(jìn)入了項(xiàng)目主頁(yè)面。點(diǎn)擊設(shè)置按鈕。

進(jìn)入之后，滾動(dòng)頁(yè)面到下方。點(diǎn)擊頁(yè)面自動(dòng)生成器按鈕。

點(diǎn)擊右下方繼續(xù)去布局按鈕。

選擇一個(gè)模板，點(diǎn)擊發(fā)布頁(yè)面按鈕。

這個(gè)時(shí)候，你就可以通過http://YOUR-GITHUB-USERNAME.github.io來(lái)訪問此頁(yè)面了。

4. 上傳個(gè)人網(wǎng)頁(yè)到 Github

自動(dòng)生成頁(yè)面，肯定不符合我們的要求，我們希望能夠自己設(shè)計(jì)自己的個(gè)人網(wǎng)站。我們可以自己編寫一個(gè)網(wǎng)頁(yè)文件，命名為 index.html。然后上傳到 GitHub個(gè)人網(wǎng)站項(xiàng)目上。這里為了節(jié)約時(shí)間，可以先下載我的個(gè)人網(wǎng)站項(xiàng)目代碼，然后修改為你的網(wǎng)頁(yè)上傳到 GitHub。

下面介紹詳細(xì)步驟。

進(jìn)入此項(xiàng)目https://github.com/zhisheng17/zhisheng17.github.io，然后下載源碼。解壓之后，拿到里面的index.html文件。

然后進(jìn)入自己的個(gè)人網(wǎng)站項(xiàng)目主頁(yè) YOUR-GITHUB-USERNAME/http://YOUR-GITHUB-USERNAME.github.io。點(diǎn)擊上傳文件按鈕，進(jìn)入上傳文件頁(yè)面，將 index.html 文件拖入藍(lán)色大圈圈區(qū)域，點(diǎn)擊提交按鈕即可提交成功。此時(shí)打開網(wǎng)址 http://YOUR-GITHUB-USERNAME.github.io 就可以看到主頁(yè)已經(jīng)改變?yōu)槲覀冏约旱木W(wǎng)頁(yè)了。

通過 http://zhisheng17.github.io 查看效果：

5. 域名CNAME到個(gè)人網(wǎng)站項(xiàng)目

網(wǎng)頁(yè)上傳成功了，我們不想一直通過http://YOUR-GITHUB-USERNAME.github.io來(lái)訪問我們的個(gè)人網(wǎng)站，而是希望通過自己的域名來(lái)訪問。

下面講述詳細(xì)步驟。

點(diǎn)擊我們的個(gè)人網(wǎng)站項(xiàng)目設(shè)置選項(xiàng)卡，滾動(dòng)到下面，就會(huì)發(fā)現(xiàn)一個(gè)自定義域名卡片。輸入我們買的域名，然后點(diǎn)擊保存。

接著我們還要將我們的域名解析到這個(gè)個(gè)人網(wǎng)站項(xiàng)目上。因?yàn)槲业挠蛎窃隍v訊云上面買的，所以我打開騰訊云域名管理頁(yè)面，進(jìn)行相關(guān)的設(shè)置。

接著，點(diǎn)擊添加一條域名解析記錄，主機(jī)填寫www，代表你是一級(jí)域名來(lái)訪問，指向填寫http://YOUR-GITHUB-USERNAME.github.io，然后點(diǎn)擊保存按鈕。應(yīng)該要等會(huì)，域名的解析時(shí)間可能不一樣，我的騰訊云就是很慢的

6. 訪問你的域名

所有這些步驟做完之后，在瀏覽器里輸入自己的域名，回車鍵一按，就會(huì)返回我們剛剛上傳到 GitHub 的index.html 頁(yè)面了。

這里只是入門了 GitHub 搭建個(gè)人網(wǎng)站的功能，GitHub 官方推薦 Jekyll 博客系統(tǒng)來(lái)發(fā)布自己的頁(yè)面。以后有數(shù)據(jù)更新，都可以通過 Jekyll 來(lái)重新編譯整個(gè)網(wǎng)站。（期待后續(xù)我的使用 Jekyll 博客系統(tǒng)發(fā)布自己博客的文章吧）

7. 注意事項(xiàng)

盡管GitHub個(gè)人網(wǎng)站項(xiàng)目是免費(fèi)的，但是卻有一些限制?？傮w來(lái)說(shuō)，完全夠用，甚至太多了。

• 單個(gè)倉(cāng)庫(kù)大小不超過1GB，上傳單個(gè)文件大小不能超過100MB，如果通過瀏覽器上傳不能超過25MB
• 個(gè)人網(wǎng)站項(xiàng)目也不例外，最大空間1GB
• 個(gè)人網(wǎng)站項(xiàng)目每個(gè)月訪問請(qǐng)求數(shù)不能超過10萬(wàn)次，總流量不能超過100GB
• 個(gè)人網(wǎng)站項(xiàng)目一小時(shí)創(chuàng)建數(shù)量不能超過10個(gè)

當(dāng)然了，這些政策可能隨時(shí)改變，可以通過此網(wǎng)頁(yè)查看最新政策。 https://help.github.com/articles/what-is-github-pages/#recommended-limits