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 21

#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介

大家有沒有發現當有人在社群軟體分享網址的時候,通常除了網址本身還會看到一張縮圖加上網站的標題和描述?這就是用 Open Graph (OG) 設定出來的!今天會...

2021-10-06 ‧ 由 Jade 分享
DAY 22

#22 No-code 之旅 — 靜態網站可以部署到哪裡?~

大家~ 今天文章會特別短Q 來講一下靜態網站可以部署到哪裡呢?大家應該常聽到 Github Pages,不過其實還有很多服務可以用!那今天我會列幾個好用而且免費...

2021-10-07 ‧ 由 Jade 分享
DAY 23

#23 No-code 之旅 — Next.js 網站可以部署到哪裡呢?

大家~ 今天文章會也會很短Q 昨天講了靜態網站可以部署到哪裡之後,今天來講 Next.js 的專案可以部署到哪?Next.js 專案基本上是用 Node.js...

2021-10-08 ‧ 由 Jade 分享
DAY 24

#24 No-code 之旅 — 在 Next.js 專案中實作 API

嗨大家!今天在串 Notion SDK 時因為想要實作 pagination (分頁) 的關係,才發現在 client-side 呼叫會遇到 CORS 問題。這...

2021-10-09 ‧ 由 Jade 分享
DAY 25

#25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR

嗨大家!像昨天說的,今天會講怎麼用 SWR 實作 Notion 部落格的 pagination (分頁) 功能~ 還沒看昨天的文章的大家,可以點這裡,今天的文章...

2021-10-10 ‧ 由 Jade 分享
DAY 26

#26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

連假結束了Q 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看!我們會用 Chakra UI 去實作 dark...

2021-10-11 ‧ 由 Jade 分享
DAY 27

#27 No-code 之旅 — 客製化 Favicon ~

嗨嗨!今天來講一下怎麼設定網站的 favicon!還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔!還不知道什麼是 favicon...

2021-10-12 ‧ 由 Jade 分享
DAY 28

#28 No-code 之旅 — 客製化 Next.js 的錯誤頁面

嗨!因為最近系列文快要結束了,所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項,其中一項就是...

2021-10-13 ‧ 由 Jade 分享
DAY 29

#29 No-code 之旅 — 部署至 Vercel

哇 倒數一天!最近都在準備把專案推上去 production 了,大家可以看看 Next.js 整理的推上 production 之前的注意事項。我們今天來走一...

2021-10-14 ‧ 由 Jade 分享
DAY 30

#30 No-code 之旅 — 恭喜完賽!

最後一天!禮拜五快樂!恭喜大家完賽!恭喜自己XD 今天來回頭看看我們這三十天學了哪些事,還有講一下未來規劃~ 回顧 來回顧一下這 30 天的文章: 系列文...

2021-10-15 ‧ 由 Jade 分享