11/08/2018, 21:29

Tạo blog ngon lành trên Github dù không biết ngôn ngữ Ruby và Liquid, Jekyll

Bài này không cổ xúy việc học hành không đến nơi đến chốn... Chỉ là dành cho những ai cần lập blog nhưng không phải dân chuyên lập trình, hoặc đang bận mảng khác chưa có thời gian tìm hiểu Ruby hay Liquid mà thôi. Nôm na là nơi để bạn lập blog (miễn phí, như mọi khi ) với tên miền ...

Bài này không cổ xúy việc học hành không đến nơi đến chốn... :stuck_out_tongue_closed_eyes: Chỉ là dành cho những ai cần lập blog nhưng không phải dân chuyên lập trình, hoặc đang bận mảng khác chưa có thời gian tìm hiểu Ruby hay Liquid mà thôi.

Nôm na là nơi để bạn lập blog (miễn phí, như mọi khi :laughing:) với tên miền tênbạn.github.io. Bạn có khả năng thiết kế và tùy chỉnh theo ý mình 100%. Không như những nơi khác như Blogspot.com, Tumblr.com hay Wordpress.com (chấm com khác với phiên bản wordpress.org)... là những nền tảng bó buộc blog của bạn vào vài giao diện sẵn có.

Github page cũng có kho giao diện nhưng... tùy tâm, dùng thì dùng không thì cũng không sao :grin:

Với Github page bạn có thể rút gọn mọi thành phần thừa thãi lùng bùng như trên mấy nền tảng vừa nói, để lại một trang web nhẹ như lông hồng. Đơn giản tập trung vào mục đích. Hoặc ngược lại có thể trang trí hoành tá tràng hơn hẳn bọn kia, miễn bạn có khả năng :laughing:

Bọn blogspot, wordpress... sinh ra để viết blog, còn Github sinh ra là để làm việc với các phiên bản code do dân lập trình làm với nhau. Nhưng vì nó cung cấp dịch vụ host trang web tiện quá nên dần dần được người ta chuyên trị dùng để đăng các web tĩnh, thường để trưng bày sản phẩm công nghệ hoặc lưu trữ lí lịch trích chéo nhưng không thích hợp cho blog. Tuy nhiên sự ra đời của Jekyll như giúp ta làm điều đó.

Một điều oái oăm là vì vốn dĩ dành cho dân lập trình chơi với nhau nên việc phải biết vài ngôn ngữ để tạo ra một trang blog Github giản dị, là điều các nhà phát triển không chút e ngại :laughing: May thay có những cá nhân muốn cộng đồng không chuyên cũng được tham gia sân chơi này, họ đã tạo điều kiện cho chúng ta bằng cách dùng những ngôn ngữ đó để viết một cái blog mẫu, sinh ra để cho người khác xiên (fork) về dùng. :laughing: Trong bài này thì người đó là ông Barry Clark, là tác giả blog mẫu mà mình xiên. Còn bạn thích xiên của ai khác cũng được vì cũng tương tự nhau cả thôi :laughing:

  • Tài khoản github (đương nhiên), tên tài khoản sẽ là tên miền của bạn luôn nên nhớ chọn cái tên đẹp đẹp xíu, đừng số má dài dòng hoặc ngố quá như o0oprincecutezzo0o :laughing:, mọi người nhìn vào mà. Để đơn giản hóa mình sẽ gọi luôn tên tài khoản github là lethivan (là tên mình) nhưng bạn thì đừng dùng cái tên này của mình nhé!
  • Hiểu sơ sơ về HTML và CSS nếu có nhu cầu trang trí chút đỉnh. Còn không thì bạn sẽ có một blog giống như mặc định của Barry Clark thế này alt text

3.1. Xiên cái blog mẫu về

Vào link này của Barry Clark rồi nhấn nút xiên (fork) cái repo (tên gọi mỗi project trên Github) đó về.
alt text

Sau ít phút sẽ xiên xong. bây giờ nhấn Setting
alt text

Trong ô repository name, xóa chữ jekyll-now đi và điền tên tài khoản github của bạn kèm đuôi github.io, ví dụ như mình sẽ điền là lethivan.github.io
alt text

Xong rồi đó, bây giờ cũng trong trang Settings đó, bạn kéo kéo xuống dưới phần Github page, sẽ thấy thông báo thành công. Cái thông báo này đến còn nhanh hơn cả thông báo đã nạp tiền thành công của Viettel nữa các bạn ạ! :laughing:
alt text

Thông báo thì nhanh nhưng trình duyệt có khi mất vài phút để cập nhật nên bạn truy cập vào tên.github.io vẫn hiện cái màn hình 404 như này thì đừng hoảng hốt nhé.
alt text

3.2. Thay tên, thay avatar

Vào github.com, tìm đến cái repo (project) mà bạn vừa tạo.
Để ý kĩ sẽ thấy có biểu tượng cái dĩa (hay mỏ neo gì đó mình không nhìn rõ) ở đầu repo đó, ám chỉ là đồ đi xiên về chứ không phải tự tạo ra... nghĩa là bạn đã làm đúng rồi đó :grin:
alt text

Đi vào bên trong repo đó sẽ thấy một loạt file và thư mục, bạn tìm đến file _config.yml rồi tìm biểu tượng chỉnh sửa

alt text

alt text

Điền tên trang, mô tả trang, và link avatar của bạn vào phần tương ứng, chỗ này chắc không có gì khó hiểu nhỉ
alt text

Ở ngay dưới là link các mạng xã hội của bạn, cứ thế điền vào thôi, mình thì chỉ xóa đi những link mẫu đã
alt text

Ở dưới nữa thì cũng sẽ có lúc cần đến đấy, nhưng tạm thời bây giờ thì chưa cần, bỏ qua.
Có thể coi như tạm tạo lập xong. Lúc này bạn vào tên miền của mình thì sẽ thấy vẫn là Your Name... thì đừng lo lắng quá. Mất vài phút để trình duyệt cập nhật thôi mà. Sau khi chời đợi một xíu thì sẽ thấy là được rồi nè
alt text

3.3 Viết blog

Việc viết blog trên này sẽ thông qua việc upload file có định dạng .md vào thư mục tên là _posts. Mỗi file tương đương một bài blog.
alt text
Cách upload rất đơn giản, bạn đi thẳng vào repo rồi nhấn Upload files. Hoặc soạn thảo trực tiếp trên github cũng được bằng cách nhấn Create new file
alt text

Có thể lần đầu tiên sẽ hơi bối rối xíu với định dạng văn bản .md. Đừng quá lo sợ vì những gì bạn cần học về nó chỉ ghi vỏn vẹn trong một lòng bàn tay cũng vừa :laughing: Còn ít hơn kiểm tra miệng môn Lịch Sử ở trường nữa :laughing:

Cách tạo file .md đó là tạo một file bất kì rồi lưu nó dưới đuôi .md :laughing:

Binh tĩnh đã, chưa nói xong mà. File này được viết bằng trình soạn thảo văn bản, có thể là Notepad, với các cú pháp như sau. Bạn nào quen đăng bài lên diễn đàn ngày xưa chắc sẽ thấy hoài niệm đó.

  • dấu thăng # ở đầu câu để tạo tiêu đề. Có 6 mức tiêu đề từ lớn đến nhỏ. Một dấu thăng là tiêu đề lớn nhất. 6 dấu thăng là tiêu đề nhỏ nhất
  • dấu hoa thị * bao quanh chữ để tạo chữ nghiêng
  • hai dấu hoa thị bao quanh chữ để tạo chữ đậm
  • [chữ hiển thị](địa chỉ link)
  • ![](link ảnh)
  • dấu gạch ngửa để hiển thị kí tự đặc biệt alt text

Bài post dạng file .md vậy là gần hoàn chỉnh rồi đó. Chỉ thiếu một chút thông tin phụ như sau, copy paste vào đầu mỗi file .md

---
layout: post
title: Tên bài post
---

Lưu ý là 3 dấu gạch là 3 dấu gạch chứ không phải 2, không phải 4 nha. Dòng 1 và dòng 2 mà dính vào nhau là cũng hỏng. Đằng sau dấu hai chấm phải có dấu cách nữa. Tóm lại đừng thay đổi gì ngoài cái tên bài post.

Và đặt tên file như sau, cũng copy paste luôn, thay ngày tháng và tên bài post của bạn vào. chú ý tháng trước ngày sau, ghi lộn là post không hiện ra được nha.

2018-4-22-ten-bai-post.md

Upload lên là ta xong rồi! Nếu kết quả không hiện ra ngay thì đừng thảng thốt mà hãy đi nhấp một ngụm trà để tự hào với thành quả mình làm được, quay lại thì trang blog của bạn đã được cập nhật rồi đó!

Tiện là thế nhưng blog này của Barry Clark thiếu đi một tính năng cực cơ bản là phân chia thể loại bài viết. Mọi người xem cách phân loại ở bài viết này của mình và cách chế giao diện chỉ bằng HTML và CSS

Ai tạo được blog thì chia sẻ cho mình cùng xem nhé, có thắc mắc góp ý gì cũng đừng ngại comment nhé.

0