iT邦幫忙

鐵人檔案

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

雖然你不是木村拓哉,但它也可以讓你變很行 - Gatsby.js 系列

來聊聊關於 React 的 SEO Solution 吧 !
預計想存十五篇稿再來優雅地挑戰鐵人賽卻一篇都沒存的勇者,
希望能成功活著完賽。

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

[Day 11] - 靜態查詢 ( Static Query )

[Day 11] - 靜態查詢 ( Static Query ) 今天我們要來談談有別於頁面查詢的另一種方法,叫做靜態查詢 ( Static Query ),至...

2020-09-26 ‧ 由 chasel1020 分享
DAY 12

[Day 12] - GraphiQL 與 Filesystem

前兩天我們都在提如何撈取資料到站點內,就有細心的讀者會問,但我不太會寫 GraphQL 啊,有沒有相關的輔助工具能幫忙我開發呢? 嘿,沒錯,那就是今天的主題 G...

2020-09-27 ‧ 由 chasel1020 分享
DAY 13

[Day 13] - 建置第一個 Blog - 文章列表

昨天藉由 gatsby-source-filesystem 這套外掛,我們能看到在 Folder底下諸多 File 的詳細資料,也藉這些資料製作了簡單的畫面,今...

2020-09-28 ‧ 由 chasel1020 分享
DAY 14

[Day 14] - 建置第一個 Blog - 文章內頁 ( 上 )

[Day 14] - 建置第一個 Blog - 文章內頁 在前一篇文章中,我們建立了一個還不錯的列表頁,但我們絕對不滿足於此,今天,我們要用更聰明的方式來建立頁...

2020-09-29 ‧ 由 chasel1020 分享
DAY 15

[Day 15] - 建置第一個 Blog - 文章內頁 ( 下 )

在前一章節的尾聲,我們成功地在文章節點中加入 Slug ,今天我們要來用這些資訊建立一個共用的頁面,根據點擊的文章 Slug 來帶入對應的內容,那就讓我們開始吧...

2020-09-30 ‧ 由 chasel1020 分享
DAY 16

[Day 16] - 部署 Gatsby 到網路上

經由前面幾個章節,我們學會了 創建一個 Gatsby 的專案 建立頁面與元件 為元件增加樣式 為專案增加套件 使用 GraphQL 來查詢資料 如何動態的建立...

2020-10-01 ‧ 由 chasel1020 分享
DAY 17

[Day 17] - 主題 Theme

今天我們要來學習如何使用主題,先前我們辛辛苦苦安裝了很多套件、調整了很多設定、寫了不少組件,才做出一個較為基礎的部落格版型,而如果我們套用主題,可能在短短一小時...

2020-10-02 ‧ 由 chasel1020 分享
DAY 18

[Day 18] - 建立屬於自己的主題 ( 一 )

在前一章節中,我們使用了官方提供的主題去快速建立了一個部落格,後續幾個章節中,我們要建立一個主題,並將它放到 NPM 上供人下載使用。 設置工作區 首先,我們要...

2020-10-03 ‧ 由 chasel1020 分享
DAY 19

[Day 19] - 建立屬於自己的主題 ( 二 )

前一篇文章,我們成功的建立了環境,今天我們要來添加一些靜態資料到專案中,並用這些資料來創建一些頁面。 將資料添加到主題中 首先,我們在 Gatsby-theme...

2020-10-04 ‧ 由 chasel1020 分享
DAY 20

[Day 20] - 建立屬於自己的主題 ( 三 )

昨天我們完成了 Slug 的添加跟靜態資料的讀取,今天我們要建立一個頁面模板來動態的創建頁面,話不多說,就直接來進入主題吧! 使用 createPages 來動...

2020-10-05 ‧ 由 chasel1020 分享