Skip to content

Latest commit

 

History

History
374 lines (235 loc) · 20 KB

terminal_tutorial.zho-tc.md

File metadata and controls

374 lines (235 loc) · 20 KB

image info

用 💖製作的 Logo,作者: CandidDeer

Tweet

Discord PRs Welcome Open Source Love


公告:

你願意成為這個專案的維護者 (maintainer) 並讓它繼續運行嗎?如果你有興趣,請閱讀維護者指南並在Twitter上私訊我。


索引表

概覽

步驟


簡介

我們將在這裡學習如何用 終端 在這個專案或是在 GitHub/Git 中貢獻。 這是一個幫助第一次貢獻者參與簡單專案的教學。

目標

  • 為一個開源專案貢獻。
  • 熟悉使用 GitHub。

這是給誰的?

  • 這是給完全初學者的。如果你知道如何寫和編輯一個錨點標籤 <a href="" target=""></a>,那你應該就做得到。
  • 這也是給那些有多一點經驗、想做出第一次開源貢獻,或是想要做出更多貢獻來提升自己的經驗與自信的人。

為什麼我要做這件事?

任何網頁開發者,不論是新手或是老手都需要使用 Git 版本控制,而 Github 是每個人都在用、最熱門的 Git 託管服務。它也是開源社群的核心。熟悉使用 GitHub 是一項基本技能。為一個專案做出貢獻能增加你的信心,並且給你一些東西放在你的 Github 個人頁面上。

如果你是一個新的開發者,而且在考慮你是否需要學 Git 和 GitHub,答案就在這篇文章:You Should've Learned Git Yesterday.

我要貢獻什麼?

Contributor Card

你將會貢獻一張像這樣的卡片到這個專案的網頁。它會包含你的名字、你的推特帳號、一段簡介、還有你推薦的三個對網頁開發實用的連結。

你將會在 HTML 檔中複製這個卡片的範本,並且用自己的資料為它客製化。


翻譯

這份教學也有其他語言的翻譯

English Bangla Ukrainian

歡迎將專案的文件翻成其他語言。閱讀翻譯指南來做出貢獻。


設置! :)

注意:如果你不擅長使用命令列介面,這裡是使用 GitHub Desktop 的圖形介面教學

首先,我們先來設置好環境。

  1. 登入你的 GitHub 帳號。如果你沒有一個帳號就加入 GitHub。我建議你在繼續之前先完成 GitHub Hello World 教學
  2. 如果你沒有 Git,在這裡下載

現在既然你都準備好了,讓我們繼續貢獻這個專案吧。

↑ 回到頂部 ↑


貢獻

用十個步驟成為一個開源貢獻者。

估計時間:少於30分鐘.

第一步:分叉此儲存庫

  • 這一步的目標是複製一份這個專案,並且放到你的帳號底下。
  • 一個儲存庫 (repo) 是一個專案在 GitHub 中的稱呼,而分叉則是它的複製品。
  • 請確認你在這個儲存庫的主頁
Fork
點擊 Fork 按鈕
  • 現在你在自己的帳號有一份這個專案的完整複製品了。

↑ 回到頂部 ↑


第二步:複製此儲存庫

  • 現在我們想要在本地複製一份這個專案。也就是你的電腦上儲存的一份複製品。

Clone

  • 現在將這個儲存庫複製到你的電腦。點 clone 按鈕,然後點複製按鈕。
  • 一個儲存庫 (repo) 是一個專案在 GitHub 中的稱呼,而分叉則是它的複製品。

打開一個終端並運行下列的 git 指令:

git clone "url you just copied"

例如:

git clone https://github.com/$Username/Contribute-To-This-Project.git

在這裡,$Username 是你的 GitHub 使用者名稱。你正在將 GitHub 上儲存庫的內容複製到你的電腦上。

↑ 回到頂部 ↑


第三步:建立一個新的分支

在你的電腦上切換到專案資料夾(如果你還沒有的話):

cd Contribute-To-This-Project

現在使用 git checkout 指令建立一個新的分支。

git checkout -b your-new-branch-name

例如:

git checkout -b add-$Username-card

注意:將 $Username 改成你的 GitHub 帳號使用者名稱。

  • 現在你已經建立了一個新的、和 master 分開的分支。
  • 在接下來的步驟,請確保你是在這個分支工作。你會在你的編輯器左下角看見目前的分支名稱,那裡寫著 $Username-card 作為你的分支名稱。

不要在 master 分支中工作

↑ 回到頂部 ↑


第四步:打開 index.html 檔案

現在我們需要用你最喜歡的程式編輯器打開我們要編輯的檔案。我們將使用 VSCode 作為我們偏好的程式編輯器。

  • index.html 檔案就在 Contribute-To-This-Project 資料夾中。
  • 你可以使用以下指令打開檔案:
code index.html

注意:這是一個在 VSCode 中打開 index.html 檔案的終端程式。

  • 現在你已經在你的編輯器中打開了你要編輯的檔案,而你已經準備好要修改它了。

↑ 回到頂部 ↑


第五步: 複製卡片範本

  • 我們會複製一份卡片的範本以修改它。
  • 在 html 檔案的最上方、 <head><header> 區域的下方,你會找到標記 == TEMPLATE == 的區域。
  • 複製圖片中紅色框內的所有東西,從 Contributor card START 註解到 Contributor card END 註解。
Copy card template
  • 把整段程式直接在要你貼上的註解下面貼上。
  • 確保你的卡片開始和結束的地方各自有一行空白。保持程式碼盡可能的乾淨是一種最佳實踐。
  • 永遠不要使用程式碼檢查工具 (linter) 或程式碼格式工具 (formatter)。這個專案有設置 Prettier。
Paste card template
  • 現在這是一張可以編輯和自訂的卡片了。

↑ 回到頂部 ↑


第六步:套用你的變更

  • 我們現在要開始編輯 html、改變我們卡片中可以自訂的欄位。
↪️ 用你的名字取代 'Name' Change name
  • 注意: 不要改動 class="name"
↪️ 插入你推特帳號的 URL href="Insert URL here",在文字欄位中填入你的用戶名稱 Change contact
  • 如果你偏好使用推特以外的聯絡方式,你會需要到 Font Awesome Icons 尋找正確的圖示,並且取代推特的圖示 <i class="fa fa-twitter"></i>。舉例來說,用新的圖示如 fa-facebook 取代 fa-twitter 的部分。然後一樣照著上面的步驟進行。
Change about
↪️ 告訴我們關於你的事情。保持簡短扼要。把它想成一則推特而非部落格文章
Change resources
↪️ 與社群分享三個你覺得對於網頁開發有用的資源連結。它可以是任何東西,一部影片、一場對話、一集 podcast、一篇文章、一篇論文,或是一個工具。如果你是一位新手,不要被它嚇到,分享你知道的任何東西,就算你覺得它很基礎也一樣。你會對於多少人能受益感到驚訝的。
  • 連結: 取代 # 並在 href="here" 插入連結。請避免使用網址縮短器或是任何不是從你要放的網站中取得的 URL!
  • 標題: 寫一個簡短的簡介 title="here".
  • 名稱: 將資源的名稱寫在文字欄位 >here</a>.
  • 確認你已經儲存了所有變更.
  • 測試你的變更。這很重要!在你的瀏覽器中打開你的 html 檔案(例如雙擊它)並查看你的卡片在網站上的樣子。看看整個頁面是不是仍然長得一樣而且沒有東西壞掉。點擊你的連結並確認它們正常運作。打開網頁控制台 (Ctrl + Shift + J (Windows / Linux) 或 Cmd + Opt + J (Mac)) 並檢查裡面是否沒有錯誤訊息。
  • 很好,你已經完成編輯你的程式了!下一步會把你的變更送到 GitHub,然後提交它們並與主專案合併。

↑ 回到頂部 ↑


第七步:提交你的變更

  • 現在在你的專案資料夾中打開終端,並運行 git status,然後你將注意到 git 中沒有做出的變更。
  • 你能使用 git-add 指令加入你做出的變更。
git add index.html
  • 現在使用 git commit 指令提交那些變更。
git commit -m "Add $Username card info"
  • 用你的 Github 使用者名稱取代 $Username

↑ 回到頂部 ↑


第八步:推送你的變更至 GitHub

  • 你的變更現在是已儲存或已提交的。但是他們只在本地中儲存,也就是在你的電腦上。
  • 將你本地的變更和 GitHub 上的儲存庫同步被稱作 推送。你在把你本地儲存庫的變更"推"到遠端 GitHub 上的儲存庫。
  • 我們使用 git push 指令來將變更推送到 github。
git push -u origin $Username-card
  • 使用你的分支名稱取代 $Username-card

  • 過了幾秒後,操作就會完成,而且現在你在你的電腦和 GitHub 上都會有著一模一樣的分支。

↑ 回到頂部 ↑


第九步:建立一個 PR(拉取請求)

  • 這就是你在等待的時刻;建立一個 拉取請求 (PR)
  • 目前為止,你所做的所有工作都是在這個專案的分叉上,就像你記得的那樣存在於你的 Github 帳號下。
  • 現在是時候把你的變更送到主專案來和它合併了。
  • 這叫做一個拉取請求,因為你在請求原專案的維護者把你的變更"拉"到他們的專案。
  • 到 GitHub 上你的分叉的主頁(它會有一個叉子圖示還有你的名字在上面)。
  • 在你的儲存庫上方,你會看到一個被標註的的拉取請求訊息和一個綠色按鈕。
Submit a Pull Request
↪️ 點擊 Compare and pull request
Open a Pull Request
↪️ 這是一個建立拉取請求頁面的樣子
  • 請記得 你正在試著把你的分支和原本專案合併,而不是與你的分叉的 Master 分支
  • 下圖讓你對於你的拉取請求應該長怎樣有一個大概的概念。
  • master 分支的左側是原本的專案。在右邊是你的分叉與你建立的分支。
Submit a Pull Request
↪️ 建立一個拉取請求:寫一個標題、在描述欄加上選擇性的資訊,並且點 Create pull request
  • 不要被其他選項嚇到。你目前只需要做這三個步驟。
  • 保持選項 Allow edits from maintainers 打勾。
  • 現在,一個 拉取請求 將會被送到專案維護者那邊。一旦它被審查和接受後,你的變更就會出現在專案網頁

↑ 回到頂部 ↑


第十步:慶祝

就是這樣。你成功了!你現在已經在 GitHub 上做出了開源貢獻。

你把程式加到了一個在線的網頁: https://syknapse.github.io/Contribute-To-This-Project

你的變更不會馬上就看得到;首先它們必須被審查、接受,並且由專案維護者合併。一旦它們被合併了,你的卡片應該能被看見而且在頁面上顯示。

被審查者要求修改 PR 是非常正常的。如果發生在你身上,可以把它想成一個非常好的練習。注意留言和要求的變更。一旦你做出了被要求的變更(在你的分支上),你所要做的事情就是提交並且推送你的變更。這個 PR 將帶著新的變更會自動更新。

我保證我會試著盡快審查和合併,但是我是在我的空閒時間做這件事的,所以幾天的延遲不可避免。

↑ 回到頂部 ↑


下一步

  • 過一段時間再回來看你已經合併的拉取請求。
  • 當你的變更被批准時,或是被要求做出額外變更時,你應該會收到 GitHub 寄的電子郵件。還有當 PR 終於與 master 合併,而且你的卡片被加入的時候。
  • 你也可以從這 免費 系列中學習怎麼貢獻:How to Contribute to an Open Source Project on GitHub
  • 如果你覺得這份專案有用,請在頁面的最上面給它一顆:star:星星:star:,並且替它發推特來幫忙宣傳。Tweet
  • 你可以在推特追蹤我和聯絡我,或是使用這些其他方法
  • 這是一個開源專案,所以除了貢獻你的卡片外,歡迎你幫忙修復 bug、改進,或是加上新功能。新增一個 issue 或是發送一個 拉取請求
  • 為了幫忙改進我們的社群,看一眼拉取請求旁的 GitHub Discussions 頁面。這個區域是一個介紹你自己、進行有關開源更深入的討論,還有和專案維護者交流的地方。你願意幫助我們建立這個功能,並改善我們的社群嗎?
  • 感謝你貢獻這個專案。現在你可以繼續試著貢獻其他專案了;尋找Good First Issue標籤以找到適合新手的貢獻選擇。
  • 我也在尋找合作者來幫助我審查與合併 PR。如果你想要有更進階的 Git 練習,請在推特上私訊我,並且閱讀維護者指南

↑ 回到頂部 ↑


致謝

這個專案受到 Roshan Jossey 出色的 first-contributions 專案,和它卓越的教學影響很大。

它也特別被 #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe 周邊優秀的社群所啟發。

前100名貢獻者

GitHub Contributors Image

↑ 回到頂部 ↑