Tạo một website dễ dàng với Hugo

Bạn đang cần viết blog, bạn đang cần làm 1 trang portfolio để PR cho bản thân, hay đơn giản là làm 1 trang landing page dùng các framework hay CMS như wordpress lại quá phức tạp, nếu chỉ dùng các file html thì không đáp ứng được. Một giải pháp đơn giản hơn là dùng các framework hỗ trợ việc generate website 1 cách đơn giản nhất như Jekyll, Hugo, Hexo …

Hôm nay chúng ta cùng thử generate 1 website với Hugo, theo như lời giới thiệu ở trang chủ “The world’s fastest framework for building websites.”

Để làm rõ, không có nhiều sự khác biệt trong các khuôn khổ được viết bằng các ngôn ngữ khác nhau. Sở thích cá nhân và thẩm mỹ mới là vấn đề quan trọng, đó không phải là chủ đề được đề cập trong bài đăng này.

Đầu tiên chúng ta cùng cài đặt Hugo CLI vào máy. Ở đây tui dùng Windows OS nên chỉ tóm tắt cách cài đặt trên Windows thôi, nếu bạn dùng hệ điều hành khác thì tham khảo thêm hướng dẫn trên trang Hugo.

Tải về file cài đặt Hugo

Add Hugo to your Windows PATH settings:

Kiểm tra cài đặt có hoàn tất chưa, bằng cách bật Command Prompt hay Cmder lên, rồi gõ vào lệnh hugo help, nếu hiện như bên dưới là cài đặt xong.

Tiếp theo là tạo một dự án mới

cd C:\Hugo\Sites
hugo new site my_blog

You should now have a directory at \Sites\my_blog

Cài theme

Download the latest release and extract it in the themes directory. Or,

clone this repository to the themes directory:

git clone https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt

hay đơn giản hơn là dùng Github Desktop (trực quan hơn, nếu bạn không quen dùng các câu lệnh git)

Cấu hình file TOML

The following is a basic configuration for the DoIt theme, by modify config.toml in \Sites\my_blog

baseURL = "http://example.org/"
# [en, zh-cn, fr, ...] determines default content language
defaultContentLanguage = "en"
# language code
languageCode = "en"
title = "My New Hugo Site"

# Change the default theme to be use when building the site with Hugo
theme = "DoIt"

[params]
  # DoIt theme version
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "Posts"
    url = "/posts/"
    # title will be shown when you hover on this menu link
    title = ""
    weight = 1
  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

Create Your First Post

cd C:\Hugo\Sites\my_blog
hugo new posts/first_post.md

By default all posts and pages are created as a draft. If you want to render these pages, remove the property draft: true from the metadata, set the property draft: false or add -D or –buildDrafts parameter to hugo command.

Launching the Website Locally:

hugo serve

Posts Structure

A few suggestions to help you get a good looking site quickly:

• Keep post pages in the content directory, for example: content/posts/my-first-post.md
• Keep other pages in the content directory, for example: content/about.md

(nội dung còn đang cập nhật tiếp … )

Về Hugo

Nói thêm về lịch sử mình biết đến Hugo. như đã nói là công nghệ tạo web tĩnh tự động hiện đang có rất nhiều nền tảng cạnh tranh nhau. ở khía cạnh developer thì họ quen dùng ngôn ngữ lập trình nào thì sẽ thích nền tảng đó hơn, và độ nhanh mượt cũng không kém cạnh nhau nhiều đâu. và mỗi framework sẽ được các hãng trùm công nghệ (google, apple facebook chẳng hạn…) đứng sau để tác động và thu hút, ví dụ GitHub thì khuyến khích dùng Jekyll, vì đó được viết bởi đồng sáng lập của GitHub .

Mượn câu triết lý của Jekyll: Jekyll does what you tell it to do — no more, no less. It doesn’t try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.

-> enabling content editors to modify site content without having to know how to code.

So sánh thứ hạng các SSG: https://jamstack.org/generators/

Thế nên, để thu hút người dùng thì đa số các nền tảng đều muốn người sử dụng ít tốn công vào viết code mà hoàn thiện nội dung website hơn.

Vấn đề là đừng tập trung quá vào giao diện hay công nghệ tạo ra trang web mà chú trọng vào các bài viết truyền tải thông tin, cái chính để thu hút người đọc. Ở đây Hugo đã làm được điều đó thông qua việc cài đặt dễ dàng và mọi thứ có thể nói nôm na là mở hộp ra là dùng được ngay. một số nền tảng khác như VuePress thì bắt phải cài thêm NodeJs, Yarn và các plugin khác phức tạp hơn.

Tóm lại là thích nền tảng nào là quyền của mỗi người, ở góc độ người dùng thì chủ yếu tập trung xây dựng nội dung

Ngoài ra còn tuỳ cơ duyên, bạn tình cờ ghé thăm một trang web nhanh mượt và bắt mắt, lại thấy theme nó miễn phí, đa dụng, nhiều tính năng, ngó qua nền tảng cũng nhiều người sử dụng (đồng nghĩa được hỗ trợ nhiều và dễ tìm câu trả lời cho vướng mắc gặp phải từ cộng đồng), và cài đặt đơn giản thì dùng thôi.

Cái cần nói thêm là khả năng luân chuyển dữ liệu (migration) ví dụ sau này bạn thích chuyển sang nền tảng khác thì gói ghém cũng dễ thôi, vì file markdown .md sử dụng chuẩn chung nên qua nền tảng khác vẫn hiểu và đọc được. Về cơ bản thì chỉ cần backup folder chứa website của bạn thôi.

Bạn có thể sử dụng theme này để làm nền tảng cho trang web của mình. Theme được kế thừa tính năng từ các bản theme nổi tiếng được nhiều người sử dụng trên GitHub và có thêm nhiều tính năng khác được bổ sung và cải tiến

Các tính năng ưu việt của theme thì có thể tham khảo trên trang GitHub: https://github.com/HEIGE-PCloud/DoIt

Trong bài viết này chủ yếu chỉ đề cập đến cách sử dụng theme DoIt vì mình đang sử dụng cho weblog của mình. Tất nhiên, những gì học được từ theme này hoàn toàn áp dụng được cho các theme Hugo khác, và các chuẩn chung như HTML, CSS, JS…

Trên trang HugoDoIt và Hugo Document có hướng dẫn sử dụng khá đầy đủ và chi tiết, nên tôi không dịch lại đâu, mà ở đây chỉ nói nhanh vài chỗ và tập trung vào những điểm mình từng khúc mắc và cách xử lý.

Tất nhiên, trong quá trình sử dụng bạn rất có thể sẽ gặp những vấn đề phát sinh, vì thế, nghiền ngẫm các trang tài liệu trên để tìm câu trả lời, hoặc bạn có thể để lại bình luận bên dưới để cùng thảo luận, hoặc là hỏi trực tiếp người viết theme trên trang GitHub.

Đây là cấu trúc cây thư mục blog của mình, có thể chưa tối ưu nhưng đủ để khai thác và quản lý được rồi, tập trung viết nội dung và xuất bản thôi còn tối ưu sẽ tính sau.

(nội dung còn đang cập nhật tiếp … )

Cách xuất bản website của bạn lên mạng

Hiện tại có nhiều dịch vụ cho phép bạn làm điều này rất nhanh chóng như Netlify, GitHub Pages, Cloudflare Pages, Vercel, Google Firebase… Có lẽ mình sẽ đi sâu vào cách deploy lên các dịch vụ này ở những bài viết sau, tạm thời bạn có thể xem hướng dẫn Cloudflare Pages ở đây.