https://github.com/qoli/5mlstudio

studio 5ml
https://github.com/qoli/5mlstudio

Last synced: 1 day ago
JSON representation

studio 5ml

• Host: GitHub
• URL: https://github.com/qoli/5mlstudio
• Owner: qoli
• License: mit
• Created: 2020-04-01T11:24:10.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-10T10:13:59.000Z (10 months ago)
• Last Synced: 2024-11-11T10:51:17.247Z (2 months ago)
• Language: TypeScript
• Homepage: https://www.5mlstudio.com
• Size: 178 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Studio 5ml

基於 Gatsby + notion 搭建的工作室網站

## deploy

需要使用 node 14 操作。

```

nvm install 14.18.2

nvm use 14.18.2

npm i

npm i -g gatsby-cli

npm run deploy

```

## Gatsby

這個「靜態站」採用了 Gatsby 開發。

為什麼採用 Gatsby？因為 Gatsby 具備大量的社區支持。

## notion - data source

gatsby-source-custom-api

https://www.gatsbyjs.org/packages/gatsby-source-custom-api/

使用 Gatsby 插件﹣定制 API 作為數據來源，其 case 數據儲存在 notion 上。

![notion view](./readme_assets/screen_01.png)

接著，使用基於「 https://notion-api.splitbee.io/v1/table/1b9b6c284ab14a858fd8ab36585234c0 」的 api 獲得 notion 表格數據。

此 api 可參考此項目 https://github.com/splitbee/notion-api-worker

## GraphQL

![GraphQL view](./readme_assets/screen_02.png)

![VS Code view](./readme_assets/screen_03.png)

GraphQL 作為一款查詢 QL 語言，是 Gatsby 推薦的。使用 GraphQL 生成器，可很方便地把 GraphQL 的數據導入代碼。

## TypeScript

本次項目也是使用了 TS 作為開發語言，TS 具有良好的代碼提示的特性，寫起來像 Swift 一樣流暢。

不過本項目很小，所以無法體現 TS 良好的可維護性質。