0
0
Lập trình
Hưng Nguyễn Xuân 1
Hưng Nguyễn Xuân 1xuanhungptithcm

Xuất bản từ Hugo lên dev.to: Hướng dẫn chi tiết

Đăng vào 2 ngày trước

• 4 phút đọc

Xuất bản từ Hugo lên dev.to: Hướng dẫn chi tiết

Việc xuất bản nội dung từ blog của bạn lên nền tảng dev.to có thể giúp tăng cường sự hiện diện và tiếp cận của bạn. Trong bài viết này, chúng ta sẽ khám phá cách xuất bản từ Hugo, một công cụ tạo blog tĩnh, lên dev.to một cách hiệu quả nhất. Bạn sẽ học được cách xử lý mã nguồn, quản lý liên kết và tối ưu hóa nội dung để phù hợp với yêu cầu của dev.to.

Mục tiêu

Trước khi bắt đầu, hãy xác định những mục tiêu chính mà bạn muốn đạt được:

  • Đảm bảo các khối mã được xuất bản chính xác.
  • Chuyển đổi các liên kết tương đối thành liên kết tuyệt đối để tránh lỗi khi xuất bản trên dev.to.

Giải pháp đã có

Tôi đã tìm thấy một số giải pháp tiềm năng như hugodevto, nhưng có một số vấn đề:

  • Tôi không muốn phải cập nhật thủ công hàng trăm bài viết với ID dev.to.
  • Một số vấn đề phức tạp với định dạng đầu ra và liên kết.

Cuối cùng, nó có vẻ hơi cồng kềnh cho nhu cầu của tôi.

Sử dụng Hugo

Sau một thời gian làm việc với Hugo, tôi đã có một số kinh nghiệm về cách cấu hình các định dạng đầu ra. Tuy nhiên, cần lưu ý một số giới hạn:

Giới hạn

Hugo không cung cấp các hook để xử lý tất cả các loại nội dung. Bạn sẽ thấy một số mã HTML trong đầu ra. Tuy nhiên, điều này không thành vấn đề vì Forem (nền tảng của dev.to) sẽ xử lý chúng. Nhưng nếu bạn muốn tạo ra mã Markdown có thể sử dụng trong Jekyll, điều này có thể không hoạt động tốt.

Định nghĩa loại nội dung mới

Để bắt đầu, chúng ta cần định nghĩa một loại nội dung mới để xuất ra Markdown:

toml Copy
[outputFormats.jekyll]
mediaType = "text/markdown"
baseName = "index"
isPlainText = true
isHTML = false
notAlternative = true
path = 'jekyll'  
[outputs]
page = ['html', 'jekyll']  

Bạn cũng cần tạo một mẫu cơ bản trước khi Hugo xuất ra các tệp Markdown.

layouts/_default/single.jekyll.md

Copy
---
title: {{ .Title }}
published: true
date: {{ .Date }}
{{- with .Params.tags }}
tags: [{{ delimit . ", " }}]
{{- end }}
canonical_url: {{ .Permalink }}
---

{{ .Content }}

Với cấu hình này, khi bạn chạy hugo build, các tệp .md sẽ được xuất ra, nhưng nội dung bên trong sẽ là HTML.

Xuất mã khối dưới dạng Markdown

Chúng ta có thể sử dụng hook render cho khối mã để “chuyển đổi” chúng về Markdown:

layouts/_default/_markup/render-codeblock.jekyll.md

Copy
{{ .Type }}  
{{ .Inner }}

Xuất liên kết tuyệt đối

Tôi đã có một hàm render-link khá hoàn chỉnh, vì vậy việc cập nhật nó chỉ là sao chép và thay thế các liên kết tương đối bằng các liên kết tuyệt đối.

Đây là mã để xuất liên kết:

layouts/_default/_markup/render-link.jekyll.md

Copy
{{ /* nội dung khác */ }}
  <a href="{{ printf "%s#%s" .PageInner.Permalink $u.Fragment | safeURL }}" {{ with .Title }}title="{{ . }}"{{ end }}>{{ $text }}</a>
{{ /* nội dung khác */ }}

Kết quả

Với những thay đổi tương đối nhỏ này, tôi có thể xuất ra các tệp Markdown mà tôi có thể đưa vào dev.to và nó hoạt động tốt cho một số bài viết tôi đã thiết lập.

Các bước tiếp theo

Hình ảnh

Một vấn đề lớn mà tôi gặp phải là hình ảnh - điều này không quan trọng với tôi vì tôi hiếm khi sử dụng hình ảnh. Tuy nhiên, tôi dự đoán nó sẽ dễ dàng đạt được bằng cách sử dụng hook render cho hình ảnh.

Thẻ

Dev.to có giới hạn thẻ nghiêm ngặt là bốn thẻ. Hiện tại, tôi phải chỉnh sửa thủ công khi tạo bài viết trên dev.to. Tốt hơn, tôi có thể thêm một trường devto_tags vì các thẻ địa phương của tôi không phải lúc nào cũng phù hợp với dev.to.

Tôi cũng có thể viết một kịch bản để tự động thiết lập trường devto_tags dựa trên bốn thẻ đầu tiên và ánh xạ từ các thẻ của tôi đến các thẻ trên dev.to nếu cần thiết.

Tự động hóa

Khi hai vấn đề trên được giải quyết, tôi có thể tự động hóa toàn bộ quy trình:

  • Lấy tất cả bài viết.
  • Lấy tất cả bài viết địa phương.
  • Ánh xạ chúng dựa trên URL canonial.
  • Tải lên các bài viết đã được cập nhật.

Không phải tất cả bài viết của tôi đều mang tính kỹ thuật, vì vậy tôi cũng muốn thêm một trường vào frontmatter (devto_published) và tìm cách chỉ đẩy cập nhật nếu có thay đổi.

Kết luận

Hiện tại, tôi đã có một giải pháp hoạt động. Nếu dev.to mang lại đủ lưu lượng truy cập và giá trị, tôi sẽ xem xét dành thêm thời gian để hoàn thiện hơn. Trong thời gian này, mọi thứ đều hoạt động tốt!

Hãy tự do sử dụng bất kỳ mã nào trong bài viết này nếu bạn thấy hữu ích.

Câu hỏi thường gặp

Tôi có thể xuất bản trên dev.to từ Hugo không?

Có, bạn có thể xuất bản từ Hugo lên dev.to bằng cách điều chỉnh các định dạng đầu ra.

Làm thế nào để chuyển đổi liên kết tương đối thành liên kết tuyệt đối?

Bạn có thể sử dụng hook render để cập nhật liên kết tương đối thành liên kết tuyệt đối trong quá trình xuất bản.

Có cần phải tự động hóa quy trình không?

Có, tự động hóa quy trình giúp tiết kiệm thời gian và giảm thiểu sai sót khi xuất bản nội dung.

Tài nguyên tham khảo

Hãy bắt đầu chia sẻ nội dung của bạn trên dev.to ngay hôm nay!

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào