Hướng dẫn cách tạo wed bằng Hugo

0
24032

Hướng dẫn cách tạo wed bằng Hugo. Mỗi công cụ SSG sử dụng một ngôn ngữ riêng để làm template và code. Trong đó, Hugo thân thiện với hệ điều hành Windows, Hugo viết bằng ngôn ngữ Go, thời gian build một trang web cực nhanh.

1. Tạo wed bằng cách cài đặt Hugo cho Windows

tạo wed

Bạn download file zip mới nhất tại đây: https://github.com/gohugoio/hugo/releases

Đối với Windows 10 – 64Bit bạn download bằng link này: https://github.com/gohugoio/hugo/releases/download/v0.39/hugo_0.39_Windows-64bit.zip

Sau khi giải nén file zip này ta sẽ được một file hugo.exe.

Bây giờ hãy gõ lệnh hugo version ở CMD để kiểm tra.

2. Bắt đầu tạo wed đầu tiên bằng Hugo

Đầu tiên tạo bộ khung project bằng Hugo command: hugo new site [TenWebsite]

Lúc này thì website của chúng ta đang trắng trơn, chưa có gì cả.

3. Tải một bộ giao diện (theme) về sử dụng

Có thể chuyển đổi giao diện động, do người dùng chọn, sau khi đã build bằng hugo không?

Không thể, vì build ra Html hoàn toàn là tĩnh nên link bài viết (post) và link đến các trang khác nhau, css đều đã được cố định vào 1 thư mục. Bạn có thể thấy sau khi build bằng lệnh hugo sẽ hiện ra thư mục tên public có các file sau khi được build ra trang web hoàn chỉnh. Nếu bạn muốn thay đổi giao diện bạn phải chọn lại theme và sửa config.toml rồi build lại.

tạo wed

4. Viết bài đăng lên website bằng Hugo

Trong trường hợp bạn dùng một theme cố định. Bạn không cần đến thư mục themes. Có thể paste trực tiếp toàn bộ nội dung themes vào thư mục root luôn.

Hãy ví dụ giao diện “hugo-tranquilpeak-theme” là cố định thì ta download file zip về và giải nén đè vào thư mục gốc MyBlog luôn.

5. Tạo wed vừa làm lên mạng

Như vậy là cơ bản sau khi có một trang Blog với giao diện ngon nghẻ và viết các bài để chia sẻ thì giờ chúng ta có thể đưa nó lên mạng được rồi.

Chúng ta không cần mua hosting mà hãy đưa code lên trang github. Ai cũng tạo tài khoản github free được và github không giới hạn số code website (số Repository) mà bạn đưa lên. Trang Github có một dịch vụ miễn phí là hosting được file html tĩnh, được gọi là Github Pages. Bạn đưa code dạng html tĩnh lên trên Github thì lập tức có thể hiển thị được file html đó dưới dạng website thông thường.

Chú ý là trong bài hướng dẫn này mình đưa trang web lên Github chỉ các mã nguồn đã được gen ra (tạo ra html) bằng Hugo. Và không đưa toàn bộ source của Hugo lên. Nếu bạn muốn chia sẻ mã nguồn hugo của bạn thì bạn public toàn bộ lên gitHub cũng được.

Và như thế là bạn đã có một trang Blog cá nhân hoàn chỉnh rồi đấy! Chúc các bạn tạo web thành công.

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.

  • Tham khảo các gói dịch vụ thiết kế website tại webvocuc.vn
  • Tham khảo thêm gói chăm sóc web và chạy quảng cáo hiệu quả tại webvocuc.com

Webvocuc

Cảm ơn bạn đã xem bài viết Hướng dẫn cách tạo wed bằng Hugo
* Tuyệt với hơn nếu bài viết này nhận được ý kiến của bạn!

BÌNH LUẬN

Please enter your comment!
Please enter your name here

Thiết kế website chuyên nghiệp