Cách cài đặt Hugo Site Generator trên Ubuntu 18.04 LTS

[theanh]

Hugo là một khuôn khổ mã nguồn mở và miễn phí được viết bằng ngôn ngữ Go có thể được sử dụng để tạo trang web một cách dễ dàng. Đây là trình tạo trang web tĩnh đơn giản, nhanh chóng và an toàn, bạn không cần bất kỳ cơ sở dữ liệu nào để chạy nó. Hugo hỗ trợ các loại nội dung không giới hạn, phân loại, menu, nội dung động do API điều khiển, v.v., tất cả đều không cần plugin. Hugo đi kèm với một bộ tính năng phong phú bao gồm Quản lý nội dung mạnh mẽ, Mẫu tích hợp, Mã ngắn, Đầu ra tùy chỉnh, Đa ngôn ngữ và nhiều tính năng khác.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách cài đặt Hugo trên máy chủ Ubuntu 18.04 LTS.

Yêu cầu​

• Một máy chủ chạy Ubuntu 18.04.
• Một địa chỉ IP tĩnh 136.243.240.39 được cấu hình trên máy chủ của bạn.
• Một mật khẩu gốc được thiết lập cho máy chủ của bạn.

Bắt đầu​

Trước khi bắt đầu, bạn sẽ cần cập nhật hệ thống của mình lên phiên bản mới nhất. Bạn có thể thực hiện việc này bằng cách chạy lệnh sau:

apt-get update -y
apt-get upgrade -y

Sau khi máy chủ của bạn được cập nhật, hãy khởi động lại máy chủ để áp dụng các thay đổi.

Cài đặt Hugo​

Theo mặc định, phiên bản mới nhất của Hugo không có trong kho lưu trữ mặc định của Ubuntu 18.04. Vì vậy, bạn sẽ cần tải xuống từ kho lưu trữ Git. Bạn có thể tải xuống bằng lệnh sau:

wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb

Sau khi tải xuống hoàn tất, hãy cài đặt Hugo bằng lệnh sau:

dpkg -i hugo_0.58.2_Linux-64bit.deb

Nếu bạn gặp bất kỳ lỗi phụ thuộc nào, hãy chạy lệnh sau để giải quyết lỗi phụ thuộc:

apt-get install -f

Tiếp theo, bạn có thể kiểm tra phiên bản Hugo bằng lệnh sau:

hugo version

Bạn sẽ nhận được kết quả sau:

Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z

Bạn cũng có thể xem danh sách các tùy chọn có sẵn với Hugo bằng cách chạy lệnh sau:

hugo --help

Bạn sẽ nhận được kết quả đầu ra sau:

hugo là lệnh chính, được sử dụng để xây dựng trang Hugo của bạn.Hugo là Trình tạo trang tĩnh nhanh và linh hoạtđược spf13 và những người bạn xây dựng bằng tình yêu trong Go.Tài liệu đầy đủ có tại http://gohugo.io/.Cách sử dụng: hugo [cờ] hugo [lệnh]Các lệnh khả dụng: config In cấu hình trang convert Chuyển đổi nội dung của bạn sang các định dạng khác nhau triển khai Triển khai trang web của bạn lên nhà cung cấp Đám mây. env In phiên bản Hugo và thông tin môi trường gen Một bộ sưu tập gồm nhiều trình tạo hữu ích. help Trợ giúp về bất kỳ lệnh nào nhập Nhập trang web của bạn từ những người khác. list Liệt kê các loại nội dung khác nhau mod Nhiều trình trợ giúp Mô-đun Hugo. new Tạo nội dung mới cho máy chủ trang web của bạn Phiên bản máy chủ web hiệu suất cao In số phiên bản của HugoCờ: -b, --baseURL chuỗi tên máy chủ (và đường dẫn) đến gốc, ví dụ: http://spf13.com/ -D, --buildDrafts bao gồm nội dung được đánh dấu là bản nháp -E, --buildExpired bao gồm nội dung đã hết hạn -F, --buildFuture bao gồm nội dung có ngày xuất bản trong tương lai --cacheDir chuỗi đường dẫn hệ thống tệp đến thư mục bộ đệm. Mặc định: $TMPDIR/hugo_cache/ --cleanDestinationDir xóa các tệp khỏi đích không tìm thấy trong các thư mục tĩnh --config chuỗi tệp cấu hình (mặc định là path/config.yaml|json|toml) --configDir chuỗi thư mục cấu hình (mặc định là "config") -c, --contentDir chuỗi đường dẫn hệ thống tệp đến thư mục nội dung --debug đầu ra gỡ lỗi -d, --destination chuỗi đường dẫn hệ thống tệp để ghi tệp vào --disableKinds chuỗi vô hiệu hóa các loại trang khác nhau (trang chủ, RSS, v.v.) --enableGitInfo thêm bản sửa đổi Git, ngày và thông tin tác giả vào các trang -e, --environment chuỗi môi trường xây dựng --forceSyncStatic sao chép tất cả các tệp khi tĩnh thay đổi. --gc bật để chạy một số tác vụ dọn dẹp (xóa các tệp bộ đệm không sử dụng) sau khi dựng -h, --help trợ giúp cho hugo --i18n-warnings in các bản dịch bị thiếu --ignoreCache bỏ qua thư mục bộ đệm --ignoreVendor bỏ qua bất kỳ thư mục _vendor nào -l, --layoutDir chuỗi đường dẫn hệ thống tệp đến thư mục bố cục --log bật Ghi nhật ký --logFile chuỗi nhật ký Đường dẫn tệp (nếu được đặt, ghi nhật ký sẽ tự động được bật) --minify thu nhỏ bất kỳ định dạng đầu ra nào được hỗ trợ (HTML, XML, v.v.) --noChmod không đồng bộ chế độ cấp phép của tệp --noTimes không đồng bộ thời gian sửa đổi của tệp --path-warnings in cảnh báo về các đường dẫn đích trùng lặp, v.v. --quiet dựng ở chế độ im lặng --renderToMemory kết xuất vào bộ nhớ (chỉ hữu ích cho thử nghiệm chuẩn) -s, --source chuỗi đường dẫn hệ thống tệp để đọc tệp tương đối từ --templateMetrics hiển thị số liệu về thực thi mẫu --templateMetricsHints tính toán một số gợi ý cải tiến khi kết hợp với --templateMetrics -t, --theme chuỗi chủ đề để sử dụng (nằm trong /themes/THEMENAME/) --themesDir chuỗi đường dẫn hệ thống tệp đến thư mục chủ đề --trace tệp ghi theo dõi tệp (nói chung là không hữu ích) -v, --verbose đầu ra chi tiết --verboseLog ghi nhật ký chi tiết -w, --watch theo dõi hệ thống tệp để biết các thay đổi và tạo lại khi cần thiết

Sau khi hoàn tất, bạn có thể tiến hành bước tiếp theo.

Tạo trang web bằng Hugo​

Hugo hiện đã được cài đặt, đã đến lúc tạo trang web và nội dung bằng Hugo.

Bạn có thể tạo trang web mới có tên là test.example.com bằng cách chạy lệnh sau:

hugo new site test.example.com

Sau khi trang web được tạo thành công, bạn sẽ nhận được kết quả sau:

Xin chúc mừng! Trang web Hugo mới của bạn đã được tạo trong /root/test.example.com.Chỉ cần thêm vài bước nữa là bạn đã sẵn sàng:1. Tải xuống một chủ đề vào thư mục cùng tên. Chọn một chủ đề từ https://themes.gohugo.io/ hoặc tạo chủ đề của riêng bạn bằng lệnh "hugo new theme ".2. Có lẽ bạn muốn thêm một số nội dung. Bạn có thể thêm các tệp riêng lẻ bằng lệnh "hugo new /.".3. Khởi động máy chủ trực tiếp tích hợp thông qua "hugo server".Truy cập https://gohugo.io/ để biết hướng dẫn bắt đầu nhanh và tài liệu đầy đủ.

Bạn cũng có thể liệt kê tất cả các tệp được tạo trong trang web của mình bằng lệnh sau:

ls test.example.com/

Bạn sẽ thấy kết quả sau:

archetypes config.toml content data layouts static themes

Tạo trang Giới thiệu và Bài đăng trên blog​

Bây giờ, hãy thay đổi thư mục thành trang web của bạn và tạo trang about.md bằng lệnh sau:

cd test.example.com
hugo new about.md

Bạn sẽ thấy kết quả sau:

/root/test.example.com/content/about.md created

Tiếp theo, hãy mở tệp about.md và thêm một số nội dung:

nano content/about.md

Thực hiện các thay đổi sau:

---title: "About"date: 2019-09-10T06:57:08Zdraft: false---Tôi là hitesh jethva, làm biên tập viên kỹ thuật.

Lưu và đóng tệp khi bạn hoàn tất. Sau đó, tạo bài đăng đầu tiên của bạn bằng lệnh sau:

hugo new post/first.md

Bạn sẽ thấy kết quả sau:

/root/test.example.com/content/post/first.md đã tạo

Tiếp theo, mở tệp first.md và thêm một số nội dung:

nano content/post/first.md

Thực hiện các thay đổi sau:

---title: "First"date: 2019-09-10T06:58:51Zdraft: false---## Đây là bài đăng blog đầu tiên của tôiXin chào, bạn khỏe không!

Thiết lập chủ đề đầu tiên của bạn​

Trang giới thiệu và bài đăng trên blog của bạn hiện đã được tạo, đã đến lúc thiết lập chủ đề đầu tiên của bạn.

Trước tiên, hãy đổi thư mục thành themes và tải xuống hugo-strata-theme bằng lệnh sau:

cd themes
wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Sau khi tải xuống, hãy giải nén chủ đề đã tải xuống bằng lệnh sau:

unzip master.zip

Tiếp theo, đổi tên chủ đề đã giải nén như hiển thị bên dưới:

mv hugo-strata-theme-master hugo-strata-theme

Tiếp theo, bạn sẽ cần sao chép nội dung của tệp config.toml mẫu từ themes/hugo-strata-theme vào tệp config.toml của trang web của bạn nằm tại /root/test.example.com/config.toml.

Bạn có thể thực hiện bằng lệnh sau:

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

Tiếp theo, hãy cập nhật biến baseurl và cũng bao gồm trang giới thiệu mới của bạn vào phần điều hướng của chủ đề này trong tệp config.toml như được hiển thị bên dưới:

nano ../config.toml

Cập nhật URL cơ sở như được hiển thị bên dưới:

baseurl = "/"

Ngoài ra, hãy thêm các dòng sau để bao gồm trang giới thiệu mới của bạn:

[[menu.main]] name = "About" url = "about" weight = 5

Lưu và đóng tệp khi bạn hoàn tất.

Tiếp theo, bạn cũng sẽ cần cập nhật bố cục trang đích của mình bằng bố cục mẫu của chủ đề nằm tại themes/hugo-strata-theme/layouts/index.html thành test.example.com/layouts/index.html:

nano /root/test.example.com/layouts/index.html

Thêm nội dung sau:

{{ define "main" }} {{ if not .Site.Params.about.hide }} {{ partial "about" . }} {{ end }} {{ if not .Site.Params.portfolio.hide }} {{ partial "portfolio" . }} {{ end }} {{ if not .Site.Params.recentposts.hide }} {{ partial "recent-posts" . }} {{ end }} {{ if not .Site.Params.contact.hide }} {{ partial "contact" . }} {{ end }}{{ end }}

Lưu và đóng tệp khi bạn hoàn tất.

Sau khi hoàn tất, bạn có thể tiến hành bước tiếp theo.

Xây dựng trang web của bạn​

Giao diện của bạn hiện đã được định cấu hình cho trang web của bạn. Đã đến lúc xây dựng trang web của bạn. Để thực hiện, hãy thay đổi thư mục thành trang web của bạn và xây dựng trang web bằng lệnh sau:

cd /root/test.example.com
hugo

Bạn sẽ thấy đầu ra sau:

| EN+------------------+----+ Trang | 17 Trang phân trang | 0 Tệp không phải trang | 0 Tệp tĩnh | 26 Hình ảnh đã xử lý | 0 Biệt danh | 5 Sơ đồ trang web | 1 Đã dọn dẹp | 0Tổng cộng trong 18 ms

Bây giờ, hãy khởi động máy chủ Hugo của bạn và liên kết nó với địa chỉ IP máy chủ của bạn bằng cách chạy lệnh sau:

hugo server --bind=0.0.0.0 --baseUrl=http://136.243.240.39 -D -F

Sau khi máy chủ khởi động thành công, bạn sẽ thấy đầu ra sau:

| EN+------------------+----+ Trang | 17 Trang phân trang | 0 Tệp không phải trang | 0 Tệp tĩnh | 26 Hình ảnh đã xử lý | 0 Biệt danh | 5 Sơ đồ trang web | 1 Đã dọn dẹp | 0Tổng cộng trong 28 msĐang theo dõi các thay đổi trong /root/test.example.com/{content,data,layouts,static,themes}Đang theo dõi các thay đổi cấu hình trong /root/test.example.com/config.tomlĐang phục vụ các trang từ bộ nhớĐang chạy ở Chế độ kết xuất nhanh. Để xây dựng lại hoàn toàn khi thay đổi: hugo server --disableFastRenderWeb Server có tại http://136.243.240.39:1313/ (liên kết địa chỉ 0.0.0.0)Nhấn Ctrl+C để dừng

Sau khi hoàn tất, bạn có thể tiếp tục truy cập giao diện web Hugo.

Truy cập Hugo Server​

Máy chủ Hugo của bạn hiện đã được khởi động và đang lắng nghe trên cổng 1313. Tiếp theo, hãy mở trình duyệt web của bạn và nhập URL http://136.243.240.39:1313. Bạn sẽ được chuyển hướng đến bảng điều khiển máy chủ Hugo của mình như hiển thị bên dưới:



Bây giờ, hãy nhấp vào Giới thiệu ở ngăn bên trái. Bạn sẽ thấy trang Giới thiệu của mình trong hình ảnh sau:





Bây giờ, hãy nhấp vào nút Blog ở ngăn bên trái. Bạn sẽ thấy bài đăng trên blog của mình trong hình ảnh sau:

Kết luận​

Trong hướng dẫn trên, chúng ta đã học cách cài đặt máy chủ Hugo trên máy chủ Ubuntu 18.04. Chúng ta cũng đã học cách tạo một trang web với khoảng trang và chủ đề bằng Hugo. Để biết thêm thông tin về Hugo, bạn có thể truy cập tài liệu chính thức của Hugo tại Hugo Doc. Hãy thoải mái hỏi tôi nếu bạn có bất kỳ câu hỏi nào.