iT邦幫忙

鐵人檔案

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

使用Gatsby督促我的姊姊成為部落客!!! 系列

我家的姊姊,職業內容就是利用文字來感動消費者,就是寫文案啦
常常聽到她想擁有一個部落格,將近三個月,都沒看他傳說中的部落格

身為靠瀏覽器渲染吃飯的工作者,決定使用 Gatsby 來幫姐架設部落格,督促她開始寫她想要分享穿搭和運動的文章
三十天的挑戰,並不是從無到有的建立部落格,而是會使用官方推薦的主題,選擇姊姊喜歡的樣板,做調整,並對相關部署 插件 和 seo 優化做研究

期待能產出一個我姐願意用的部落格

參賽天數 13 天 | 共 13 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01 - 挑個 CMS ,把姐姐挑好的模板上上去囉!

在 Gatsby 官網上,有個 starters 頁面,超多起手式樣版可以選擇,在某天晚上,傳了這個連結,督促姐姐選她喜歡的樣板,需考慮未來她的部落格方向,最...

2019-09-16 ‧ 由 Bu 分享
DAY 2

# Day 02 -姊,先給你看它已發布在網上了。部屬靜態網站新選擇 Netlify

由於昨天阿姊仔,已開始問起部落格欸,於是先把樣板發步上去,讓他看到外表好了,所以今天是利用 Netlify 去部屬網站。 首先到 官網註冊帳號 登入後在 da...

2019-09-17 ‧ 由 Bu 分享
DAY 3

Day 03 - 安裝本機的 wordpress,利用老牌的 CMS 作為 Gatsby 的後台

本來有考慮使用 Contentful ,但覺得 Wordpress 的寫作介面,還是適合不太碰新潮流東西的老姊,之後還是會介紹 Contentful ,並教導姊...

2019-09-18 ‧ 由 Bu 分享
DAY 4

Day 04 - 利用 Gatsby 取得 wordpress json

取得 wordpress 的 pages 資訊訪問 {{wordpress 網域}}/wp-json/wp/v2/pages即可看到所有頁面的資訊 圖中標示這...

2019-09-19 ‧ 由 Bu 分享
DAY 5

Day 05 - 動態產生 Gatsby 頁面,來自 Wordpress 的 post page 與現有的 page

首先先調整 gatsby-node.js在 gatsby-source-wordpress plugin 有建議寫法 以下是調整過的gatsby-node.js...

2019-09-20 ‧ 由 Bu 分享
DAY 6

Day 06 - 解決 404 not fount on root URL

在 wordpree 後台新增一個 page 為 home在 gatsby-node.js 新增 redirect createRedirect({...

2019-09-21 ‧ 由 Bu 分享
DAY 7

Day 07 - 研究讀取 markdown 的設定

之前姊挑的樣板,是讀取 md 檔 以下是 gatsby-node.js const path = require('path'); exports.creat...

2019-09-22 ‧ 由 Bu 分享
DAY 8

Day 08 -當 wordpress 內容更新,重新 build Gastby

Netlify 綁 git repo 選擇自己的 git 服務 授權後調整設定,Publish directory 指定資料夾為預設的 public save...

2019-09-23 ‧ 由 Bu 分享
DAY 9

Day 09 - 搬遷本機的 WordPress 到 DigitalOcean

昨天 wordpress 設置 Netlify webhooks ,再跑 build script 會出現失敗,查明原因後,原來 Netlify 讀不到 loc...

2019-09-24 ‧ 由 Bu 分享
DAY 10

Day 10 - seo 優化

import React from 'react'; import Helmet from 'react-helmet'; import {StaticQuer...

2019-09-25 ‧ 由 Bu 分享