2015年9月8日 星期二

發布一個自己的網頁吧:github建立靜態網頁教學

中午12:19 Posted by Unknown No comments
因為我的少女時代實在太鳥了,覺得浪費230元,只好來打教學文發洩一下了
今天就教大家如何來用github建置自已的靜態網頁吧!

先給大家看個範例

http://boompieman.github.io/D3/jump_letter/test

--------何謂靜態網頁?--------
簡單說就是網頁中無互動性,不會針對每個人的互動而有所改變(EX: FACEBOOK)

所以我們可以在上面放上網頁小作品,或是一些即時資料(例如台南登革熱資料視覺化...)
--------更多資料請點此--------


首先請大家先去辦一個github帳號,關於github的教學,我簡單說一下好了

1. 進入以後,點進自己的profile

2. 進去後,點進第中間那欄Repositories,再點選New,去創一個新的專案

3. 進去後給他個名字,中間的選public(private要付費),下面兩個就隨便你
    .gitignore(請把它看成git ignore  --->  git忽略)是你之後若把專案push上來,甚麼樣的格式檔該省略,這個我們這邊不選
    Add a license是一些智慧財產權腳本,他可以免費幫你生產一些智慧財產權的聲明
我們給個專案名稱,就直接Create她吧

4. 接著會出現這個畫面,莫慌莫急莫害怕
首先我們要創建一個資料夾,接著開啟終端機先 cd(進入)那個資料夾 ,之後照著打吧!(如果是Windows請去下載git的程式,點我下載,但我沒用過,可能要自己google摸一下)

簡短說明你在幹嘛:簡單來說就是創建一個README.md的檔案,裡面寫了 # test,再把它push上來

大家若是無法的話,就自己開一個筆記本寫點東西,把她add->commit->push上來吧

5. 若是你看到你的網頁變成這樣了,就代表好了

-------截至目前為止,大家已經做好了一個github專案了,接著進入主題啦!-------

接著需要開啟終端機(terminal),一樣cd進入到你創造的資料夾,把以下的步驟打上來吧

建立一個沒有母節點,名字叫gh-pages的分支(branch)


git checkout --orphan gh-pages

在gh-pages分支中,刪除從原本分支複製到gh-pages分支的所有檔案


git rm -rf .


開啟一個筆記本存成html檔,隨便寫寫啥東西


<h1>Sam Chang is goddamn handsome.</h1>

push在github pages的網頁


git add .
git commit -a -m "test!!!!"
git push origin gh-pages

檢視github page網頁

github pages的網址結構是:http://帳號.github.io/分支名稱/檔案名稱

所以我們可以透過下列網址去檢視剛剛推上去的檔案

或是進入github頁面看
點進去後,看到的github pages網址就是了


以上就是大概的教學,github很方便的可以讓你控制版本之餘,還自動提供免費的空間給你上線,超級方便啦
大家未來可以學習網頁語言,自己去做屬於自己的個人網頁CV哦 :)

0 意見:

張貼留言