用 GitHub Pages 建個(gè)人網(wǎng)站的小白級(jí)教程
時(shí)間：2023-08-02 21:27:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-08-02 21:27:02 來源：網(wǎng)站運(yùn)營
用 GitHub Pages 建個(gè)人網(wǎng)站的小白級(jí)教程：前段時(shí)間心血來潮想建一個(gè)個(gè)人網(wǎng)站，調(diào)研了一圈，試用了 Weebly、Wix、Squarespace 等等產(chǎn)品，感覺都沒有辦法滿足我的奇葩需求……最終還是覺得 GitHub Pages 是最好的——自由、免費(fèi)、流量夠用，目前的訪問速度也還不錯(cuò)，完美！
曾經(jīng)還想用 GitHub Pages + Jekyll 的方式做，這樣的話，之后可以用 markdown 來更新文章，一勞永逸。但是作為一個(gè)不會(huì)敲代碼的設(shè)計(jì)，Jekyll 我真的搞不明白，安裝各種工具的流程就失敗了 (?_?)
最終選擇了
用 html 模板做靜態(tài)頁面……后續(xù)更新的話，改 html 文件里的文章內(nèi)容就行了，也沒有很麻煩嘛~（自我安慰）
這種建站方式大概是最簡單的，全程不到十分鐘，建好之后你可以根據(jù)自己的需求隨意修改模板的內(nèi)容和樣式（當(dāng)然，改到什么程度取決于你看得懂多少 html 和 css 的代碼了……）
這個(gè)教程會(huì)寫得非常通俗簡單小白，開發(fā)大佬不要嘲我哈~
前期準(zhǔn)備
- 安裝一個(gè) GitHub 的客戶端，用來同步云端和本地的文件：GitHub Desktop
可能有些大佬喜歡用終端同步？本小白還是喜歡可視化操作……這個(gè)網(wǎng)站打不開的話就找一下網(wǎng)盤版吧，應(yīng)該也不少。 - 下載一個(gè) html 的模板。這里安利一個(gè)網(wǎng)站：HTML5 UP，有幾十個(gè)模板，質(zhì)量都非常高，響應(yīng)式設(shè)計(jì)，還都有二級(jí)頁面，后續(xù)魔改一下也是可以滿足五花八門的樣式需求的。
大致的流程
- 注冊(cè)一個(gè) GitHub 帳號(hào)，并建一個(gè) GitHub Pages 的倉庫
- 用 GitHub 客戶端將倉庫拉到本地
- 把 html 的模板文件放到對(duì)應(yīng)的本地文件夾里
- 用 GitHub 客戶端把本地文件夾同步到云端的倉庫
第一步：新建一個(gè) GitHub Pages 的倉庫
- 點(diǎn)擊網(wǎng)頁右上角的「New repository」
- 填寫倉庫名，格式必須是「你的 http://username.github.io」才能被識(shí)別
- 建好后，進(jìn)入倉庫最后一個(gè) tab「Settings」，在「GitHub Pages」那一欄點(diǎn)「Choose a theme」選一個(gè)默認(rèn)的網(wǎng)頁模板。這里隨便選一個(gè)就行，反正后面會(huì)被其他模板替換掉，系統(tǒng)提供的模板都很簡陋。
選完默認(rèn)模板其實(shí)網(wǎng)站就創(chuàng)建好可以訪問了，回到 Settings 的時(shí)候就會(huì)看到你的網(wǎng)站域名啦~
這個(gè)時(shí)候你的倉庫根目錄下會(huì)有兩個(gè)文件：_config.yml、index.html（這是網(wǎng)站的默認(rèn)首頁）
第二步：用 GitHub 客戶端將倉庫拉到本地
- 安裝好 GitHub 客戶端后，登錄你的帳號(hào)。然后克隆倉庫，把剛剛建好的倉庫文件夾拉到本地。
第三步：添加模板文件
- 將下載好的模板文件解壓，然后把里面的所有文件挪到你剛剛克隆到本地的文件夾中。index.html 直接替換，原來文件夾中的 _config.yml 就放那兒不用管它……
最后一步：將文件夾內(nèi)容同步到云端倉庫
- 這是打開 GitHub 客戶端，已經(jīng)可以看到好幾項(xiàng)變動(dòng)了，點(diǎn)擊「Commit to master」，然后點(diǎn)擊「Push origin」，等待幾分鐘就完成同步了。
再次訪問個(gè)站鏈接，已經(jīng)是新模板的樣式啦~
我這里隨便選了 html5 up 的第一個(gè)模板，就是下圖的樣子。不過這個(gè)倉庫是我為了寫教程建的，已經(jīng)刪掉了，所以現(xiàn)在訪問不了啦……
最后簡單介紹一下后續(xù)會(huì)常用的文件：
- assets/css 里面都是網(wǎng)頁的樣式文件啦，后續(xù)要調(diào)整頁面設(shè)計(jì)，也是這些文件改得最多。
- index.html 上面提到了，是首頁文件，首頁的內(nèi)容都在這個(gè)文件里改。
- 你可以在根目錄下新建一個(gè)文件夾放文章內(nèi)容的 html，方便管理。
之后有時(shí)間的話，會(huì)再寫篇文章介紹一下我魔改網(wǎng)頁樣式的野路子吧，在這里就不贅述了。
在線咨詢