Gatsby.js是一個靜態網站的生成工具，整合了React框架、webpack 以及GraphQL 這種比較新型態的 API 介面。因為其生成的是純靜態的頁面...
今天，我們要用很快速的流程，來體驗一下Gatsby強大的地方，從頭快速的做出一個懶人的blog，並且不用打上一行程式碼 首先，在command linend...
實作是最好的學習。今天要介紹Gatsby.js的安裝及在local環境運行起來。 YouTube教學影片： ##安裝Gatsby CLI npm instal...
在Day19，我們見識了Gatsby強大的功能，使用官方提供的starter，快速的做出了一個部落格。而這個部落格本身，會包含我們所需要的資料，是一個靜態的網頁...
Gatsby可以以Markdown作為資料來源自動產生頁面，這讓我們可以輕易的建立Blog之類的網站：寫blog只需寫markdown。 YouTube Vid...
今天試著從我們的gatsby專案來串接我們的graphQL graphQL的API來獲得文章資料 首先，創建我們的gatsby專案 gatsby new my-...
今天我們停下腳步，來思考一下我們要從無到有實作出哪些功能。 首頁最基本的文章列表功能，然後作個簡單的分頁。 作者介紹欄: 圖片、姓名、社群url 文章...
成品參考: https://linsheng24.github.io/gatsby-blog/ 今天實作留言版的部分，因為react不同於文章，畫面的改變必須馬...
在之前，我們透過了Contentful提供的starter，快速的幫我們完成了"架好部落格"這件事。然而卻讓我們有點知其然而不知其所以然。...
我們已經用Gatsby的Command Line工具以預設的Starter安裝了一個示範網站。今天我們就來研究一下這個預設Starter生成的目錄結構。 You...
和WordPress一樣，Gatsby.js也有plugin系統，透過NPM安裝。你可以在Gatsby.js 官網找到所有plugin。今天我們要學習怎樣安裝p...
上一篇中我們準備好了Markdown、post template，以及相應的一些GraphQL query，今天就要使用Gatsby提供的createPages...
今天要介紹的內容很簡單：如何在Gatsby中新增頁面。新增頁面的方法不只一種，今天先介紹最簡單的方法。 YouTube Video: layout.js vs...
因為gatsby是基於React，所以在使用上需要會一些React語法，而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了，蠻合理...
今天開始把網頁跟Contentful做連結。 首先，到Contentful創造一個新的space(或是把舊的清空)。到Content Model做以下配置...
首先，在Day.17中，我們已經有辦法藉由graphQL來抓取文章資料了，接續上次的內容。 今天我們來提到一個gatsby一個十分重要的功能，就是利用資料去創建...
今天實作首頁的顯示舊文章的按鈕功能。 在實作前想先介紹react的hook這個東西:在去年以前，react的組件實作都是使用Class component，也就...
今天的動作比較瑣碎，但還是簡單說一下實作的過程，如果內容不夠清楚，也可以再本文的結尾直接把我推上去的git給抓下來繼續Day24以後的內容。 首先，我的部落格...
上一篇中，我們用GraphiQL測試了GraphQL的查詢。今天，我們就要用這些查詢來打造一個Index頁面。 YouTube 影片 加入GraphQL 打開...
Gatsby提供了一個叫做 GraphiQL 的工具，幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面，讓我們可以直觀地看到查詢的結果...
props 當父元件想要傳參數給子元件，子元件想要從父元件那邊得到資料時，我們就會用到props這個東西了~用法十分簡單，首先，我們新增一個檔案src/...
GraphQL是facebook在2015年推出的一種新型態的API，那為甚麼要使用這種api呢? RESTful API不好嗎? RESTful的確有一...
今天要講到的是react中的事件監聽，在react中，只要在JSX的元素標籤內，根據特定方法給出的屬性名，給予其所需執行的方法，就會在事件觸發時做執行了，舉個例...
延續上一篇，今天來完成index頁面。 首先，到http://localhost:8000/___graphql先做好查詢語法 query indexQue...
今天新增了deleteItem的方法，並在JSX中加入我們的刪除按鈕，並綁到deleteItem上。這邊用到官方文檔給出的一個方法，可以同時間事件跟參數綁到監聽...
一個GraphQL的query語法可能會長得像這樣: { me { name appearsIn } } 和他的回傳結果可能會是長這樣...
由於昨天阿姊仔，已開始問起部落格欸，於是先把樣板發步上去，讓他看到外表好了，所以今天是利用 Netlify 去部屬網站。 首先到 官網註冊帳號 登入後在 da...
Bu
‧
2019-09-17
mutation的部分，除了需要修改原先的CreatePost，還相新增一個RemovePost來刪除文章 修改完的程式碼如下: app/graphql/typ...
今天要修改一下我們的資料架構，新增一張types的表，紀錄文章的類別，然後在原先的posts表，新增一個type欄位，來紀錄文章類別的關聯。 原先，我們在con...
本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...
轟天旅人
Zack
DannyChen
iThome鐵人賽
看影片追技術