Hướng Dẫn Tùy Biến Template Ghost Từ A-Z Cho Người Muốn Có Website “Chất Như Nước Cất”: P1

Ghost là quái gì vậy?

Nếu bạn đang mơ về một cái blog đẹp như gương mặt crush, nhanh như đoạn tin nhắn bị seen và bỏ lơ, thì Ghost là chân ái.

Nói ngắn gọn:
🟣 Ghost = nền tảng viết blog, CMS hiện đại, nhẹ, siêu nhanh, open-source, đẹp dã man con ngan.

Còn nếu bạn đã từng nghe WordPress rồi chán ngắt vì plugin rối tung lên như đầu tóc lúc mới ngủ dậy… thì Ghost chính là chiếc “tẩy não” của đời bạn.

🛠️ Vậy muốn có website Ghost đẹp - cần gì?

✅ Điều kiện tiên quyết:

🧠 Não còn ít nhất 2 nếp gấp.
💻 1 máy tính có thể cài được Node.js.
🧑‍💻 Biết dùng Terminal, ít nhất là cd và ls.
🥤 1 cốc trà sữa (để lên tinh thần).

🧪 BƯỚC 0: CÀI GHOST CLI & CHẠY LOCAL

Cài Ghost CLI như cài Tinder, cực nhanh:

npm install -g ghost-cli

Tạo folder cho site:

mkdir my-ghost-site && cd my-ghost-site
ghost install local

👉 Boom! Bạn đã có website local chạy ở http://localhost:2368
Admin ở http://localhost:2368/ghost

👩‍🎨 BƯỚC 1: BẮT ĐẦU TÙY BIẾN TEMPLATE

Ghost dùng Handlebars (template engine đơn giản như chơi Flappy Bird).
Themes của Ghost = 1 folder chứa:

my-theme/
├── package.json
├── default.hbs
├── index.hbs
├── post.hbs
├── partials/
│   ├── header.hbs
│   └── footer.hbs
└── assets/
    ├── css/
    └── js/

✅ 1.1 Clone theme sẵn có

git clone https://github.com/TryGhost/Casper.git my-theme

Rename folder + chỉnh package.json tên cho ngầu:

{
  "name": "genz-theme",
  "version": "1.0.0",
  "engines": {
    "ghost": ">=5.0.0"
  }
}

🌈 BƯỚC 2: TÙY BIẾN HTML – CSS – HANDLEBARS

✨ 2.1 Chỉnh layout chung

Mở default.hbs – đây là file khung chính của tất cả trang.

Bạn có thể đổi:

<!DOCTYPE html>
<html>
  <head>
    <title>{{meta_title}}</title>
  </head>
  <body>
    {{> "header"}}
    {{{body}}}
    {{> "footer"}}
  </body>
</html>

=> Thêm custom class, nhét font, nhét dark mode, gì cũng được.

🎨 2.2 Viết style theo style mình

Tất cả CSS nằm ở assets/css/

Tùy gu:

Xài luôn CSS thuần (đơn giản)
Hoặc tích hợp Tailwind, SCSS, Bootstrap gì cũng chơi được

💡 Protip: Bạn có thể dùng tool như PurgeCSS để giảm size CSS build cuối.

🎛️ 2.3 Thêm block HTML riêng vào từng trang

Ví dụ thêm quote xàm xí vô trang index:

Mở index.hbs:

<div class="custom-quote">
  <h2>"Website đẹp là website khiến người ta tưởng mình là dân chuyên."</h2>
</div>

⚙️ BƯỚC 3: VIẾT COMPONENT DẠNG `{{#if}}`, `{{#foreach}}`

Ghost không cần backend đâu. Nhưng bạn có thể làm “giao diện dynamic” với các block:

✅ Danh sách bài viết:

{{#foreach posts}}
  <article>
    <h2>{{title}}</h2>
    <a href="{{url}}">Đọc tiếp</a>
  </article>
{{/foreach}}

✅ Chỉ hiển thị trên homepage:

{{#if @home}}
  <div class="banner">Xin chào bạn tới trang chủ của tui nè!</div>
{{/if}}

📦 BƯỚC 4: BUILD & ZIP THEME

Ghost yêu cầu bạn zip theme trước khi upload.

cd my-theme
zip -r genz-theme.zip *

🚀 BƯỚC 5: UPLOAD LÊN WEBSITE GHOST

Bạn có thể:

Cài Ghost trên VPS (tự host)
Hoặc dùng Ghost(Pro) – có hosting sẵn

✅ Upload theme:

Vào http://your-domain.com/ghost
Vào Settings → Design → “Upload a theme”
Chọn file genz-theme.zip

🔥 Xong rồi. Website sẽ dùng theme bạn vừa custom.

🔧 BƯỚC 6: CÀI HOSTING TỰ TRANG TRÍ (NẾU MUỐN 100% ĐỘC LẬP)

Cách phổ biến:

💻 Option 1: Tự cài Ghost trên VPS (DigitalOcean, Linode, v.v.)

ghost install

Sau đó trỏ domain → done.

🌐 Option 2: Deploy trên Render / Railway

Tạo service Node.js
Push source theme lên
Kết nối Ghost database (hoặc Ghost docker image)

🎁 BONUS: CUSTOM SIÊU NGẦU KHÔNG GIỐNG AI

🔥 1. Dark mode switch

<button onclick="document.body.classList.toggle('dark')">🌙</button>

💬 2. Gắn Disqus comment

<div id="disqus_thread"></div>
<script>/* dán script disqus vào đây */</script>

🤖 3. Thêm AI Chatbox:

Gắn script từ Botpress, Chatbase, hoặc tự dev mini chatbox = JS.

🤯 CÂU CHUYỆN CỦA TUI (optional)

“Tôi bắt đầu với Ghost vì chán WordPress.
Tôi ở lại với Ghost vì mỗi lần mở blog là thấy tâm hồn mình sạch sẽ.”

🧘 KẾT: TẠO WEBSITE GHOST = THIỀN TRONG CÔNG NGHỆ

Làm site Ghost không cần giỏi code, chỉ cần:

Sáng tạo + chịu nghịch
Không ngại sửa hbs, nghịch css
Và quan trọng nhất: dám đăng bài đầu tiên

💡 TL;DR DÀNH CHO MẤY ĐỨA LƯỜI

Bước	Mô tả ngắn
0	Cài Ghost CLI & tạo site local
1	Clone theme gốc (Casper)
2	Tùy chỉnh HTML/CSS/Handlebars
3	Build theme → Zip
4	Upload theme lên Ghost
5	Tự host hoặc dùng Ghost(Pro)
6	Làm thêm các trick xịn xò
∞	Đăng bài, sống chill với web của chính mình

🚀 Follow tui để xem theme tui đang build ở đâu:

🔗 ghost-genz.cool (demo thôi, link ảo cho oách)

Hoặc join group "Ghost Việt Nam Mặn Mòi Hội" (cũng ảo luôn nhưng bạn lập được mà)

Xong! Vậy là từ 1 đứa chưa biết gì → giờ bạn có thể làm website Ghost riêng rồi.
Đừng hỏi “làm sao để đẹp”, cứ làm đi rồi chỉnh. Đẹp là một hành trình, chứ không phải template đâu 😎