我在個人部落格導入了 Hygen 程式碼產生器，讓我能使用 hygen post new 指令，快速建立新文章草稿 .mdx 檔案，簡化繁瑣步驟。

不要再從舊檔案複製貼上了！使用 Hygen 快速建立 Blog 新文章 Markdown 檔案

全自動的推特機器人。每日透過 Product Hunt API 爬取熱門專案、React.js Remotion 產生短影片，Twitter API 發佈到貼文到推特上。

Product Hunt Today 專案 - 自動產生短影片介紹熱門 Product Hunt 專案的推特機器人

使用 Tailwind CSS 做點簡單切版，美化文章列表的樣式！

Day12 用 TailwindCSS 切版部落格首頁，顯示 WordPress 文章列表

安裝 Tailwind CSS 這套 CSS 框架在 Next.js，準備做點簡單切版，美化文章列表的樣式

Day11 TailwindCSS 介紹，在 Next.js 專案安裝 TailwindCSS

在 Next.js 使用 ApolloClient 串接 WordPress GraphQL API，抓取文章列表資料，顯示在部落格首頁

Day10 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（下）

在 Next.js 安裝 apollo-graphql package，將用來串接 WordPress 的 GraphQL API

Day9 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（上）

在 WordPress 上安裝 WPGraphQL plugin，建立 GraphQL API，提供 Next.js 前端抓取文章資料

Day8 GraphQL 介紹、在WordPress 上安裝 WPGraphQL plugin

將 Next.js 專案發布到 Vercel，在線上看到你的成果，並且使用 Github 自動部署。

Day7 使用 Vercel 發布我們的 Next.js 網站，搭配 Github 實現自動部署

使用 create-next-app 建立 Next.js 專案，目標是能在自己電腦上成功開啟 Next.js 網頁。

Day6 建立 Next.js 專案 - 使用 create-next-app

Next.js 是高級版的 React.js 全端開發框架，支援 Server Side Rendering 等各種渲染策略，大幅提升 DX 開發者體驗及 UX 網站訪客體驗，是非常值得學習的技術。

Day5 Next.js 介紹 - Production-ready 的 React.js 框架

設定個人部落格 WordPress 的基礎設定，完成文章發布

Day4 WordPress 介紹，基礎設定與發文

為我們的個人部落格尋找 WordPress CMS 託管平台，選擇 CP 值最高的 BlueHost 實作，手把手完成架設

Day3 WordPress 架設 - 尋找最適合我們的 WordPress 架站平台 BlueHost

這系列文章我們會實作個人部落格，使用 Next.js 前端搭配 Headless WordPress as CMS 後端。改善 DX 開發者體驗、編輯者體驗、UX 讀者體驗、SEO 搜尋引擎優化

Day2 個人部落格需求規劃 - Next.js Frontend + Headless WordPress

這系列文章我會詳實紀錄我用 Next.js 拆分 WordPress 前端的過程，比重大概 30% 會在 WordPress 調整，70% 會在 Next.js 新專案建立、畫面切版、功能實現。會以建立個人部落格為主題，從最初 WordPress 架設，到 Next.js 優化

Day1 用 Next.js 拆分 Wordpress 前端 - 系列簡介

新的 Gatsby 部落格有自己一套路由設定，與原先 Hexo 不同。於是我使用 gatsby-redirect-from plugin 將文章舊路徑重導向。

設定 Gatsby 部落格文章的舊路徑重導向，使用 gatsby-redirect-from 插件

當完兵過年期間閒的蛋疼，想要嘗試新技術，於是決定用 Gatsby.js 來重架部落格啦！

部落格搬遷紀錄，用 Gatsby.js 取代 Hexo

科幻風造型獎盃，是我在2017年11月時，受新竹黑客松官方委託打造的，希望能呈現出科技感、及體現創客們的創造力。

【專案】科幻風造型獎盃

「智慧釀藏酒大師 Winster」，是一套幫助您釀酒和控管酒況的釀藏酒平台。主要能夠提供專業釀酒玩家、小型釀酒企業，酒的品種以及產地的分析和釀酒過程的錯誤偵測。

【專案】智慧釀藏酒大師 Winster

智慧手套旨在取代鍵盤及滑鼠，成為下個世代的人機介面裝置，希望使用者能透過智慧手套，操控生活中的所有事物，例如：控制智慧家電、作為遊戲控制器、演奏虛擬樂器等。

【專案】智慧手套 Smart Gloves

專案目的是開發低成本的智慧導盲犬，取代需要龐大成本訓練的傳統導盲犬，造福盲人朋友的生活。

【專案】SigmaGO 智慧導盲犬

Botkit初體驗，寫一隻Slack聊天機器人吧！

開發藍芽鋼琴APP！使用AppInventor結合Arduino、HC05、與蜂鳴器

《為什麼聰明人都用方格筆記本》，用筆記術變身強者吧

【閱讀筆記】《魅力學》，培養魅力的第一本書

在MacOS使用putty key進行ssh連線

使用production mode啟動你的rails專案

【DailyUI #003】Landing Page

【DailyUI #002】Credit Card Checkout

【DailyUI #001】Sign Up

【DailyUI #000】成為最強前端設計師吧

【閱讀筆記】從《他是玩真的！》汲取鋼鐵人Elon Musk創造未來的關鍵能力

【100sites #011】LifeGame，生命遊戲模擬無限的可能性

【100sites #010】Piano，用P5js的sound函式庫實作虛擬鋼琴

【100sites #009】Flame，P5js酷炫小動畫

【100sites #008】Showcase，單頁式網站設計展示我的作品集

【100sites #007】Pong，使用P5.js建構的復古遊戲

如何在Mac OS X上安裝Verilog環境

【閱讀筆記】少，但是更好——精準生活，拿回人生主控權

【100sites #006】Snack

【100sites #005】Drawer

【100sites #004】Firework

【100sites #003】TodoList

一個簡單的番茄鐘工作法計時器。

【100sites #002】Pomodoro

【100sites #001】Timer

為了成為全端工程師，我決定開始做大量的side-project，從做中學，高效地提升我所需要的能力。

【100sites #000】我的全端工程師之路

提升商業書「閱讀效益」，以「投資」的角度進行閱讀。

All Posts

不要再從舊檔案複製貼上了！使用 Hygen 快速建立 Blog 新文章 Markdown 檔案

Product Hunt Today 專案 - 自動產生短影片介紹熱門 Product Hunt 專案的推特機器人

Day12 用 TailwindCSS 切版部落格首頁，顯示 WordPress 文章列表

Day11 TailwindCSS 介紹，在 Next.js 專案安裝 TailwindCSS

Day10 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（下）