本篇記錄了如何通過GitHub Page發(fā)布個人網(wǎng)頁,所以適合以下設(shè)計師閱讀:
-
有一定前端知識;
-
想在網(wǎng)頁上顯示點什么又不想麻煩去折騰域名和服務(wù)器;
-
有Mac電腦,我還沒研究Windows。
相關(guān)文章有很多,官網(wǎng)也寫得很詳細,我寫得有點啰嗦了,因為是第一篇關(guān)于GitHub的文章所以盡量介紹詳細點,避免日后查。之后還會寫一篇用GitHub搭建靜態(tài)博客,也就是CMS(內(nèi)容管理系統(tǒng))的文章。
以下正文:
1.起源最早學習前端的時候就寫過一些頁面,也想自己部署到服務(wù)器上,但是又不想折騰域名和服務(wù)器(域名要購買還要備案,服務(wù)器也需要購買)。所以一直沒有做這件事,準備簡歷的時候放的也是本地的代碼。
直到前兩天,因為公司官網(wǎng)下線無法訪問(公司官網(wǎng)是我寫的一個靜態(tài)頁面),所以才想是否還有別的方式可以展示,于是找到這么個神器GitHub Page。GitHub都不陌生,畢竟全球最大男性交友網(wǎng)站世界上最大的代碼存放網(wǎng)站和開源社區(qū)1。它旗下GitHub Page更是可以免費托管你的靜態(tài)頁面,雖說空間不限,但據(jù)說體積要控制在1G以下2。
折騰了半天總算是成功發(fā)布了頁面,官方文檔介紹得也非常詳細,以下是我操作過后的具體步驟。
2.注冊GitHub賬號注冊地址:https://github.com/join?source=login
自行注冊。
3.創(chuàng)建Git倉庫(Repository)點擊右上角的加號創(chuàng)建倉庫
填寫倉庫名稱就可以點擊下面的綠色按鈕創(chuàng)建了。
其中:
-
Description——倉庫描述,選填;
-
Public,Private——GitHub限制免費用戶只能創(chuàng)建公開倉庫;
-
Initialize this repository with a README——初始化倉庫時添加README,readme是一個說明文件,用markdown語法編寫,打上勾的話就默認添加了這個文件,如果不打勾后期也可以自己添加;
創(chuàng)建好倉庫后顯示下圖頁面,點擊紅框標記按鈕復(fù)制倉庫地址。
這時候需要用到Git命令了 ,Git是一個分布式版本控制軟件3,我們就通過Git命令來同步和管理代碼。
Git的安裝參考這篇文章:安裝Git
安裝好之后初次運行Git需要做一些配置:
-
打開系統(tǒng)自帶的Terminal;
-
設(shè)置username和email,github每次commit(提交代碼)都會記錄他們,在Terminal中分別輸入以下代碼;
git config --global user.name "你的用戶名"git config --global user.email "你的郵箱"
-
一般來說這樣就可以了,如果考慮到傳輸安全的問題,可以考慮加上SSH協(xié)議,具體操作可以搜索“SSH keys Git”關(guān)鍵詞。
配置完Git之后,選擇一個本地文件夾來存放你的云端倉庫,回頭要把云端的倉庫克隆到這里。比如下圖我選擇了Front這個文件夾。
輸入以下命令,其中cd(Change directory)意為切換目錄到...:
cd 文件夾地址
其中文件夾地址不一定要手輸,直接把文件夾拖到Terminal里面也行,按下回車。
再輸入以下代碼把云端倉庫克隆下來,倉庫地址為之前第3步復(fù)制下來的地址。
git clone 倉庫地址
此時你的倉庫根目錄下應(yīng)該已經(jīng)有克隆下來的倉庫了,倉庫里什么也沒有。
5.上傳文件到云端倉庫到這步,我們需要在本地庫中添加些東西,官方文檔中是直接用命令把文件寫進去:
-
首先切換本地目錄到克隆下來的庫;
cd 庫標題
-
新建一個index.html文件,并在里面寫入Hello World。
echo "Hello World" > index.html
當然我們也可以直接把文件拷到到本地庫文件夾下,或者在里面創(chuàng)建。注意這個文件夾下一定要有一個index.html文件,這里默認讀者會點html,不解釋了。
接下來就可以把文件上傳到云端倉庫了,在Terminal中輸入以下命令:
-
把該文件夾下所有文件納入版本管理;
git add .
-
commit代碼,把代碼的一個版本提交到本地;
git commit -m "版本日志"
-
push代碼,把代碼推(上傳)到云端倉庫,稍等一會兒就好了。
git push -u origin master
這時我們已經(jīng)成功將index.html文件推到云端倉庫了,再一步就能大功告成,點擊下圖紅框標記進入Setting頁面:
拉到下面的GitHub Pages部分,按下圖所示選擇master branch(主分支),點擊save。
刷新頁面之后再回到GitHub Pages部分,可以看到頁面已經(jīng)發(fā)布,點擊鏈接進入就大功告成啦!
7.結(jié)尾后續(xù)的修改只需要重復(fù)第5步就可以了,代碼如下:
cd 本地庫目錄 git add . git commit -m "版本日志"git push -u origin master
GitHub還有很多好功能有待開發(fā),善于利用搜索引擎,have fun~