iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~ 系列

在這 30 天想要製作最近很紅的 no-code (無程式碼) 網頁~

身為喜歡寫程式的工程師,這次想挑戰的並不是使用 no-code 平台實作一個網頁出來,而是自己手刻製作無程式碼的個人網頁。什麼意思?我會:
- 用 Next.js 做整個網頁
- 串各種 API 顯示資料當網頁內容
- 部署

那 no-code 的點在哪呢?這網頁不需要更新或編輯,都會自動拿到最新資料,而且做完之後大家都可以拿來用做自己的個人網頁!所以 no-code 是未來(開發完)的事,也是對其他人來說應該是 no-code 沒錯XD

歡迎看看我的無程式碼之旅 <3

鐵人鍊成 | 共 30 篇文章 | 24 人訂閱 訂閱系列文 RSS系列文
DAY 11

#11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

哈囉!昨天使用 SWR 實作了一個小功能,讓使用者可以列出某 Github user 的所有公開 repository~ 今天用 Notion SDK 新增了一...

2021-09-26 ‧ 由 Jade 分享
DAY 12

#12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser

嗨嗨嗨!昨天使用 Notion SDK 顯示我的 Notion page 裡面的內容,可以在這裡看看喔。那今天新增了一個新的頁面,使用 RSS 顯示iT邦幫忙系...

2021-09-27 ‧ 由 Jade 分享
DAY 13

#13 No-code 之旅 — 簡單快速開發漂亮的 React 元件 ft. Chakra UI

今天來點不一樣的!來講一個我最近常用的 React UI component library,就是 Chakra UI~ 講到 React,很多人會想到 Mat...

2021-09-28 ‧ 由 Jade 分享
DAY 14

#14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化?

繼續昨天的主題,該怎麼用 Chakra UI 做開發呢?現成的元件該怎麼去做客製化?專案有定設計系統 (design system),那怎麼跟 Chakra U...

2021-09-29 ‧ 由 Jade 分享
DAY 15

#15 No-code 之旅 — 期中小結

系列文總共有了 14 篇文章,除了第一篇的系列文介紹之外,幾乎是技術相關的簡介。談了 Next.js 的各種用法,還有一些 API 的串接,也講到一點點 Rea...

2021-09-30 ‧ 由 Jade 分享
DAY 16

#16 No-code 之旅 — Project Setup

嗨嗨~ 今天比較晚下班,還沒寫文章也還沒寫專案XD 今天先建立專案好了~ 週末再趕進度! Setup 這專案想要用 Next.js + TypeScript...

2021-10-01 ‧ 由 Jade 分享
DAY 17

#17 No-code 之旅 — 專案架構

今天先建立專案,還有開始慢慢地定架構,裝 dependencies ~ Setup 這專案想要用 Next.js + TypeScript 寫,所以用下面指令...

2021-10-02 ‧ 由 Jade 分享
DAY 18

#18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK

嗨大家~ 像昨天文章裡提的,這專案會採用 Notion 來當 CMS (包含資料庫),意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以,這專案需...

2021-10-03 ‧ 由 Jade 分享
DAY 19

#19 No-code 之旅 — Avatars Libraries

嗨~ 今天來個比較特別的主題,Avatars libraries。很多時候我們需要顯示一些頭貼,有的是用 Google,Facebook,Github,等其他服...

2021-10-04 ‧ 由 Jade 分享
DAY 20

#20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee

嗨!今天的主題是加 analytics 到網站 (專案) 裡~ 講到 analytics,大家通常會想到 Google Analytics,所以今天會分享怎麼加...

2021-10-05 ‧ 由 Jade 分享