iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

PWA, Severless, GraphQL實作 系列

透過Gatsby.js等工具,快速進入PWA, Severless, GraphQL實作

參賽天數 9 天 | 共 10 篇文章 | 19 人訂閱 訂閱系列文 RSS系列文
DAY 1

Gatsby.js 未來的網頁01:漸進式網頁應用程式

網頁開發的世界日新月異,我目前最關心的技術包括:React Stack、PWA、GraphQL還有Serverless等。而Gatsby.js這個靜態網頁產生...

2018-10-15 ‧ 由 Zack 分享
DAY 2

[影片]Gatsby.js 未來的網頁02:安裝Gatsby.js

實作是最好的學習。今天要介紹Gatsby.js的安裝及在local環境運行起來。 YouTube教學影片: ##安裝Gatsby CLI npm instal...

2018-10-16 ‧ 由 Zack 分享
DAY 3

[影片]Gatsby.js 未來的網頁03:File Structure

我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...

2018-10-17 ‧ 由 Zack 分享
DAY 4

[影片]Gatsby.js 未來的網頁04:新增頁面

今天要介紹的內容很簡單:如何在Gatsby中新增頁面。新增頁面的方法不只一種,今天先介紹最簡單的方法。 YouTube Video: layout.js vs...

2018-10-18 ‧ 由 Zack 分享
DAY 5

[影片]Gatsby.js 未來的網頁05:安裝Plugin

和WordPress一樣,Gatsby.js也有plugin系統,透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝p...

2018-10-19 ‧ 由 Zack 分享
DAY 6

[影片]Gatsby.js 未來的網頁06:加入Markdown

Gatsby可以以Markdown作為資料來源自動產生頁面,這讓我們可以輕易的建立Blog之類的網站:寫blog只需寫markdown。 YouTube Vid...

2018-10-20 ‧ 由 Zack 分享
DAY 7

[影片]Gatsby.js 未來的網頁07:自動生成文章

上一篇中我們準備好了Markdown、post template,以及相應的一些GraphQL query,今天就要使用Gatsby提供的createPages...

2018-10-21 ‧ 由 Zack 分享
DAY 8

[影片]Gatsby.js 未來的網頁08:GraphiQL

Gatsby提供了一個叫做 GraphiQL 的工具,幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面,讓我們可以直觀地看到查詢的結果...

2018-10-22 ‧ 由 Zack 分享
DAY 9

Gatsby.js 未來的網頁09:Index頁面

上一篇中,我們用GraphiQL測試了GraphQL的查詢。今天,我們就要用這些查詢來打造一個Index頁面。 YouTube 影片 加入GraphQL 打開...

2018-10-23 ‧ 由 Zack 分享
DAY 9

Gatsby.js 未來的網頁10:GraphQL Filter & Sort

上一篇中,我們完成了一個簡單的Index頁面。今天,我們再加一些功能:1)在文章中設定是否為草稿,若是,則index不顯示,這可以透過GraphQL的filte...

2018-10-25 ‧ 由 Zack 分享