Xây dựng blog 1000 năm với trang Jekyll và GitHub

Bạn cần website tồn tại lâu dài, không tốn hosting, không cần database, không cần phải nắm ngôn ngữ lập trình thì GitHub là một công cụ tạo ...

Bạn cần website tồn tại lâu dài, không tốn hosting, không cần database, không cần phải nắm ngôn ngữ lập trình thì GitHub là một công cụ tạo trang web với định dạng markdown, đồng thời sử dụng giao diện (template) từ Jekyll. Xem mẫu GitHub Phòng trọ Quận 7

Vì sao nói GitHub có thể tồn tại tới 1000 năm?

Theo thông tin từ dự án Artic-Vault, các source code có thể được lưu vĩnh viễn như hạt giống có thể tồn tại được tới 1000 năm. Xem thông tin tại archiveprogram.github.com/artic-vault

Các mẫu Jekyll miễn phí có thể tải về từ

https://jekyllthemes.io/

https://jamstackthemes.dev/

http://jekyllthemes.org/

Trong bài viết này chúng tôi đề cập một số mẫu template blog cho GitHub có thể sử dụng làm website hoặc blog.

Template for GitHub Jekyll free download

Minimal MistakesFree Flexible two-column Jekyll theme

Demo Minimal Mistakes

Hướng dẫn

5 mẫu theme GitHub đẹp từ WowThemes.net

https://www.wowthemes.net/freebies/jekyll/

Xem demo jekyll-theme-mundana và mediumish-theme-jekyll.

Đăng ký tài khoản bên stackbit.com để launch template từ jamstackthemes.dev

Mẫu aicurious.io

A theme for Hugo based on VMware Clarity

Demo

Để viết bài, bạn cần dùng phần mềm Typora để copy/edit các bài viết có sẵn trên web rồi lưu lại dưới dạng file có đuôi *.md. Những hình ảnh được copy vào, sau khi chuyển sang dạng file .md sẽ được giữ nguyên (Typora tự động chuyển thành link đến trang web chứa hình ảnh đó).

Sau đó dùng phần mềm Notepad++ để mở file đuôi .md ấy sẽ thấy file được lưu kiểu Markdown. Các bài viết muốn hiển thị trên trang blog cần được đặt trong thư mục _posts trên respositories theo định dạng yyyy-mm-dd-Tên-Bài-Viết-Không-Có-Dấu-Tiếng-Việt-Với-KhoảngTrắng-Thay-Bằng-Dấu-Gạch-Nối

Để thuận tiện, bạn có thể dùng phần mềm GitHub Desktop để tải repositories về máy tính để dễ nhìn thấy thư mục _posts và lưu các file đuôi .md vào thư mục này.

Xem thêm hướng dẫn

1. Lưu Trữ Trên Tài Khoản GitHub Của Bạn 

Là người dùng GitHub, bạn có quyền sử dụng một trang web “người dùng” miễn phí (trái ngược với trang web “dự án”), sẽ tồn tại tại http://yourusername.github.io. Không gian này lý tưởng để lưu trữ một blog Jekyll!

Phần tốt nhất là bạn có thể chỉ cần đặt blog Jekyll chưa xây dựng của mình trên nhánh chính của kho lưu trữ người dùng của bạn và GitHub Pages sẽ xây dựng trang web tĩnh và phục vụ bạn. Bạn không phải lo lắng về quá trình xây dựng - tất cả đều được chăm sóc.

Bấm vào nút “Settings” trong repository vừa được fork (được phân nhánh mới) và thay đổi tên của repository thành TênUserName.github.io.

Trang web của bạn có thể sẽ hoạt động ngay lập tức. Bạn có thể kiểm tra bằng cách vào http://yourusername.github.io. Đừng lo lắng nếu nó chưa hoạt động vì ở bước tiếp theo sẽ buộc trang web ấy phải được tạo.

Chủ đề của blog trông như thế này sau khi được chia nhỏ.

Chúng ta đã có một trang web Jekyll đang hoạt động!

Hãy lùi lại một chút và xem xét một số vấn đề phổ biến nhất cần lưu ý khi lưu trữ trang web Jekyll trên Trang GitHub.

Vấn đề # 1 : Tạo một trang web Jekyll trên hosting đã mua thông qua các dòng lệnh có thể gây khó chịu và tốn thời gian vì bạn phải cài đặt và cấu hình các phụ thuộc như Ruby và RubyGems. Hãy để GitHub Pages xây dựng trang web miễn phí cho bạn, cho đến khi bạn thực sự có nhu cầu xây dựng nó trên host riêng

Vấn đề # 2 : Nhận thức được sự khác biệt giữa trang web của người dùng và trang web của dự án trên GitHub. Với trang web người dùng (mà chúng tôi đang thiết lập), bạn không cần thực hiện bất kỳ phân nhánh nào. Các masterchi nhánh đã được cấu hình để chạy bất cứ điều gì đặt trên nó thông qua Jekyll. Bạn không cần thiết lập gh-pages branch.

Cho dù bạn có đặt tên miền riêng thì địa chỉ trang web của cá nhân hay của công ty đều có dạng

http(s)://<username>.github.io/<repository> 

hoặchttp(s)://<organization>.github.io/<repository>.

Vấn đề # 3 : Sử dụng trang web dự án cho trang web Jekyll của bạn có một số rắc rối cơ bản vì trang web của bạn sẽ được xuất bản lên một thư mục con. URL sẽ trông như thế nào https://raovatuk.github.io/raovat/, điều này sẽ gây lỗi trong các theme Jekyll, chẳng hạn như hỏng link hình ảnh và không cho phép bạn xem demo web hoàn chỉnh.

Vấn đề # 4 : Có rất nhiều plugin Jekyll , nhưng GitHub Pages chỉ có một số plugin được hỗ trợ . Hãy bám vào danh sách được hỗ trợ. Chẳng hạn: Jemoji cho phép bạn đưa biểu tượng cảm xúc vào các bài đăng trên blog, giống như bạn làm trên GitHub và Basecamp.

2. Tùy Chỉnh Trang Web Của Bạn 

Giờ đây, bạn có thể thay đổi tên, mô tả, hình đại diện và các tùy chọn khác của trang web bằng cách chỉnh sửa file _config.yml. Các biến tùy chỉnh này đã được thiết lập để thuận tiện và được kéo vào chủ đề của bạn khi trang web của bạn được xây dựng.

Thực hiện thay đổi đối với _config.yml (hoặc bất kỳ file nào trong kho reposites) như url của site, Tiêu đề site,... sẽ buộc trang GitHub phải xây dựng lại trang web của bạn với Jekyll. Trang web được xây dựng lại sẽ có thể xem được vài giây  sau đó (có khi vài phút) tại http://yourusername.github.io. Nếu trang web của bạn không hoạt động ngay sau bước 2, nó sẽ xuất hiện khi thực hiện bước này.

Hãy tiếp tục và tùy chỉnh trang web của bạn bằng cách cập nhật các biến trong file _config.yml của bạn và sau đó thực hiện các thay đổi.

Bạn có thể thay đổi file blog của mình theo ba cách

Chỉnh sửa file tương ứng của username.github.io trong kho reposite trực tiếp trên trình duyệt tại GitHub.com (như hình bên dưới).
Sử dụng trình chỉnh sửa nội dung GitHub online của bên thứ ba, chẳng hạn như Prose by Development Seed. Nó được tối ưu hóa cho Jekyll, giúp bạn dễ dàng chỉnh sửa Markdown, viết bản nháp và tải lên hình ảnh.
Sao chép kho lưu trữ của bạn và thực hiện cập nhật cục bộ với GitHub Desktop, sau đó Flech orgin - đẩy chúng vào kho lưu trữ GitHub của bạn ( Atlassian có hướng dẫn sao lưu GitHub).

Chỉnh sửa trang web của bạn _config.yml trên GitHub.com

Vấn đề # 5 : Bạn không cần phải truy cập cục bộ trang web jekyll build để tùy chỉnh và tạo chủ đề cho trang web Jekyll. GitHub Pages làm điều đó cho bạn. Bạn chỉ cần đặt các tệp mà bạn muốn tạo trong nhánh chính của kho lưu trữ người dùng của bạn hoặc trong gh-pages branch của bất kỳ kho reposite nào khác và sau đó GitHub Pages sẽ xử lý nó với Jekyll.

3. Xuất bản bài đăng đầu tiên trên blog

Trang web của bạn hiện đã được tùy chỉnh, hoạt động và trông đẹp. Bạn chỉ cần xuất bản bài đăng blog đầu tiên của mình:
Chỉnh sửa /_posts/2014-3-3-Hello-World.md, xóa nội dung chỗ dành sẵn và nhập nội dung của riêng bạn. Nếu bạn cần một tài liệu sơ lược về cách viết trong Markdown, hãy xem bảng cheet sheet của Adam Pritchard .
Thay đổi tên file bao gồm ngày đăng và tiêu đề bài đăng của bạn. Jekyll yêu cầu các bài đăng phải được đặt tên yyyy-mm-dd-title.md.
Cập nhật tiêu đề ở đầu file Markdown. Các tham số đó ở đầu bài đăng blog được gọi là vấn đề phía trước, chúng ta sẽ tìm hiểu kỹ hơn sau. Trong trường hợp này, họ chỉ định bố cục nào sẽ sử dụng và tiêu đề của bài đăng trên blog. Các tùy chọn Additional front-matter variables, chẳng hạn như permalink, tagsvà category.

Nếu bạn muốn tạo các bài đăng blog mới trong trình duyệt trên GitHub.com, chỉ cần nhấn vào biểu tượng “+” trong /_posts/. Chỉ cần nhớ định dạng tên tệp một cách chính xác và bao gồm khối quan trọng để file được xử lý bởi Jekyll.

Tạo một bài đăng mới trên GitHub.com

Vấn đề # 6 : Một mối quan tâm của chúng ta khi sử dụng Jekyll cho blog là nó không có CMS, vì vậy sẽ không thể thực hiện các chỉnh sửa nhanh chóng bằng cách đăng nhập vào giao diện CMS khi không có laptop. Hóa ra blog Jekyll của bạn sẽ có CMS nếu bạn sử dụng Trang GitHub, vì bản thân GitHub đóng vai trò là CMS. Bạn có thể chỉnh sửa bài đăng trong trình duyệt, thậm chí trên điện thoại nếu muốn. Nó có thể không thuận tiện như các CMS khác, nhưng bạn sẽ không gặp khó khăn khi không mang theo PC, laptop.

Các bước tùy chọn cấu hình website GitHub

Sử dụng tên miền riêng

Định cấu hình tên miền của bạn để trỏ đến Trang GitHub là một quy trình gồm hai bước đơn giản:
Truy cập thư mục gốc của kho lưu trữ blog github và chỉnh sửa tệp CNAME để bao gồm tên miền của bạn (ví dụ www.yourdomainname.com:).
Truy cập bên trang web của nhà đăng ký tên miền và thêm bản ghi CNAME DNS trỏ miền của bạn đến Trang GitHub:
thể loại: CNAME
chủ nhà: www.yourdomainname.com
trả lời: yourusername.github.io
TTL: 300

Import bài đăng cho từ wordpress sang GitHub

Trước khi nhập, bạn cần xuất dữ liệu của mình từ WordPress, có thể xoa bóp dữ liệu một chút (ví dụ: bằng cách cập nhật các tham chiếu hình ảnh), rồi nhập dữ liệu đó vào trang web Jekyll mới của bạn. May mắn thay, một vài công cụ tuyệt vời có thể giúp ích.

Để xuất từ ​​WordPress , tôi thực sự khuyên bạn nên dùng plugin một cú nhấp chuột từ WordPress sang Jekyll Exporter của Ben Balter . Nó xuất tất cả nội dung WordPress của bạn dưới dạng tệp ZIP, bao gồm các bài đăng, hình ảnh và dữ liệu meta, chuyển đổi nó sang định dạng của Jekyll nếu cần. Tốt cho bạn, Ben.

Tùy chọn khác là xuất tất cả nội dung trong menu “Công cụ” của bảng điều khiển WordPress, sau đó nhập nội dung đó bằng trình nhập của Jekyll .

Tiếp theo, chúng ta cần cập nhật các tham chiếu hình ảnh của mình . Plugin của Ben Balter sẽ xuất tất cả hình ảnh của bạn vào một thư mục. Sau đó, bạn sẽ cần sao chép chúng vào bất kỳ nơi nào bạn đang lưu trữ hình ảnh của mình trên blog Jekyll của mình. Điều này có thể nằm trong một /imagesthư mục hoặc trên mạng phân phối nội dung.

Sau đó, bạn có nhiệm vụ thú vị là cập nhật tất cả các liên kết đến những hình ảnh này trên nội dung WordPress của bạn. Bởi vì tôi chỉ cập nhật năm hoặc sáu bài đăng, tính năng tìm và thay thế nhanh hoạt động tốt, nhưng nếu bạn có nhiều nội dung, thì việc viết một kịch bản hoặc kiểm tra các tập lệnh mà người khác đã viết, chẳng hạn như Paul Stamatiou .

Cuối cùng, chúng ta phải nhập các bình luận . Là một nền tảng cho các trang web tĩnh, Jekyll không hỗ trợ bình luận. Tuy nhiên, một giải pháp được lưu trữ trên máy chủ như Disqus hoạt động thực sự tốt! Tôi khuyên bạn nên import bình luận WordPress vào Disqus. Sau đó, nếu bạn đang sử dụng Jekyll 

Now, bạn có thể nhập tên người dùng Disqus của mình vào _config.yml mà bạn đã thiết lập.

Viết blog giới hạn người được xem

Nếu bạn thích viết bằng Sublime, Vim, Atom hoặc một trình soạn thảo khác, tất cả những gì bạn cần làm là sao chép vào kho lưu trữ của mình, tạo các bài đăng blog Markdown mới trong thư mục _posts, sau đó đẩy các thay đổi lên GitHub. GitHub Pages sẽ tự động xây dựng lại trang web của bạn ngay sau khi tệp Markdown của bạn truy cập vào kho lưu trữ và bài đăng blog mới của bạn sẽ xuất hiện ngay sau khi quá trình xây dựng hoàn tất.

Trước tiên, git clone git@github.com:yourusername/yourusername.github.io.git hoặc sao chép kho lưu trữ của bạn bằng GitHub Mac .
Tạo một bài viết mới trong _poststhư mục. Hãy nhớ đặt tên nó theo định dạng year-month-day-title.mdvà bao gồm vấn đề chính ở đầu bài đăng.
Cam kết tệp Markdown của bài đăng và chuyển đến kho lưu trữ GitHub của bạn. ( Hướng dẫn của Atlassian về những điều cơ bản của Git có thể hữu ích.)
Chỉ cần đợi GitHub Pages xây dựng lại trang web của bạn. Quá trình này thường mất dưới 10 giây, giả sử bạn không có một quá nhiều nội dung.

Vấn đề # 7 : Một lần nữa, bạn không cần phải xây dựng trang web Jekyll của mình cục bộ để viết một bài blog cục bộ và xuất bản nó lên trang web của bạn. Bạn có thể viết bài đăng Markdown cục bộ và đẩy nó bằng bất kỳ hình ảnh nào bạn đã sử dụng, sau đó GitHub Pages sẽ xây dựng lại trang web cho bạn trên máy chủ.

Vấn đề # 8 : Hãy nhớ rằng Jekyll build sẽ xóa sạch mọi thứ trong thư mục /_sites/. Bước đầu tiên jekyll build là xóa mọi thứ trong /_sites/đó và sau đó xây dựng lại tất cả từ đầu. Vì vậy, bạn không thể lưu trữ bất kỳ tệp nào trong đó và mong đợi chúng tồn tại. Mọi thứ đi vào /_sites/sẽ được tạo ra bởi Jekyll.