Cách Tạo Một Trang Web đơn Giản - Smart Review A-Z

Hugo là một Trình tạo trang web tĩnh cho phép bạn tạo một trang web với ít hoặc không cần trải nghiệm viết mã. Bạn có thể sử dụng các chủ đề được tạo sẵn làm cơ sở cho thiết kế trang web của mình. Điều này cho phép bạn tập trung hơn vào việc đưa nội dung của bạn vào trang web.

Vì Hugo chủ yếu được sử dụng cho các trang web tĩnh, nên nó hoàn hảo để tạo blog, danh mục đầu tư hoặc trang web tài liệu.

Bạn có thể dễ dàng thiết lập và tạo trang web Hugo bằng chủ đề Hugo được tạo sẵn. Chỉ với một vài bước ngắn, bạn có thể thêm nội dung và các trang vào trang web của mình bằng cách sử dụng Markdown.

Mục Lục

• Cách cài đặt Hugo
  • Mac
  • các cửa sổ
• Cách tạo một dự án Hugo
• Cách thêm chủ đề
• Cách thêm trang vào trang web của bạn
• Cách chạy và kiểm tra cục bộ trang web Hugo của bạn
• Lưu trữ trang web Hugo của bạn

Cách cài đặt Hugo

Bạn cần cài đặt trình tạo trang web tĩnh Hugo để tạo, chạy và kiểm tra trang web Hugo. Theo tài liệu Hugo, có nhiều cách bạn có thể cài đặt nó. Dưới đây là một số tùy chọn.

Mac

Bạn có thể cài đặt Hugo bằng Homebrew.

1. Mở thiết bị đầu cuối macOS của bạn.
2. Cài đặt trình quản lý gói Homebrew. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
3. Cài đặt Hugo. brew install hugo

các cửa sổ

Bạn sẽ cần một trình quản lý gói tương đương cho Windows. Ví dụ: bạn có thể sử dụng trình quản lý gói Scoop.

1. Mở Windows PowerShell, phải là một phần của Hệ điều hành Windows của bạn.
2. Nếu bạn đang cài đặt Scoop lần đầu tiên, bạn có thể cần đặt Chính sách thực thi của mình. Set-ExecutionPolicy RemoteSigned -scope CurrentUser
3. Cài đặt Scoop: iex (new-object net.webclient).downloadstring('https:
4. Cài đặt Hugo: scoop install hugo

LÀM VIDEO TRONG NGÀY

Cách tạo một dự án Hugo

Để tạo một dự án Hugo mới, bạn sẽ cần sử dụng trang web mới của hugo yêu cầu.

1. Mở thiết bị đầu cuối hoặc dấu nhắc lệnh của bạn. Điều hướng đến thư mục mà bạn muốn tạo dự án của mình.
2. Thực hiện trang web mới của hugo yêu cầu: hugo new site new-hugo-website
3. Điều hướng đến vị trí của dự án Hugo của bạn trong trình khám phá tệp của bạn.
4. Mở thư mục dự án. Bạn sẽ thấy rằng trang web Hugo mới của mình có cấu trúc tệp và thư mục cần thiết để trang web của bạn hoạt động.

Cách thêm chủ đề

Hiện tại, dự án của bạn chỉ chứa các thư mục cơ sở chính cho dự án Hugo. Chạy cục bộ trang web của bạn tại thời điểm này sẽ chỉ hiển thị một màn hình trống. Vì bạn chưa có bất kỳ thiết kế HTML, CSS hoặc giao diện người dùng nào được thiết lập cho trang web của mình, bạn sẽ cần thêm chúng.

Hugo đã cung cấp một thư viện gồm các Chủ đề Hugo được tích hợp sẵn do các nhà phát triển tạo ra.

1. Chọn một chủ đề mà bạn thích. Mỗi chủ đề có thể có các hướng dẫn thiết lập hơi khác nhau, được hiển thị trên trang xem trước tương ứng của chúng. Hướng dẫn này sẽ sử dụng chủ đề Tale làm ví dụ.

2. Điều hướng đến thư mục gốc của dự án của bạn trong một thiết bị đầu cuối hoặc dòng lệnh. cd new-hugo-website
3. Chạy lệnh để thêm chủ đề Truyện. Bạn có thể thêm chủ đề làm mô-đun con, điều này sẽ tạo một thư mục mới có tên câu chuyện bên trong chủ đề thư mục. git initgit submodule add https:

   Ngoài ra, bạn có thể sao chép kho lưu trữ câu chuyện GitHub vào thư mục chủ đề trong dự án của mình.

   git clone https:
4. Điều hướng đến thư mục dự án của bạn. Bấm vào chủ đề thư mục để mở nó. Bất kể bạn đã sử dụng lệnh nào, sẽ có một lệnh mới câu chuyện thư mục lưu trữ chủ đề mới tải xuống.

5. bên trong config.toml , thêm chủ đề câu chuyện như một phần của cấu hình. Điều này sẽ yêu cầu Hugo sử dụng HTML, CSS và các kiểu khác mà chủ đề Tale bao gồm. theme = "tale"

Cách thêm trang vào trang web của bạn

Bạn có thể viết nội dung của mình ở bất kỳ định dạng nào mà Hugo chấp nhận. Sau đó, Hugo sẽ tự động chuyển đổi các tệp của bạn thành tệp HTML khi cung cấp chúng cho người dùng. Điều này giúp quá trình xây dựng và triển khai nhanh chóng. Ví dụ này sẽ sử dụng Markdown, một ngôn ngữ văn bản thuần túy đơn giản, làm định dạng cho nội dung của bạn.

Bạn có thể viết Markdown chủ yếu bằng tiếng Anh đơn giản với một số ký hiệu được thêm vào để chỉ định bất kỳ định dạng nào. Điều này bao gồm thêm các ký hiệu để đại diện cho các tiêu đề, những từ được in đậm hoặc bất kỳ định dạng cơ bản nào khác mà bạn có thể cần.

Để thêm trang con hoặc bài đăng mới vào trang web của bạn, bạn sẽ cần thêm tệp Markdown mới vào các nội dung thư mục. Mỗi bài đăng hoặc trang sẽ có tệp Markdown riêng được liên kết với nó.

1. Mở các nội dung thư mục bên trong dự án Hugo của bạn. Tạo một tệp Markdown mới có tên là myFirstPost.md.

2. Mở tệp trong bất kỳ trình soạn thảo văn bản nào như Notepad ++ hoặc Visual Studio Code.
3. Ở đầu tệp, hãy thêm một số siêu dữ liệu. Điều này sẽ bao gồm thông tin quan trọng về bài đăng. Chủ đề bạn đang sử dụng sẽ định dạng thông tin này theo một cách nhất định trên trang. author: "Your Name"title: "My First Post"date: "2022-05-17"
4. Sau khi bạn đã thêm siêu dữ liệu, bạn có thể bắt đầu thêm nội dung của mình bằng Markdown. This is my very first post on my Hugo website!The Hugo theme being used for this site is called Tale.It is very simple to install and configure.This is some content.This is more content.
5. Vui lòng thêm nhiều tệp đánh dấu để thêm nhiều trang hơn vào trang web của bạn.

Cách chạy và kiểm tra cục bộ trang web Hugo của bạn

Để chạy trang web của bạn, hãy sử dụng hugo phục vụ yêu cầu.

1. Mở một thiết bị đầu cuối hoặc dòng lệnh.
2. Điều hướng đến thư mục gốc của dự án Hugo của bạn.
3. Chạy hugo phục vụ yêu cầu: hugo serve
4. Chờ trang web hoàn tất quá trình khởi động. Sau khi hoàn tất, thiết bị đầu cuối sẽ in một thông báo cho biết bạn có thể truy cập trang web từ địa chỉ địa phương nào. Thông thường, đây là http: // localhost: 1313 /.

5. Mở trình duyệt web và nhập http: // localhost: 1313 /hoặc bất kỳ địa chỉ nào mà thiết bị đầu cuối cung cấp cho bạn. Bạn sẽ thấy trang chính của trang web Hugo của bạn.
6. Trên trang sẽ là danh sách các bài đăng cho từng tệp đánh dấu mà bạn có. Trong trường hợp này, có hai tệp đánh dấu được điền đầy đủ nội dung. Điều này bao gồm trang myFirstPost.md mà bạn đã tạo trước đó. Nó cũng bao gồm một bài đăng mới có tên bananaCakeRecipe.md.

7. Nhấp vào liên kết tiêu đề trên một trong các bản xem trước. Nó sẽ đưa bạn đến trang đầy đủ cho bài đăng cụ thể đó.

Lưu trữ trang web Hugo của bạn

Việc thiết lập và chạy một trang web tĩnh thật đơn giản và nhanh chóng với Hugo. Bạn có thể sử dụng và định cấu hình các chủ đề được tạo sẵn và chạy cục bộ trang web Hugo của mình để thử nghiệm. Bạn cũng có thể thêm các trang nội dung vào trang web của mình bằng cách sử dụng Markdown.

Khi bạn đã tạo trang web Hugo của mình, bạn có thể bắt đầu tìm hiểu thêm về cách lưu trữ trang web đó. Có nhiều tùy chọn lưu trữ trang web miễn phí cho bạn lựa chọn như Dropbox, Google Drive hoặc OneDrive.

Cách nhận trang web lưu trữ miễn phí với Dropbox, Google Drive hoặc OneDrive

Đọc tiếp

Giới thiệu về tác giả

Sharlene Von Drehnen (16 bài báo đã xuất bản)

Sharlene là Nhà văn kỹ thuật tại MUO và cũng làm việc toàn thời gian trong lĩnh vực Phát triển phần mềm. Cô có bằng Cử nhân CNTT và đã từng có kinh nghiệm trong lĩnh vực Đảm bảo chất lượng và dạy kèm tại trường Đại học. Sharlene thích chơi game và chơi piano.

Xem thêm từ Sharlene Von Drehnen

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký