ไม่อยากจ่ายค่าเซิฟเวอร์สำหรับเขียนบล็อกแล้ว เลยย้ายมาสร้างบล๊อกฟรีๆ ด้วย Hugo, Cloudflare pages แทน

ตามที่เกริ่นไปด้านบนเลยครับ เนื่องจากตอนแรกผมใช้ Ghost ในการเขียนบล็อกและจำเป็นต้องมีเซิฟเวอร์สำหรับลงเจ้านี่ แต่ตอนนั้นเนื่องจากได้ส่วนลดจากในการเช่าเซิฟเวอร์จึงตัดสินใจใช้ตัวนี้ไปก่อน และแล้วส่วนลดกำลังจะหมดและไม่อยากแบกรับค่าเซิฟเวอร์ เพราะส่วนตัวก็ไม่ได้เขียนบทความบ่อยขนาดนั้นอยู่แล้ว จึงตัดสินใจหาตัวที่เสียเงินน้อยสุด ซึ่งไปเจอว่ามีบางที่ฝากเว็บ static ฟรี และในที่สุดก็มาเจอ Hugo บวกกับส่วนตัวใช้ Cloudflare อยู่แล้ว เลยคิดว่าลองตัวนี้ดูละกัน

cloudflare pages

และบทความนี้ผมจะมาแนะนำวิธีสร้างเว็บบล็อกด้วย Hugo + Cloudflare Pages ครับ มาเริ่มกันเลย

Prerequisites

  1. Cloudflare account เพื่อใช้ Cloudflare Pages
  2. Github account ใช้เก็บ source code หรือบทความของบล็อกเรา
  3. Hugo ลงไว้ใช้ในการกำหนดค่าต่างๆ และเขียนบทความ

ข้อ 1 และ 2 ผมขอข้ามไปละกันครับ มาเริ่มที่ข้อ 3 กันเลย

Install Hugo

มีวิธีลงได้หลายวิธี ส่วนของผมใช้ mac ก็ง่ายเลย

brew install hugo

วิธีอื่นๆสามารถหาดูได้ใน docs นะครับ

Create site

หลังจากลงเรียบร้อยแล้วให้เราทำการ create site ของเรา โดยตัวอย่างนี้จะใช้ theme Hugo PaperMod ลงเป็นตัวอย่างให้ดูก่อน

# สร้างไซด์ชื่อ quickstart
hugo new site quickstart --format yaml

cd quickstart
git init

# install theme แบบ submodule
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

# เพิ่มค่า theme ไปที่ config ไฟล์
echo 'theme: ["PaperMod"]' >> hugo.yaml

# start server
hugo server

ส่วนใครที่อยากขา theme ดูตามลิงค์นี้ได้เลยครับ https://themes.gohugo.io/

Create content

หลังจากที่เราสร้างไซด์เราแล้ว มาลองสร้างบทความกัน

hugo new content posts/hello-world.md

แล้วลองเขียนอะไรใส่ลงไปก็ได้ครับในไฟล์ hello-world.md ใน path content/posts

แล้วลองรันเซิฟเวอร์อีกรอบ

# -D คือ แสดงบทความที่เป็น draft ด้วย
hugo server -D

Deploy

หลังจากที่เราสร้างไซด์และบทความเรียบร้อยแล้ว เราจะลองเอาขึ้น Cloudflare Pages กันครับ

ให้เราไปที่ Cloudflare Pages จากนั้นให้ Connect Git เลือก repo ที่ต้องการ

connect-git

จากนั้น ให้ setup branch และ build settings

settings

กด Save and Deploy

แค่นี้ก็ได้บล็อกสวยๆไว้เขียนบทความแล้วแถมไม่เสียเงินด้วย 😎

homepage

Reference