Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Clement Tang

July 18, 2018
Tweet

More Decks by Clement Tang

Other Decks in Technology

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. 背景故事 ⼩小恐龍的誕⽣生 Source: https://docusaurus.io/blog/2017/12/14/introducing-docusaurus • 早期 Facebook 開源團隊每次要開⼀一個新專 案都要重刻⼀一個網站 •

    後來來決定採⽤用 Jekyll 和複製樣板的做法 • 但隨著專案變多開始碎片化且版型不易易更更新 • 為了了可以共享基本樣式但⼜又具備⾃自主性於是 ⼩小恐龍 Docusaurus 就誕⽣生了了!
  4. 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 控制設定
  5. www.facebook.com/groups/DevCTaipei 12 新增⽂文件 1. 在 /docs 建立⼀一個 .md 檔案 2.

    檔案開頭⾄至少要有 id 和 title --- id: intro title: Hello World! sidebar_label: My first document --- 新⽂文件內容...
  6. www.facebook.com/groups/DevCTaipei 13 加入側欄欄 在 sidebars.json 維護側欄欄 { "docs": { "Getting

    Started": ["intro"], "First Category": ["doc1"], "Second Category": ["doc2"], }, "docs-other": { "First Category": ["doc4", "doc5"] } }
  7. www.facebook.com/groups/DevCTaipei 15 加入搜尋 { algolia: { apiKey: 'my-api-key', indexName: 'my-index-name'

    }, ... }, ... } Algolia DocSearch 1. 去 Algolia 免費註冊全⽂文檢索服務 2. 在 siteConfig.js 加入 Algolia Key
  8. www.facebook.com/groups/DevCTaipei 17 靜態發布 在 website ⽬目錄下執⾏行行 yarn run build 會將

    /docs 和 /pages 內⽂文件產出 .html 檔並放在 build 資料夾內
  9. www.facebook.com/groups/DevCTaipei 18 gh-pages 1. 在 siteConfig.js 確認以下參參數 { ... organizationName:

    ‘GitHub 使⽤用者或組織’, projectName: ‘Repo 名稱’, … }
  10. 為什什麼要加入 Circle? 瞭解 Bot、AR/VR、 AI、IoT、React 等⼯工具 瞭解最新科技 每個社群都是由同樣⾝身 為在地開發者的 Lead

    去規劃與經營 與當地專家交流 與各類型的開發者攜⼿手 合作⼀一起打造新產品 與其他開發者合作 加入在地專屬的 Facebook 社團並出 席附近的 Meetup 與其他開發者連結 計畫概覽
  11. 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
  12. 最新的全球推廣重點 Developer Circles 如何幫助到跟你⼀一樣的開發者 與在地政府部⾨門合作,舉辦以公益解決⽅方案為主的 ⿊黑客松。 ⼀一個能夠打造應⽤用的社群,並運⽤用 Facebook 平台 來來提供開發者的實作學習。

    由社群協⼒力力的專家和 Facebook 的開發者⽀支援團 隊提供針對開發者的協助 70+ 個遍佈全球的國家 117+ 活躍的 Developer Circles 社群 100K+ 遍佈全球的開發者
  13. Bridge on and offline experiences 結合線上與線下體驗 Build and grow community

    建立社群並協助成長 Drive engaging communities 推動社群參參與 Bonus Prize Community Challenge 2018