Website VietAnhDev.com sau khi chuyển sang Jekyll

Hình ảnh Website VietAnhDev.com sau khi chuyển sang Jekyll

Chú ý: Bài viết này tôi muốn hướng đến các bạn đã có chút kinh nghiệm về web. Công nghệ Jekyll mà tôi muốn chia sẻ là công nghệ khá tuyệt vời để tạo các website cá nhân, tuy nhiên việc cấu hình và sử dụng hơi phức tạp chút.

Vào đề

Trước đây vài ngày, tôi có chuyển hẳn website từ CMS Wordpress sử dụng Namecheap hosting sang Jekyll sử dụng Github Pages lưu trữ website trực tiếp trên Github. Lúc đầu thì việc sử dụng Jekyll thật khó khăn và có những lúc làm tôi thấy hơn nản (quen việc dùng WordPress quá dễ dàng rồi), nhưng sau vài ngày sử dụng Jekyll tôi lại thấy điều ngược lại: Thật quá dễ dàng và thoải mái!! Chính vì vậy tôi muốn viết bài này chia sẻ cho mọi người.

Trước hết, một số định nghĩa cho bạn nào chưa biết:

WordPress
  • CMS WordPress là một trong những hệ quản trị nội dung phổ biến nhất giúp bạn có thể dễ dàng tạo các website của mình với hàng loạt các tùy biến về giao diện, tối ưu cho SEO. Bạn có thể làm rất nhiều việc với WordPress từ viết blog, làm website bán hàng, forum…vv. Rất nhiều website lớn nhỏ khác nhau đang sử dụng WordPress. CMS này được viết trên ngôn ngữ PHP và website nó tạo ra là các web động với nhiều tương tác người dùng nhé.
Jekyll
  • Jekyll lại là một thứ hoàn toàn khác. Nó là một phần mềm được viết trên Ruby giúp tạo ra các website tĩnh. Nó không có nhiều khả năng như WordPress, hơi khó sử dụng với người mới nhưng với việc tạo các website cá nhân, blog, trang tài liệu thì khả năng sinh web tĩnh cho phép nó đạt hiệu suất vượt trội. Bạn có thể tùy biến đủ kiểu với website của mình và lưu trữ nó trên chính Github - dịch vụ lưu trữ mã nguồn một cách hoàn toàn miễn phí. Một ưu điểm nữa là web tĩnh sẽ cho phép website của bạn miễn nhiễm với các mã độc, sự tấn công của hacker chúng ta thường thấy trên các CMS như WordPress.

Tại sao sử dụng Github Pages để lưu trữ website cá nhân

Github

Github là dịch vụ lưu trữ mà nguồn quen thuộc với các bạn lập trình viên. Github cũng cung cấp dịch vụ Github Pages cho phép bạn lưu trữ các website của dự án, website cá nhân và tổ chức trên chính Github. Ưu điểm của việc sử dụng Github lưu trữ website cá nhân là:

  • Nó hoàn toàn miễn phí. Nó đã giúp tôi tiết kiệm được hơn 1 triệu đồng (tôi phải sử dụng để thuê hosting WordPress bên Namecheap mỗi năm). Bạn có thể sử dụng tên miền miễn phí dạng <tên tk github>.github.io, tuy nhiên cũng có thể dùng luôn các tên miền bạn sở hữu như vietanhdev.com :D
  • Hỗ trợ Jekyll. Jekyll là phần mềm tạo các website tĩnh từ các file Markdown hoặc html. Thông thường bạn cần biên dịch tất cả các file sang mã html trước rồi mới upload lên các máy chủ lưu trữ. Nhưng với Github, điều đó là không cần thiết. Bạn có thể chỉnh sửa các bài viết, các trang của website sử dụng Jekyll và commit lên Github, vậy là xong.
  • Khá quen thuộc với các lập trình viên. Nếu bạn là một lập trình viên thì việc commit code lên Github là một việc khá quen thuộc rồi. Làm website, viết blog theo cách đó chắc chắn sẽ làm bạn thấy thoải mái.

OK. Tiến hành làm website bằng Jekyll nào.

1.Level cơ bản

Level cơ bản sử dụng Github Pages để lưu trữ website và theme Beautiful Jekyll để tạo website cá nhân với Jekyll.

Trước tiên chúng ta hãy tìm một theme (giao diện) cơ bản để bắt đầu với Website nhé. Có rất nhiều theme tôi thấy rất ok tại jekyllthemes.org hoặc themes.jekyllrc.org. Tuy nhiên với Level cơ bản sử dụng Github Pages, chúng ta sẽ bắt đầu với một theme đơn giản, nhưng cá nhân tôi thấy là rất tốt để tạo một website cá nhân : Beautiful Jekyll của Dean Attali.

Fun fact: Website hiện tại của Việt Anh sử dụng theme này.

  • Để sử dụng theme này với Github Pages, trước tiên bạn cần đăng kí một tài khoản Github. Github thì khá quen thuộc với lập trình viên rồi. Bạn nên lập luôn một cái để sử dụng cho nhiều mục đích khác sau này. Lưu ý là Username Github của bạn sẽ quyết định địa chỉ website cá nhân được lưu trữ trên Github. Ví dụ Username của Việt Anh là vietanhdev.com thì tên miền mặc định cho website được Github cấp là vietanhdev.github.io.
  • Tiếp theo bạn nên làm quen với ngôn ngữ sử dụng chủ yếu để viết nội dung cho Jekyll Website là Markdown. Ngôn ngữ này cũng được sử dụng khá phổ biến trong Github để viết các file README.Md - giới thiệu chung cho mỗi dự án nguồn mở trên Github. Bạn có thể học Markdown tại www.markdowntutorial.com (tiếng Anh) hoặc Hướng dẫn sử dụng Markdown tại đây.

Bắt đầu với theme Beautiful Jekyll nào.

Mang Beautiful Jekyll về làm trang web của bạn

  • Đăng nhập Github.
  • Truy cập trang mã nguồn Beautiful Jekyll trên Github: https://github.com/daattali/beautiful-jekyll.
  • Fork (tạo một bản sao) mã nguồn Beautifull Jekyll về tài khoản Github của mình bằng cách ấn nút Fork ở góc trên bên phải của trang mã nguồn.
  • Đổi tên repository vừa Fork thành dạng <username>.github.io , trong đó <username> là tên đăng nhập Github của bạn.
  • Chỉnh sửa file _config.yml để tạo các thiết lập ban đầu cho website của bạn. Mở file đó lên thì các dòng có # ở đầu là các dòng comment hướng dẫn bạn chỉnh sửa file cấu hình đó. Sau khi sửa xong các file ở Github, bạn ấn Commit changes để lưu lại thay đổi. Đối với website chạy bằng Jekyll thì mỗi lần bạn sửa một file nào đấy là Github sẽ tự động dịch lại toàn bộ mã nguồn website của bạn sang định dạng khả dụng cho một trang web.
  • Sau khi bạn chỉnh sửa xong thiết lập về đường dẫn (phần url trong file _config.yml), hãy truy cập