資工問題雜筆

[資工雜筆] 用github來展示自己寫好的前端網頁

前不久,在自己的電腦上寫好了一小段的javascript,放到自己的伺服器上。每次要把成果展示給朋友看的時候,都要確認我的筆電有沒有打開,伺服器有沒有開著(因為我只有一台筆電而已,所以筆電就是我的伺服器,但怕筆電過熱,所以伺服器多半不會開)。如此一來,真的不是很方便。

今天,無聊去翻了PTTchrome的原始碼,發現其實可以用github的內建功能來展示自己寫的javascript。對於我這種沒有虛擬主機,也沒有一個常開的伺服器,但又想研究前端技術,展示給別人看的人說,算是一大福音。

github有提供一個技術,可以展示一個只含html、css 和 javascript的repository。因此理所當然,也可以用這個repository來建自己的個人部落格,只要把一些bootstrap的東西弄上去,就可以了。不過這不是這篇討論的重點。

參考下面兩篇網頁,就可以把最基本的東西建起來:

http://www.openfoundry.org/tw/foss-programs/9307-github-pages

https://www.youtube.com/watch?v=DcI6C93m0n8

第二個網址的影片是教怎麼建自己的blog,如果要展示其它repository的成果,就對想展示的repository做相同的事就好。

弄完之後,打入XXXX.github.io/repository_name/index.html,會發現根本不是顯示我們自己放的東西。這是因為他實際展示的,是在gh-pages這個branch上的東西。所以,如果要展示自己的成果,就要把程式碼替換掉原本這個branch下的東西。於是,又要去翻好久沒複習git指令了。

輸入指令

git init //初始化local git repository
git remote add origin [repository name] //local和remote做聯結
git pull origin gh-pages //把github上的東西抓下來
rm 不要的東西 //刪除我們不要的東東,也就是github預先幫我們產生的html和css檔
git add .
git commit -a
git branch gh-pages 新增一個local端的分支,叫gh-pages
git push origin gh-pages push上去github

這樣就可以了。

如此一來,只要輸入 [github name].github.io/[repository name] 即可

http://i314i.github.io/DottyCard 是我今天測試的javascript,僅僅是個測試而已,所以javascript很簡陋,也不是重點。

最後,因為這個repository是public的,所以別拿來處理任何重要資料。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s