iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

從 0 開始建一個 Static Site Generator 系列

這系列主要會從 0 開始打造一個建立在 React 之上的 Static Site Generator ,在這過程中我們可以認識到 server render 究竟是如何實作的,了解如何寫出同時支援 Server Side Render 與 Client Side Render 的程式,也會碰到一些 GraphQL ,一步步的打造出我們自己的 Static Site Generator,再看看 `Gatsby` 還有什麼不錯的功能,也把它給抄過來,最後也會來提一下 Vue 的 server render 要怎麼直接使用

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

Day 1: 前言

不知各位有沒有聽過 JAMStack ? JAMStack 就是 JavaScript, API, Markup 合在一起的一種稱呼,是一種新的(?)或說是幫已...

2020-09-16 ‧ 由 DanSnow 分享
DAY 2

反樸歸真的前端

會取這樣的標題是因為我覺得,原本的網頁只是純粹展示內容的 html ,到後來動態網頁的出現,管理大量的內容可以不用再一個個的檔案維護,而可以交給資料庫與樣版引擎...

2020-09-17 ‧ 由 DanSnow 分享
DAY 3

Day 3: React 介紹與建構環境

這篇與之後的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-gene...

2020-09-18 ‧ 由 DanSnow 分享
DAY 4

Day 4: 介紹 Server Side Render

React 的 server side renderer 是在 react-dom 這個套件的 react-dom/server 下,API 就只包含 4 個函...

2020-09-19 ‧ 由 DanSnow 分享
DAY 5

Day 5: 實作第一個頁面

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

2020-09-20 ‧ 由 DanSnow 分享
DAY 6

Day 6: 介紹 React Router 與實作文章頁面

如果你有寫過 React ,那你很可能會知道 React Router ,它幾乎可說是用 React 寫 SPA 必備的一個函式庫,雖然現在其實還有另一個 @r...

2020-09-21 ‧ 由 DanSnow 分享
DAY 7

Day 7: 在 Server 使用 React Router

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

2020-09-22 ‧ 由 DanSnow 分享
DAY 8

Day 8: Redux 與準備資料來源的 API

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

2020-09-23 ‧ 由 DanSnow 分享
DAY 9

Day 9: 在 Server 使用 Redux

這次因為要做出像在 client 一樣從 API 取得資料,所以上次的 store 不能直接使用,要準備一個新的,不過 Entity Adapter 的部份是可...

2020-09-24 ‧ 由 DanSnow 分享
DAY 10

Day 10: 將我們的 SSG 變成獨立的套件

從這篇開始,程式碼的目錄結構會有很大的變化,在這之前我們都把 SSR 與我們自己的 blog 的程式碼混在一起,但這系列是要做出一個通用的 SSG ,所以之後會...

2020-09-25 ‧ 由 DanSnow 分享