iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Modern Web

從前端走到設計,下一步?系列 第 20

Day20-GitHub 讓我的作品被看見

  • 分享至 

  • xImage
  •  

Git 統整平臺

我後悔為什麼我要訂這個我幾乎不會寫的題目,但我又想不到新題目了哭。

累積了一些小作品後,為了有個平臺能夠統整,於是選擇了 GitHub。
它除了可以存放程式碼,其實也是可以放一般文字檔的,甚至有一些設計師也會把圖片放在這裡。

GitHub 看起來就是跟 Git 有關。前面有提過 Git 是版本控制系統,而 GitHub 就是 Git 的其中一個平臺,類似的服務有 GitLab、Gogs、BitBucket......等等等,很多其實我也沒聽過 (#
Anyway,最後選擇了 GitHub 純粹也只是因為身邊比較多人用 GitHub 這樣而已。

Repository

(遮起來的是我的帳號)
最一開始可以新增 Repository ,也就是一個存放庫的概念。一個帳號裡可以開很多個 Repository,而一個 Repository 裡面放的就是一個專案。

建立完 Repository 後就可以開始把自己的 code 專案放進去囉。
Git 的前置設定請自行 Google,因為我只設定過一次,所以我也忘了QQ

如果你順利把自己的 code push 上去,那就可以看到類似這樣的畫面。

可以看到的是不只可以推 .html、.css、.js 檔,.png,甚至是 .txt 等都可以,所以 Git 並不是一個工程師專屬的工具,只是對工程師而言非常方便而已。

Commit

前面有提到,如果你跟你的隊友有一份期末報告要一起編輯,與其在檔名後面不斷的 v1、v2、v3......下去,但從檔名也看不出 v1 跟 v2 的差別,這時候就是 commit 上場的時候了。

在每一次的 commit 也就是將 version 又更新了一次,commit 的內容可以打像是你這次改了什麼,例如:「改第三行錯字」、「加圖表目錄」,類似這種小筆記讓你還不用打開檔案就知道這次編輯的歷程紀錄。

像我就寫一些,我成功串了資料就會記一次 commit、把版刻完也會記一次、加了篩選的功能也會記一次。

GitHub Pages

因為我寫的都是靜態網頁,因此 GitHub Pages 是一個再適合不過的選擇。
在 code 推上去之後,GitHub 可以呈現靜態網頁。

紅色框的部分預設通常是 None,因此要特地打開成 Master branch,GitHub 就會將你的 code 產生成靜態網頁的網址囉!

這樣的好處也能確保有些東西在自己本機上看到正確的東西,推上公共平臺後不一定也是正確的,如此的 Double Check 就更能確保自己的 code 沒有問題呢。

只要有了網址,你的作品就可以不受侷限地被所有人看見囉。


上一篇
Day19-何方神聖的 Git
下一篇
Day21-設計與程式的距離
系列文
從前端走到設計,下一步?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言