Hugo + Firebase
Tags: hugo, firebase, tutorial, ไทย
Published: 2019-06-22 15:29:45

---
title: Hugo + Firebase
published: true
description: สร้าง เว็บไซต์ ด้วย Hugo + Firebase เครื่องมือที่กำลังเป็นที่นิยมในการสร้าง static site และ free hosting ของ google ที่ทั้งสะดวก และมีของแถมของฟรีให้เราได้ใช้มากมาย
tags: hugo, firebase, tutorial, ไทย
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ceanjp69ntiaja4te2eo.jpg
---

เป็น Deveploper มาก็นานทำงานมาไม่ว่าจะเป็นงานบริษัท งานฟรีแลนซ์ หรือจะเป็นโปรเจ็คของตัวเองก็ดี แต่เพิ่งมานึกได้ว่าตอนนี้เรายังไม่มีเว็บ portfolio เป็นของตัวเองเลย

เมื่อนึกได้ดังนั้นผมจึงตัดสินใจจะสร้างเว็บ portfolio แต่ถ้าทำมาแค่โชว์ผลงาน ผมก็ไม่ค่อยมีอะไรจะเอาออกมาโชว์เหมือนคนอื่นๆเขาซะด้วยสิ งั้นทำ blog ละกันจะได้ดูดีมีเนื้อหาสาระขึ้นมาหน่อย

หลังจากการเซาะแสวงหาความรู้ใน internet ได้ซักพัก ก็ได้ข้อสรุป [Hugo](https://gohugo.io/) + [Firebase](https://firebase.google.com/) เป็นบทสรุปที่ลงตัวสำหรับผม ณ ตอนนี้เป็นที่สุด

## ทำไมต้อง Hugo + Firebase

ก่อนการเซาะแสวงหาเครื่องมือ และ hosting ในการสร้างเว็บไซต์ในครั้งนี้ ผมได้ถามความต้องการของตัวเองก่อน ผมต้องการอะไรที่ง่ายๆ เพียงแค่สร้างเว็บ portfolio และเขียน blog ไปด้วย ซึ่งความต้องการของเว็บไซต์ที่ควรจะมีคือ

1. โหลดเร็ว
2. ง่ายต่อการเขียน blog แค่ [Markdown](https://th.wikipedia.org/wiki/%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B9%8C%E0%B8%81%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%99%E0%B9%8C) พอ
3. ง่ายต่อการพัฒนา
4. ง่ายต่อการบำรุงดูแลรักษาและจัดการตัวโค้ด
5. ไม่ต้องปวดหัวเรื่องระบบความปลอดภัย
6. Free hosting จัดการง่าย

นั่นคือที่มาของการเลือกเครื่องมือ ซึ่งนั่นก็คือ Hugo Static Site Generators + Firebase Hosting ในครั้งนี้

## ทำไมต้อง Hugo

เหตุผลหลักๆที่เลือกใช้ Hugo

* ความเร็วในการคอมไพล์ html
* ความเรียบง่ายของโครงสร้างในส่วนของการจัดการโปรเจ็ค
* ง่ายต่อการพัฒนาเช่นเมื่อเราทำการอัพเดต Theme เจ้า Hugo ก็จะทำการ refresh อัพเดตให้เราโดยอัตโนมัติเลย
* เอกสารที่เข้าใจง่าย

การติดตั้งในครั้งนี้ผมทำการติดตั้งในเครื่อง Mac หากว่าใครใช้ Window หรือ Linux ก็เข้าไปดูวิธีติดตั้งได้ใน [Install Hugo](https://gohugo.io/getting-started/installing/)


### ติดตั้ง Hugo
เริ่มกันเลย พร้อมแล้วก็เปิด iTerm หรือ Mac Terminal ขึ้นมา พิมพ์คำสั่ง

```bash
# ติดตั้ง Hugo ด้วย Homebrew
brew install hugo
```

** หากใครยังไม่ได้ลง Homebrew ก็ให้ติดตั้งก่อนโดยพิมพ์คำสั่ง

```base
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
```

หลังจากติดตั้งเรียบร้อยก็เช็คดูว่าการติดตั้งเรียบร้อยดีหรือไม่

```bash
# เรียกดูเวอร์ชั่นของ hugo ที่ทำการติดตั้ง
hugo version
```

เพียงเท่านี้เราก็จะได้ Hugo มาไว้กำมือของเราแล้ว

### สร้างเว็บด้วย Hugo

พิมพ์คำสั่งเพื่อเริ่มสร้างโปรเจ็คใหม่กันเลย

```bash
hugo new site dejo
```

ตอนนี้เราก็จะได้โปรเจ็คที่อยู่ในโฟลเดอร์ที่มีชื่อว่า dejo

### เลือก Theme สำหรับโปรเจ็ค

Theme สำหรับ Hugo มีให้เลือกเยอะมาก เราสามารถเข้าไปดูได้จาก [https://themes.gohugo.io/](https://themes.gohugo.io/) สำหรับ Theme ที่เลือกมาใช้ในบทความนี้มีชื่อว่า [Hyde Theme](https://themes.gohugo.io/hyde/)

```bash
# เข้ามายังโฟลเดอร์ themes
cd dejo/themes/

# โคลน Theme ที่ชื่อว่า hyde
git clone https://github.com/spf13/hyde.git

# ทำการเพิ่ม Hyde Theme เข้าไปยัง config.toml
echo 'theme = "Hyde"' >> config.toml
```

เท่านี้เราก็ได้ theme สวยๆมาใช้แล้ว

### เพิ่มบทความให้กับ Blog ของเรา

```bash
# ทำการสร้างไฟล์ที่มีขื่อว่า first-post.md ในโฟลเดอร์ posts
hugo new posts/first-post.md
```

หลังจากเขียนบทความแล้ว เราก็ดูว่าหน้าตาเว็บไซต์ของเราเป็นอย่างไร โดยพิมพ์คำสั่ง

```bash
# สร้าง server จำลองพร้อมทั้งเปิดใช้งาน draft โหมด
hugo server -D
```

ส่วนที่เหลือก็อยู่ที่การตกแต่งต่อยอดเว็บไซต์ให้เป็นไปในสไตล์ที่เราชอบ และเพิ่มเนื้อหาของเว็บไซต์ของเรา

## ทำไมต้อง Firebase

เหตุผลหลักๆที่ผมเลือกใช้ Firebase ก็เพราะ

* ง่ายต่อการเพิ่ม Custom domain อีกทั้งยังมี SSL ให้เราใช้ฟรีอีกด้วย
* ฟรี Worldwide CDN edge servers

เริ่มแรกเลย เราก็ต้องสร้างโปรเจ็คใน [Firebase Console](https://console.firebase.google.com/") เพื่อทำการ Host เว็บไซต์ของเรา หรือถ้าหากยังไม่มี เราก็สามารถลงทะเบียนได้ฟรีโดยใช้บัญชี google ของเรา

### ขั้นตอนการติดตั้งและใช้งาน

หลังจากทำการสร้างโปรเจ็คใน Firebase Console เสร็จเรียบร้อยแล้ว เราก็ต้องทำการติดตั้ง  [Firebase CLI Tool](https://firebase.google.com/docs/cli/) ซึ่งเราจำเป็นจะต้องทำการติดตั้ง [Node.js](https://nodejs.org/en/download/) ให้เรียบร้อยเสียก่อน หลังจากที่เราติดตั้ง Node.js เรียบร้อยแล้วก็ให้เราพิมพ์คำสั่ง

```bash
# ติดตั้ง firebase tools ด้วย Node.js
npm install -g firebase-tools
```

ต่อไปเราก็ต้องทำการเชื่อมต่อ Firebase Tools เข้ากับบัญชี Google ของเราด้วยคำสั่ง

```bash
firebase login
```

คำสั่งนี้จะทำการเปิดเบราเซอร์เพื่อให้เราเลือกบัญชีและทำการล็อกอิน เราสามารถใช้คำสั่ง `firebase logout` เพื่อทำการล็อกเอาท์ในกรณีที่เราทำการล็อกอินผิดบัญชี

ใช้คำสั่ง `firebase list` เพื่อดูรายชื่อทั้งหมดของโปรเจ็คใน Firsbase project ของเรา โดยที่รายชื่อทั้งหมดควรที่จะเหมือนกับรายชื่อโปรเจ็คที่อยู่ใน Firebase console ของเรา

ให้เราทำการเปลี่ยนโปรเจ็คไดเรกทอรีที่เราต้องการติดตั้ง firebase ซึ่งในที่นี้ คือ dejo ที่เราได้สร้างไว้ และพิมพ์คำสั่งเพื่อทำการตั้งค่าเริ่มต้น

```base
firebase init
```

จากตรงนี้

* เลือก Hosting ใน feature question
* เลือก โปรเจ็คที่เราต้องการ ที่เพิ่งสร้างใน Firebase Console
* เลือก default สำหรับดาต้าเบส rules file
* เลือก default สำหรับ publish directory (public)
* เลือก “No” ถ้าเราทำการ deploy a single-page app, แต่สำหรับผมเลือก "Yes"

จากนั้นเราจะได้ ไฟล์ใหม่ 2 ไฟล์อยู่ในโปรเจ็คโฟลเดอร์คือ `firebase.json` และ `.firebaserc`

เราสามารถ ignore `.firebaserc` ใน git ได้เพราะไฟล์ตัวนี้มีไว้เพียงเพื่อเก็บข้อมูลว่าโปรเจ็คที่เราใช้อยู่นั้น ใช้ firebase tool อะไรบ้าง ในส่วนของไฟล์ `firebase.json` นั้นเอาไว้เพื่อทำการตั้งค่า Hosting

```bash
{
  "hosting": {
    "public": "public",
    "ignore": [
      "**/.*",
      "firebase.json",
    ],
  }
}
```

ตอนนี้เราก็พร้อมที่ทำการนำโค้ดในโปรเจ็คใหม่ของเราเข้าไปวางที่ Firebase Hosting ของเราแล้ว โดยให้เราพิมพ์คำสั่ง
```bash
firebase deploy
```
จากนั้นก็รอ... เมื่อการโอนย้ายเสร็จสิ้น เพียงเท่านี้เราก็สามารถเข้าไปดูเว็บไซต์ใหม่ของเราด้วย URL ที่ได้จากหน้า Firebase Console ในส่วนของ  Hosting ได้เลย

## ยังไงต่อล่ะทีนี้

ในบทความนี้เราพูดถึงเรื่องของพื้นฐานการติดตั้ง Hugo และการเซ็ตอัพ Firebase hosting เพื่อการ deploy เท่านั้น

ในส่วนตัวของผม นอกเหนือจากการตกแต่งและเพิ่มเนื้อหา ขั้นตอนต่อไปก็เห็นจะเป็น

* การผูกโดเมนเข้ากับ Firebase hosting
* การเซ็ตค่า header ต่างๆให้กับโปรเจ็ค
* การทำ continuous integration

อู้หู!! เหลืออีกหลายอย่างเลยกว่าจะเสร็จตามต้องการ