Tạo blog miễn phí với Jekyll và Github Pages

Tuy việc tạo blog trên Github Pages khó hơn rất nhiều so với những Wordpress.org, Blogspot, Tumblr, LiveJournal, Medium... nhưng đánh đổi lại là khả năng tùy biến rất cao.

TẠO BLOG THEO MẪU JEKYLL-NOW

1. Chuẩn bị

  • 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 (đây là hồi xưa rồi còn bây giờ cái github account này mình đổi tên khác và cái tên lethivan đã bị một bạn khác chiếm mất, không phải là mình nữa)
  • 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

2. Tiến hành

2.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

2.2. Thay base url, 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

Sau khi vào được web thì bạn sẽ thấy nó không có CSS gì cả, là do chưa thay base url trong config nên file css chưa link vào được.

Đ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

Thay url

Nếu repo của bạn là username.github.io thì bỏ qua chỗ này, nếu là 1 repo khác thì chỗ base url điền tên repo của bạn vào
alt text

Thay ava

Đ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

2.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:

3. Cách tạo file .md

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

4. Tạo một bài post hoàn chỉnh

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

TRỎ TÊN MIỀN

Để trỏ tên miền bạn cần làm 2 việc: tạo CNAME file ở repo và set DNS trong trang quản trị tên miền

file CNAME

alt text
file này không có đuôi, nằm ở thư mục gốc repo của bạn, nội dung là tên miền của bạn (không có www hay http://)

yourdomain.com

DNS

Đừng nhập vào chỗ NS mà phải là DNS
Tạo 4 bản ghi (record) DNS như sau:
alt text

Host record Type Value
@ A 185.199.108.153
@ A 185.199.109.153
@ A 185.199.110.153
@ A 185.199.111.153
www CNAME yourname.github.io

CÁCH PHÂN LOẠI BÀI VIẾT THEO THỂ LOẠI

1. Chuẩn bị

1.1. Một vài tên thể loại

Thật ra trong quá trình viết blog dần dần thì chia thể loại sau cũng chẳng sao nhưng tốt nhất nên rào ngay từ đầu là về cơ bản có những thể loại gì, để sau này không phải quay lại từng bài viết một để thêm thể loại con cho nó.

1.2. Khi viết bài post thì bài post phải có categories

Các bài post với đuôi file .md của bạn, chêm tí phân loại vào đầu file như thế này.

---
layout: post
title: Giải mã mật mã em bận
categories: tangai giaima
---

Một bài có nhiều thể loại cũng được. Các thể loại cách nhau bằng dấu cách. Chữ categoriessố nhiều mới được nhé.

2. Tiến hành

Ai muốn cho nhanh thì xiên luôn cái repo này của mình rồi tua tới mục 2.2. và bỏ qua mục 2.1 và 2.3.

Ai muốn chỉnh sửa đôi chút thì xem cả ba mục để vừa ý bạn hơn.

2.1. Tạo layout chung theloai.html (xiên được)

Nhảy vào thư mục _layouts
alt text

Nhấn Create new file
alt text

Tạo một file với cái tên theloai.html còn nội dung thì copy như sau
alt text

Nếu muốn khi liệt kê các bài viết trong một thể loại thì chỉ dẫn link chứ không trích bài thì copy đoạn sau
alt text

{% for post in site.categories[page.category] %}
<article class="post">

     <a href=" { {  site.baseurl }} { {  post.url }}"> { {  post.title }}</a>

 </article>

{% endfor %}

Nếu muốn dẫn link kèm theo trích đoạn thì copy đoạn sau
alt text

---
layout: page
---

{% for post in site.categories[page.category] %}
<article class="post">

      <h2><a href=" { {  site.baseurl }} { {  post.url }}"> { {  post.title }}</a></h2>

      <div class="entry">
         { {  post.excerpt }}
      </div>

      <a href=" { {  site.baseurl }} { {  post.url }}" class="read-more">Read More</a>
    </article>


{% endfor %}

2.2. Tạo layout từng thể loại riêng ví dụ tangai.html (tự làm không xiên được)

Tiếp theo, vào repo của bạn rồi tạo một thư mục tên theloai, không có kí tự gạch dưới _ ở đầu tên thư mục đâu nhé
alt text

Lưu ý là có nút Create new file nhưng không có Create new folder, nên bạn phải kéo thả thư mục trên ổ cứng máy tính vào.

Bên trong thư mục theloai đó, bạn tạo các file có dạng tênthểloại.html. Bao nhiêu thể loại bấy nhiêu file. Mỗi file copy như sau, đây mình làm mẫu tạo file giaima.html

---
layout: theloai
title: Các bài viết về giải mã lời nói của gái 
category: giaima
---

Và tương tự như thế cho tất cả các thể loại khác của bạn. Hơi lắt nhắt xíu nhưng vì thế mới nên làm ngay từ đầu, copy paste tạo luôn cả lũ một thể.

2.3. Hiển thị trong mỗi bài viết danh mục mà bài viết đó thuộc về (xiên được)

Sau đó vào thư mục _layout, chỉnh sửa file post.html. Copy đoạn sau vào chỗ mà bạn muốn tên thể loại hiện ra trong mỗi bài viết:

<div class="post-categories">
  {% if post %}
    {% assign categories = post.categories %}
  {% else %}
    {% assign categories = page.categories %}
  {% endif %}
  {% for category in categories %}
  <a href=" { { site.baseurl}}/theloai/ { { category|slugize}}"> { { category}}</a>
  {% unless forloop.last %}&nbsp;{% endunless %}
  {% endfor %}
</div>

Giả sử mình thích nó nằm ngay đầu thì mình paste vào đầu ngay dưới chỗ page.title và ngay trên chỗ div class entry
alt text

Thì được kết quả là Thể loại nằm ở dưới title và ở trên entry thế này
alt text

Đã xong!

CHẾ GIAO DIỆN

1. Để thay đổi giao diện thì cần chế file gì trong repo?

đó là 2 file

  • _layouts/default.html
  • style.scss alt text

2. Cẩn thận

2.1. Trong file default.html

Không xóa mất dòng { { content }} sau đây:

alt text
vì đó là thứ gây dựng nên nội dung các bài viết của trang
alt text

phần này chúng ta không đùa được, nếu lỡ tay xóa nó đi hoặc chêm dấu cách vào nó là sẽ hỏng be bét trang mất nội dung ngay.

Muốn thay đổi hình thức của nó chỉ cần quấn nó trong thẻ div rồi định dạng cái thẻ div đó với css, chứ đừng thêm class tào lao vào ví dụ như

~~ { {   class="xanhdotimvang" content }}~~

Add như này thì đúng:

<div class="xanhdotimvang">
   { {  content }}
</div>

Còn lại thì viết HTML như bình thường

2.2. Chế css trong file style.scss

Nhưng ai không thích hoặc không biết scss thì cứ mạnh dạn viết file .css bình thường không phải sợ, miễn là ném cái file .css đó vào địa điểm trùng khớp với file default.html
alt text

Chúc các bạn thành công!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

mòe

14 bài viết.
328 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
101 44
google cách học tốt tiếng anh thì ra hàng đống kết quả nhưng đảm bảo không có cái nào dùng được (nếu dùng được thì bạn đã tiến bộ rồi phải không). ...
mòe viết hơn 1 năm trước
101 44
White
42 10
(Ảnh) Dùng CSS để "sửa" nội dung HTML Ngoài nguyên nhân là muốn chơi nổi thì lí do phải dùng code CSS để tác động vào HTML là khi bạn không được ...
mòe viết 9 tháng trước
42 10
White
31 15
Bài này sẽ hướng dẫn tạo theme Wordpress mà không sử dụng gì. Gồm 5 phần với thứ tự như sau: Tạo theme tĩnh, Các khái niệm dễ gây nhầm lẫn trong Wo...
mòe viết 7 tháng trước
31 15
Bài viết liên quan
Male avatar
9 0
Giới thiệu về JAM Stack trong phát triển phần mềm Gần đây, JAM stack trở nên phổ biến hơn bên cạnh các stack hiện có như LAMP, MEAN. Trong bài viế...
tony.teo viết 9 tháng trước
9 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
328 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!