Cách bắt đầu một blog bằng Hugo

Hướng dẫn chi tiết để bắt đầu một blog mới bằng cách sử dụng Hugo từ con số 0 đến khi triển khai

Hugo là một công cụ tuyệt vời để bắt đầu một blog.

Tôi sử dụng Hugo cho chính mình trong blog này, kể từ hơn 2 năm. Tôi có một vài lý do để yêu thích việc sử dụng Hugo.

Nó làđơn giản,nhàm chán,Linh hoạt,Nhanh.

Lý do chính là nó làđơn giản. Không có nhiều thứ bạn phải học để bắt đầu.

Bạn viết nội dung bằng Markdown, một định dạng cho phép tôi sử dụng trình soạn thảo yêu thích của mình (Bear) để viết bài.

Hugo lànhàm chán. Đừng hiểu sai ý tôi, đây là một điều rất tích cực. Là một nhà phát triển, tôi luôn muốn chỉnh sửa mọi thứ ở đây và ở đó. Hugo không có công nghệ ưa thích nào. Nó được xây dựng bằng cách sử dụng Go, một trong những ngôn ngữ tôi yêu thích nhất, nhưng điều đó không có nghĩa là tôi muốn đi sâu vào nội dung của Hugo và thay đổi cách thức hoạt động của nó.

Và nó không hiển thị bất kỳ thứ gì thú vị hoặc thế hệ tiếp theo như nhiều khung JavaScript thường làm.

Do đó, nó rất nhàm chán, điều này cho tôi nhiều thời gian để làm những gì thực sự hữu ích khi làm việc trên blog:viết nội dung. Tôi tập trung vào nội dung, không tập trung vào vùng chứa nội dung.

Điều đó nói lên rằng, Hugo rất đẹpLinh hoạt. Tôi bắt đầu blog của riêng mình với một chủ đề mã nguồn mở, sau đó thay đổi nó hoàn toàn theo thời gian. Đôi khi tôi muốn làm những thứ trong trang web của mình vượt ra ngoài phạm vi của một blog đơn giản, và Hugo cho phép tôi tạo ra những thứ đó.

Cuối cùng, một lý do khác khiến tôi yêu Hugo đó làNhanh. Tại sao? Đầu tiên, nó có cốt lõi là Go, được biết đến là một ngôn ngữ rất nhanh. Và trong hệ sinh thái cờ vây, không có khái niệm phụ thuộc 100 megabyte. Mọi thứ được thực hiện càng nhanh càng tốt. Thêm vào đó, Hugo không cần phải làm một số công việc cầu kỳ cần thiết khi sử dụng công nghệ cao. Đây là một sản phẩm phụ của sự nhàm chán.

Dù sao, đủ với lời nói.

Hugo thật tuyệt vời, đặc biệt nếu bạn là một nhà phát triển và bạn sẵn sàng viết trong Markdown. Những người không am hiểu về công nghệ có thể từ chối sử dụng Markdown và điều đó hoàn toàn có thể hiểu được.

Ngoài ra, bạn phải chuẩn bị cho quy trình làm việc tập trung vào Git để làm cho mọi thứ thực sự hiệu quả.

Những gì bạn làm là bạn viết một bài đăng bằng Markdown, sau đó cam kết các thay đổi của bạn vào kho lưu trữ Git, phổ biến nhất là trên GitHub và một số công nghệ keo triển khai các thay đổi trên máy chủ lưu trữ trang web.

Lưu trữ một trang web Hugo

Một blog của Hugo hoàn toàntĩnh. Điều này có nghĩa là bạn không cần phải lưu trữ máy chủ của riêng mình hoặc sử dụng một dịch vụ đặc biệt cho nó.

Trang Netlify, Now và GitHub là 3 nơi tuyệt vời để bạn có thể lưu trữ blog Hugo miễn phí.

Chi phí duy nhất là bạn phải duy trì cho tên miền. Tôi không thể nhấn mạnh thêm tầm quan trọng của việc có tên miền của riêng bạn. Không.github.iohoặc là.netlify.comhoặc là.now.shtrang web, xin vui lòng.

Các trang Hugo của riêng tôi được lưu trữ trên Netlify.

Chọn một miền

Đặt blog của bạn dưới tên miền của riêng bạn. Chọn một. Sử dụng tên của chính bạn. Và sử dụng.comhoặc là.blog. Đừng cố tỏ ra khéo léo bằng cách sử dụng miền bản địa hóa, đừng sử dụng.io..comchỉ mang lại ấn tượng tốt hơn và nó có thể tái sử dụng cho tất cả các dự án trong tương lai của bạn, không chỉ để lưu trữ blog của bạn. Tôi đã chọn nó.

Ồ và nếu bạn có một miền cũ nằm xung quanh, chỉ cần sử dụng nó. Tại sao? Miền của bạn càng cũ thì càng tốt.

Lưu ý về tên miền phụ: mỗi tên miền phụ, đối với Google, là một trang web khác nhau. Vì vậy, nếu miền của bạn làflaviocopes.comvà bạn tạo blog của mình trongblog.flaviocopes.com, thì đó là một trang web hoàn toàn mới đối với Google và nó sẽ có xếp hạng riêng tách biệt với tên miền chính.

Đề xuất của tôi là tránh hoàn toàn các tên miền phụ.

Cài đặt Hugo

Để cài đặt Hugo trên macOS, từ thiết bị đầu cuối của bạn, hãy chạy

brew install hugo

Cácbrewlệnh không tồn tại trên máy Mac của bạn? Kiểm traHướng dẫn về tiếng Homebrew

Đối với Windows và Linux, hãy kiểm trahướng dẫn cài đặt chính thức.

Tạo một trang Hugo

Sau khi cài đặt Hugo, bạn có thể tạo trang Hugo bằng cách chạy

hugo new site myblog

Tôi đề nghị chạy điều này thành mộtwwwthư mục trong Thư mục chính của bạn, vì lệnh sẽ tạo mộtmyblogthư mục nơi bạn chạy nó.

Chọn một chủ đề

Bây giờ trước khi bạn có thể bắt đầu, bạn cần phải chọn một chủ đề. Tôi ước Hugo bao gồm một chủ đề mặc định để làm cho mọi thứ trở nên đơn giản, nhưng nó không.

Có rất nhiều sự lựa chọn vềhttps://themes.gohugo.io. Đề xuất cá nhân của tôi là bắt đầu vớihttps://themes.gohugo.io/ghostwriter/và chỉnh sửa nó sau.

Tôi cũng khuyên bạn nên tránhgit clonequy trình làm việc mà họ đề xuất trên trang đó, vì bạn chắc chắn sẽ điều chỉnh chủ đề trong tương lai và tôi thấy tốt nhất nên có một kho lưu trữ duy nhất cho cả nội dung và chủ đề. Nó đơn giản hóa việc triển khai.

Vì vậy, hãy đi đếnhttps://github.com/jbub/ghostwriter/archive/master.zipđể tải xuống phiên bản hiện tại của chủ đề.

Sau đó, giải nén nó trongthemes/ghostwriterthư mục trong trang web Hugo mới tạo của bạn:

Chú ý rằng có mộtexampleSitethư mục trongthemes/ghostwriter. Mở nó và mở nócontentthư mục con. Trong đó, bạn có thể thấypage,postvàprojectcác thư mục con.

Sao chéppagevàpostbên trongcontentthư mục của trang web:

Cấu hình

Dữ liệu mẫu cũng cung cấp một mẫuconfig.tomltrong tập tinthemes/ghostwriter/exampleSite/config.toml. Đây là tệp cấu hình Hugo, nó cho Hugo biết một số chi tiết về cấu hình mà bạn không cần phải mã hóa thông tin trong chủ đề.

Tôi khuyên bạn không nên sao chép cái đó, vì nó có quá nhiều thứ, và thay vào đó hãy sử dụng cái này:

baseurl = "/"
title = "My blog"
theme = "ghostwriter"

[Params]
mainSections = [“post”]
intro = true
headline = “My headline”
description = “My description”
github = “https://github.com/XXX”
twitter = “https://twitter.com/XXX”
email = “[email protected]”
opengraph = true
shareTwitter = true
dateFormat = “Mon, Jan 2, 2006”


[Permalinks]
post = “/:filename/”

Bạn có thể tự do tùy chỉnh thông tin trong tệp này, sau đó.

Bây giờ từ dòng lệnh, hãy chạy:

hugo serve

Mởhttp://localhost:1313trong trình duyệt của bạn và bạn sẽ có thể xem trang web trực tiếp!

Đây là trang chủ của trang web.

Có một danh sách các bài đăng được lấy từcontent/postthư mục của trang web của bạn:

Nhấp vào đầu tiên, được gọi là “Tạo chủ đề mới”:

Bạn có thể mở tệpcontent/post/creating-a-new-theme.mdđể thay đổi bất cứ điều gì trong bài đăng.

Nếu bạn lưu, trang web sẽ tự động cập nhật nội dung mới.

Điều này là khá tuyệt vời, phải không?

Bạn có thể tạo một bài mới bằng cách tạo một bài mới.mdtập tin, thêm tiền tố vào bất cứ thứ gì bạn muốn. Bạn có thể sử dụng số tăng dần, nếu muốn. Hoặc sử dụng một ngày.

Nếu một cái gì đó không giống như bạn muốn, bạn có thể mởthemes/ghostwriter/layoutsthư mục và tinh chỉnh nó.

Mẫu "bài đăng" được xác định trongthemes/ghostwriter/layouts/post/single.html:

Hugo sử dụng các mẫu cờ vây. Cú pháp có thể khá xa lạ nhưng trang web Hugo đã làm rất tốt trong việc giải thích chúng về điều nàyGiới thiệu mẫu Go.

Tuy nhiên, hãy cố gắng không nhìn vào việc tùy chỉnh mẫu của bạn ngay bây giờ.

Nếu bạn muốn điều chỉnh màu sắc, hãy thêm một<style>gắn thẻ với một số CSS trongthemes/ghostwriter/layouts/partials/header.html.

Ví dụ: làm cho các liên kết có màu đen:

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

Thay vào đó, hãy tập trung vào nội dung.

Xóa các tệp hiện có và viết 2-3 bài đăng để bắt đầu.

Quá dễ để mắc kẹt trong việc làm mọi thứ hoàn hảo như bạn muốn, nhưng điều quan trọng là nội dung.

Và trang web của bạn càng sạch thì càng tốt cho độc giả của bạn.

Bây giờ hãy để tôi viết một chút về triển khai.

Triển khai trang Hugo cho Netlify

Tôi muốn giới thiệu cách triển khai trang Hugo ở 2 trong số các dịch vụ mà tôi yêu thích nhất: Netlify và Now.

Đầu tiên, tôi sẽ tạo một kho lưu trữ GitHub để lưu trữ trang web.

Tôi mở GitHub Desktop, một ứng dụng tôi sử dụng hàng ngày và là một phần trong quy trình làm việc của tôi. Đó là cách đơn giản nhất để sử dụng Git.

Từ menu Tệp, tôi đã nhấn tùy chọn “Kho lưu trữ mới”:

Có thể tạo cùng một màn hình bằng cách kéomyblogthư mục vào ứng dụng.

Tôi đã đưamyblogđặt tên cho kho lưu trữ và chọn đường dẫn chính xác cho kho lưu trữ.

Quá trình tự động thực hiện cam kết đầu tiên:

Bây giờ chúng ta có thể nhấp vào nút “Xuất bản kho lưu trữ” để đẩy kho lưu trữ lên GitHub:

Tất nhiên, bạn có thể giữ repo ở chế độ riêng tư.

Sau khi repo có trong GitHub:

chúng ta có thể chuyển sang Netlify.

Từ bảng điều khiển Netlify của tôi, tôi đã nhấn nút “Trang web mới từ Git”:

Nhấn GitHub, cho phép Netlify truy cập vào các kho lưu trữ riêng tư của tôi, sau đó tôi chọn kho mà tôi vừa tạo:

Netlify tự động xác định nó là một đại diện Hugo và tự động nhập lệnh xây dựng:

Nhấp vào "Triển khai trang web" bắt đầu quá trình triển khai:

Trên một trang web thực, tôi sẽ thiết lập một miền tùy chỉnh. Netlify có tùy chọn mua miền thông qua họ và đó là một quá trình rất (RẤT) đơn giản. Tôi khuyên bạn nên nó. Trang web có thể hoạt động chỉ sau vài phút kể từ khi mua miền.

Một ngẫu nhiên.netlify.comtên miền phụ được đính kèm với trang web, trong trường hợp nàypedantic-engelbart-500c9a.netlify.comvà HTTPS tự động được bật.

Do đó, chúng tôi có thể xem trực tiếp trang web ngay lập tức:

Bây giờ nếu bạn cố gắng chỉnh sửa nội dung nào đó trong phiên bản cục bộ của mình, bạn chỉ cần đẩy các thay đổi lên GitHub và Netlify sẽ tự động cập nhật trang web. Bạn có thể thấy nó xây dựng trang web trong bảng điều khiển "Tổng quan" của trang web:

Để biết thêm về Netlify, tôi khuyên bạn nên xemHướng dẫn Netlify.

Triển khai trang Hugo cho Zeit Now

Zeit bây giờ được gọi làVercelvà hướng dẫn này có thể đã lỗi thời

Một nền tảng tuyệt vời khác mà bạn có thể sử dụng cho blog Hugo của mình là Zeit Now.

Khi bạn đăng ký, từ trang tổng quan, bạn nhấn vàoDự án mớicái nút.

Lần đầu tiên bạn triển khai từ GitHub, trước tiên bạn phải cài đặt ứng dụng GitHub bằng cách nhấp vào “Cài đặt ngay bây giờ cho GitHub”:

Thao tác này đưa bạn đến trang GitHub cho ứng dụng, nơi bạn có thể ủy quyền cho tất cả các repo của mình hoặc chỉ cho một số:

Sau khi bạn quay lại, hãy nhấp vào nút “Dự án mới từ GitHub”:

Chọn dự án và nhấp vào “Nhập”:

Trong khi chờ đợi, hãy chuyển đến thư mục chính củamysitevà thêm mộtpackage.jsontệp với nội dung này:

{
  "scripts": {
    "build": "hugo"
  }
}

Điều này cho Bây giờ làm thế nào để triển khai trang web.

Khi bạn quay lại trang tổng quan, việc triển khai mới sẽ sớm bắt đầu và bạn sẽ thấy trang web hoạt động trực tiếp:

Lưu ý rằng trong Hiện tại, bạn có 3 URL mà bạn có thể sử dụng để truy cập trang web:

  • myblog.flaviocopes.now.sh
  • myblog-alpha-swart.now.sh
  • myblog-git-master.flaviocopes.now.sh

Bạn có thể chọn một trong những bạn thích.

Ngoài ra, mỗi triển khai cũng có URL riêng của nó. Trong trường hợp này tôi đã cómyblog-h8xks5jhn.now.shnhưng nó thay đổi với mỗi lần triển khai.

Và tất nhiên bạn cũng có thể thêm miền của mình. Zeit có một dịch vụ tuyệt vời để mua miền của bạn trực tiếp từ họ, có sẵn tạihttps://zeit.co/domains.

Và nếu bạn thích làm việc với dòng lệnh,nowlệnh cũng cho phép bạn mua các miền từ đó.

Tôi thực sự khuyên bạn nên kiểm tra của tôiHướng dẫn Zeit Now.


Các hướng dẫn phòng thí nghiệm khác:


Công nghệ Wiki trực tuyến!