Next.js netlify

使用Next.js+Netlify自動上版服務輕鬆架設部落格

Luke Hsu 2021/04/16 12:07:20
115

Next.js是一種React為主體的Server Side Rendering框架,也有整合Webpack與Babel等設定,對於開發者來說十分方便

本次主要來利用的是Next.js的SSG (Static Site Generation)功能

Next.js會將固定頁面在打包專案的同時便生成靜態頁面,這個功能非常適合定時更新的靜態內容,例如部落格。

 

 

首先,開啟command line 視窗,先在準備好產生新專案的目錄下輸入以下指令:

npx create-next-app <你的專案名> --example "https://github.com/wutali/nextjs-netlify-blog-template"

如果要用Yarn來進行,則可以輸入:

yarn create next-app <你的專案名> --example "https://github.com/wutali/nextjs-netlify-blog-template"



注意,這裡專案名不能使用大寫,建議使用“-”來做間隔,如圖所示

接著會看到如下的專案結構:


在這生成好的專案中,只要在 content/post 裡面新增新的MDX檔案,並在裡面進行編輯,即可產生新頁面,因為預設的格式設定,以經在src資料夾準備好了



MDX檔案的內容格式,已經在預設生成的檔案內容中示範



一般HTML內容也能直接適用



也有支援YouTube影片或是Twitter貼文的直接嵌入

實際的效果可以看這個部落格模板的範例網站:https://nextjs-netlify-blog-template.netlify.app/

接下來就上讓部落格上線的時候了

這裡提供自動上版的方案,需要先準備:

1. Netlify帳號(靜態網頁用帳號免費)

2. 能夠支援Netlify自動上版系統的線上版本控制服務的帳號:GitHub BitBucket GitLab...

3. 把編輯完成的部落格push到線上版控中

接下來登入Netlify後,從你的版控帳號選擇要部署的專案,點下 "New Site From Git"

 

 

接著就會看到:

接下來把你的專案權限授權給Netlify,並且指定好專案中打包時所需的指令(這裡是使用預設值,這裡已經與Next.js有良好的整合),不需要再修改設定

接下來就按下Deploy就能把部落格部署上去囉,可以去Log看看部署過程的記錄

另外別忘了給前往"site setting"設定部落格設定一個好名字

 接著就能去看看部署成果囉

參考來源網站:

Next.js blogging template for Netlify: https://github.com/wutali/nextjs-netlify-blog-template

Luke Hsu