只要 10 分鐘！用 Docusaurus 輕鬆打造專案文件網站

Docusaurus.io 是 Facebook 為了便於內部開源專案建立網站所需而打造的靜態網站產生器，可以透過 Markdown 語法輕鬆編寫文件或部落格，並透過內建的 Algolia DocSearch 和 i18n 翻譯、Versioning 等功能快速建好基本功能完善的網站。

Transcript

1. Clement Tang Lead, Facebook Developer Circle: Taipei 只要 10 分鐘！ ⽤用 Docusaurus 輕鬆 打造專案⽂文件網站
2. Speaker Bio Facebook DevC: Taipei Lead Chatbot.tw 社團發起⼈人 91APP Project Manager - Product Go-To-Market - Customer Success Management - Facebook Projects @Clementtang
3. Docusaurus Easy to Maintain Open Source Documentation Websites Docusaurus
4. www.facebook.com/groups/DevCTaipei Docusaurus Facebook 的開源⽂文件網站⼯工具 https://docusaurus.io
   4
5. 背景故事 ⼩小恐龍的誕⽣生 Source: https://docusaurus.io/blog/2017/12/14/introducing-docusaurus • 早期 Facebook 開源團隊每次要開⼀一個新專 案都要重刻⼀一個網站 • 後來來決定採⽤用 Jekyll 和複製樣板的做法 • 但隨著專案變多開始碎片化且版型不易易更更新 • 為了了可以共享基本樣式但⼜又具備⾃自主性於是 ⼩小恐龍 Docusaurus 就誕⽣生了了！
6. www.facebook.com/groups/DevCTaipei
   6 優勢與亮點 https://docusaurus.io/docs/en/search https://docusaurus.io/docs/en/translation https://docusaurus.io/docs/en/versioning 可搜尋、多語系、多版本
7. www.facebook.com/groups/DevCTaipei 安裝時間 其實應該不⽤用 10 分鐘
   7
8. www.facebook.com/groups/DevCTaipei
   8 ⼿手把⼿手安裝 1. 環境設置 Node >= 8.x 2. 安裝 npx docusaurus-init Yarn >= 1.5 及
9. www.facebook.com/groups/DevCTaipei
   9 ⼿手把⼿手安裝 3. 資料夾改名 mv docs-examples-from-docusaurus docs mv blog-examples-from-docusaurus blog 4. ⽬目錄切換⾄至 website 並啟動 cd website yarn start 並
10. www.facebook.com/groups/DevCTaipei
    10 root-directory ├── docs │ ├── doc1.md │ ├── doc2.md │ ├── doc3.md └── website ├── blog │ ├── 2016-03-11-blog-post.md │ ├── 2017-04-10-blog-post-two.md │ ├── 2017-09-25-testing-rss.md ├── core │ └── Footer.js ├── package.json ├── pages ├── sidebars.json ├── siteConfig.js └── static ⽬目錄結構 採⽤用 markdown 語法編輯⽂文件 docs ⽂文件⾴頁 website/blog 部落落格⽂文章 website/core 元件 website/pages ⾃自訂⾴頁⾯面 website/static 圖、CSS sidebars.json 控制側欄欄 siteConfig.js 控制設定
11. www.facebook.com/groups/DevCTaipei
    11 在本機端瀏覽 http://localhost:3000 並提供 Live Reload ⾃自動重整
12. www.facebook.com/groups/DevCTaipei
    12 新增⽂文件 1. 在 /docs 建立⼀一個 .md 檔案 2. 檔案開頭⾄至少要有 id 和 title --- id: intro title: Hello World! sidebar_label: My first document --- 新⽂文件內容...
13. www.facebook.com/groups/DevCTaipei
    13 加入側欄欄 在 sidebars.json 維護側欄欄 { "docs": { "Getting Started": ["intro"], "First Category": ["doc1"], "Second Category": ["doc2"], }, "docs-other": { "First Category": ["doc4", "doc5"] } }
14. www.facebook.com/groups/DevCTaipei
    14 加入導覽列列 在 siteConfig.js 將⽂文件加入導覽列列 { headerLinks: [ ... { doc: 'intro', label: 'Hello!' }, ... ], ... }
15. www.facebook.com/groups/DevCTaipei
    15 加入搜尋 { algolia: { apiKey: 'my-api-key', indexName: 'my-index-name' }, ... }, ... } Algolia DocSearch 1. 去 Algolia 免費註冊全⽂文檢索服務 2. 在 siteConfig.js 加入 Algolia Key
16. www.facebook.com/groups/DevCTaipei
    16 版本更更新 yarn upgrade docusaurus --latest
17. www.facebook.com/groups/DevCTaipei
    17 靜態發布 在 website ⽬目錄下執⾏行行 yarn run build 會將 /docs 和 /pages 內⽂文件產出 .html 檔並放在 build 資料夾內
18. www.facebook.com/groups/DevCTaipei
    18 gh-pages 1. 在 siteConfig.js 確認以下參參數 { ... organizationName: ‘GitHub 使⽤用者或組織’, projectName: ‘Repo 名稱’, … }
19. www.facebook.com/groups/DevCTaipei
    19 gh-pages 2. 確認以下環境變數 GIT_USER USE_SSH 及 3. 發佈 yarn run publish-gh-pages
21. DevC Taipei Leads DevC Taipei Leads https://developers.facebook.com/developercircles/lead-profiles/
22. 計畫⽬目的 Code, Learn, Code 希望藉由社群的形式，讓開發⼈人員能互相合作、分享 知識，因為我們希望讓世界各地的開發⼈人員彼此交流， 以及從 Facebook 既有的產品、服務和最佳作法獲得 助益。
23. 計畫⽬目標 計畫概覽 ⼯工具、教學、Facebook 產品 深入介紹以及最佳開發典範 教育 賦能 來來⾃自社群的知識分享與資訊 讓更更多開發者能⼀一起打造 成功的應⽤用和商業模式 賦權
24. 為什什麼要加入 Circle？ 瞭解 Bot、AR/VR、 AI、IoT、React 等⼯工具 瞭解最新科技 每個社群都是由同樣⾝身 為在地開發者的 Lead 去規劃與經營 與當地專家交流 與各類型的開發者攜⼿手 合作⼀一起打造新產品 與其他開發者合作 加入在地專屬的 Facebook 社團並出 席附近的 Meetup 與其他開發者連結 計畫概覽
25. Developer Circles from Facebook 不會 是... 由某個組織營運 ⼀一個會聽到業務 推銷的地⽅方 討論非技術問題的論壇 單向的資訊傳遞 Facebook 的⾓角⾊色
26. Facebook 會如何提供協助？ Facebook 的⾓角⾊色 Program infrastructure enabling scale and community growth Education curriculum delivered in Groups accessible to all community members Establish relationships with local startups and tech hubs to create pipeline of opportunities and resources
27. 最新的全球推廣重點 Developer Circles 如何幫助到跟你⼀一樣的開發者 與在地政府部⾨門合作，舉辦以公益解決⽅方案為主的 ⿊黑客松。 ⼀一個能夠打造應⽤用的社群，並運⽤用 Facebook 平台 來來提供開發者的實作學習。 由社群協⼒力力的專家和 Facebook 的開發者⽀支援團 隊提供針對開發者的協助 70+ 個遍佈全球的國家 117+ 活躍的 Developer Circles 社群 100K+ 遍佈全球的開發者
28. 除了了印度和印尼外，台北⽬目前是 亞太區前幾⼤大的 Developer Circle 城市社群。 2,400+ 社團成員 雖然還沒達成每個⽉月⼀一場聚會， 但我們盡量量做到了了兩兩個⽉月⼀一場， 還承辦了了兩兩次⼤大型活動。 7 場 Meetup 1 場 HackDay，1 場 BuildDay 我們的成果 ⾃自 2017-04 成立⾄至今，我們做到了了什什麼？ DevC Taipei 2017
29. 台灣需要更更多 DevC！ 歡迎台中、台南、⾼高雄甚⾄至東部地區熱⾎血開發者朋友與我們聯聯繫 Looking Forward to 2018
31. 使⽤用⾄至少⼀一項 Facebook 產品或技術 https://developers.facebook.com/products
32. 打造可以連結社群的解決⽅方案
33. Bridge on and offline experiences 結合線上與線下體驗 Build and grow community 建立社群並協助成長 Drive engaging communities 推動社群參參與 Bonus Prize Community Challenge 2018
34. Community Challenge 2018
35. 7/26 截⽌止
36. Register https://devcommunitychallenge.devpost.com/ 請⾄至 Devpost 完成報名，家鄉選台北！
37. Thank You