用 💖製作的 Logo,作者: CandidDeer
你願意成為這個專案的維護者 (maintainer) 並讓它繼續運行嗎?如果你有興趣,請閱讀維護者指南並在Twitter上私訊我。
- 貢獻
- 第一步:分叉此儲存庫
- 第二步:複製此儲存庫
- 第三步:建立一個新的分支
- 第四步:打開 index.html 檔案
- 第五步: 複製卡片範本
- 第六步:套用你的變更
- 第七步:提交你的變更
- 第八步:推送你的變更至 GitHub
- 第九步:建立一個 PR
- 第十步:慶祝
我們將在這裡學習如何用 終端 在這個專案或是在 GitHub/Git 中貢獻。 這是一個幫助第一次貢獻者參與簡單專案的教學。
- 為一個開源專案貢獻。
- 熟悉使用 GitHub。
- 這是給完全初學者的。如果你知道如何寫和編輯一個錨點標籤
<a href="" target=""></a>
,那你應該就做得到。 - 這也是給那些有多一點經驗、想做出第一次開源貢獻,或是想要做出更多貢獻來提升自己的經驗與自信的人。
任何網頁開發者,不論是新手或是老手都需要使用 Git 版本控制,而 Github 是每個人都在用、最熱門的 Git 託管服務。它也是開源社群的核心。熟悉使用 GitHub 是一項基本技能。為一個專案做出貢獻能增加你的信心,並且給你一些東西放在你的 Github 個人頁面上。
如果你是一個新的開發者,而且在考慮你是否需要學 Git 和 GitHub,答案就在這篇文章:You Should've Learned Git Yesterday.
你將會貢獻一張像這樣的卡片到這個專案的網頁。它會包含你的名字、你的推特帳號、一段簡介、還有你推薦的三個對網頁開發實用的連結。
你將會在 HTML 檔中複製這個卡片的範本,並且用自己的資料為它客製化。
這份教學也有其他語言的翻譯
English | Bangla | Ukrainian |
---|
歡迎將專案的文件翻成其他語言。閱讀
翻譯指南
來做出貢獻。
注意:如果你不擅長使用命令列介面,這裡是使用 GitHub Desktop 的圖形介面教學。
首先,我們先來設置好環境。
- 登入你的 GitHub 帳號。如果你沒有一個帳號就加入 GitHub。我建議你在繼續之前先完成 GitHub Hello World 教學。
- 如果你沒有 Git,在這裡下載。
現在既然你都準備好了,讓我們繼續貢獻這個專案吧。
用十個步驟成為一個開源貢獻者。
估計時間:少於30分鐘.
- 這一步的目標是複製一份這個專案,並且放到你的帳號底下。
- 一個儲存庫 (repo) 是一個專案在 GitHub 中的稱呼,而分叉則是它的複製品。
- 請確認你在這個儲存庫的主頁。
點擊 Fork 按鈕 |
- 現在你在自己的帳號有一份這個專案的完整複製品了。
- 現在我們想要在本地複製一份這個專案。也就是你的電腦上儲存的一份複製品。
- 現在將這個儲存庫複製到你的電腦。點 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
分支中工作
現在我們需要用你最喜歡的程式編輯器打開我們要編輯的檔案。我們將使用 VSCode 作為我們偏好的程式編輯器。
index.html
檔案就在Contribute-To-This-Project
資料夾中。- 你可以使用以下指令打開檔案:
code index.html
注意:這是一個在 VSCode
中打開 index.html
檔案的終端程式。
- 現在你已經在你的編輯器中打開了你要編輯的檔案,而你已經準備好要修改它了。
- 我們會複製一份卡片的範本以修改它。
- 在 html 檔案的最上方、
<head>
和<header>
區域的下方,你會找到標記== TEMPLATE ==
的區域。 - 複製圖片中紅色框內的所有東西,從
Contributor card START
註解到Contributor card END
註解。
- 把整段程式直接在要你貼上的註解下面貼上。
- 確保你的卡片開始和結束的地方各自有一行空白。保持程式碼盡可能的乾淨是一種最佳實踐。
- 永遠不要使用程式碼檢查工具 (linter) 或程式碼格式工具 (formatter)。這個專案有設置 Prettier。
- 現在這是一張你可以編輯和自訂的卡片了。
- 我們現在要開始編輯 html、改變我們卡片中可以自訂的欄位。
↪️ 用你的名字取代 'Name' |
---|
- 注意: 不要改動
class="name"
↪️ 插入你推特帳號的 URL href="Insert URL here" ,在文字欄位中填入你的用戶名稱 |
---|
- 如果你偏好使用推特以外的聯絡方式,你會需要到 Font Awesome Icons 尋找正確的圖示,並且取代推特的圖示
<i class="fa fa-twitter"></i>
。舉例來說,用新的圖示如fa-facebook
取代fa-twitter
的部分。然後一樣照著上面的步驟進行。
↪️ 告訴我們關於你的事情。保持簡短扼要。把它想成一則推特而非部落格文章 |
↪️ 與社群分享三個你覺得對於網頁開發有用的資源連結。它可以是任何東西,一部影片、一場對話、一集 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 上的儲存庫。
- 我們使用
git push
指令來將變更推送到 github。
git push -u origin $Username-card
-
使用你的分支名稱取代
$Username-card
。 -
過了幾秒後,操作就會完成,而且現在你在你的電腦和 GitHub 上都會有著一模一樣的分支。
- 這就是你在等待的時刻;建立一個 拉取請求 (PR)
- 目前為止,你所做的所有工作都是在這個專案的分叉上,就像你記得的那樣存在於你的 Github 帳號下。
- 現在是時候把你的變更送到主專案來和它合併了。
- 這叫做一個拉取請求,因為你在請求原專案的維護者把你的變更"拉"到他們的專案。
- 到 GitHub 上你的分叉的主頁(它會有一個叉子圖示還有你的名字在上面)。
- 在你的儲存庫上方,你會看到一個被標註的的拉取請求訊息和一個綠色按鈕。
↪️ 點擊 Compare and pull request |
↪️ 這是一個建立拉取請求 頁面的樣子 |
- 請記得 你正在試著把你的分支和原本專案合併,而不是與你的分叉的
Master
分支。 - 下圖讓你對於你的拉取請求應該長怎樣有一個大概的概念。
- master 分支的左側是原本的專案。在右邊是你的分叉與你建立的分支。
↪️ 建立一個拉取請求:寫一個標題、在描述欄加上選擇性的資訊,並且點 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:,並且替它發推特來幫忙宣傳。
- 你可以在推特追蹤我和聯絡我,或是使用這些其他方法
- 這是一個開源專案,所以除了貢獻你的卡片外,歡迎你幫忙修復 bug、改進,或是加上新功能。新增一個 issue 或是發送一個 拉取請求。
- 為了幫忙改進我們的社群,看一眼拉取請求旁的 GitHub Discussions 頁面。這個區域是一個介紹你自己、進行有關開源更深入的討論,還有和專案維護者交流的地方。你願意幫助我們建立這個功能,並改善我們的社群嗎?
- 感謝你貢獻這個專案。現在你可以繼續試著貢獻其他專案了;尋找標籤以找到適合新手的貢獻選擇。
- 我也在尋找合作者來幫助我審查與合併 PR。如果你想要有更進階的 Git 練習,請在推特上私訊我,並且閱讀維護者指南。
這個專案受到 Roshan Jossey 出色的 first-contributions 專案,和它卓越的教學影響很大。
它也特別被 #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe 周邊優秀的社群所啟發。