menu

Hướng dẫn nhanh tạo Github Pages với theme có sẵn

Đăng lúc 03/04/2018, trong chuyên mục Liquid và Jekyll

Bài viết hướng dẫn nhanh giúp bạn tạo một trang web bằng Github Pages đơn giản, sử dụng những theme có sẵn download từ internet.

Nếu bạn biết chút ít về git, github, jekyll hay thiết kế web thì thật tuyệt vời. Tuy nhiên bài viết này dành cho đối tượng chưa biết gì, chỉ cần làm theo đúng các bước là được.

Đăng ký một tài khoản Github. Bạn vào trang web này để bắt đầu đăng ký một tài khoản Github miễn phí. Nhớ xác nhận email sau khi đăng ký (nếu có). Để dễ dàng trong quá trình hướng dẫn, giả sử tôi đã đăng ký thành công tài khoang mang tên thinot4work. Sau khi đăng ký xong, hãy đăng nhập.

Download Github Client. Github Client (GC) nói dễ hiểu là giúp bạn “upload” những thay đổi/bài viết ở máy tính của mình lên trên server của Github. Bạn download nó tại đây và bắt đầu cài đặt như những phần mềm bình thường khác trên máy tính.

Sau khi cài đặt xong, bạn tiến hành đăng nhập vào bằng tài khoản đã tạo ở bước 2.

Tạo một repository trên trang Github. Đây là nơi bạn làm việc, upload files… và cũng là nơi mà có thể cộng tác với các người khác. Có thể hiểu mỗi repository mà bạn tạo ra là một dự án riêng.

  1. Đi đến trang chủ của github, nhớ là bạn phải đăng nhập trước rồi. tạo repository
  2. Chọn Start a project
  3. Đặt tên cho repository trong mục Repository namethinot4work.github.io. Lưu ý, ở bước 1, tôi đã tạo tài khoản github là thinot4work nên bây giờ tôi đặt tên cho repo là thinot4work.github.io. Cái này rất quan trọng, nếu bạn đặt tên khác, trang web của bạn sẽ không thể hoạt động được!!! Sau khi ghi tên xong, mấy chỗ khác cứ để giống trong hình, bạn chọn Create repository. tạo repository
  4. Kể từ bây giờ, nếu như bạn hoàn thành xong hết các bước trong bài viết này thì trang web của bạn sẽ có đường dẫn là https://thinot4work.github.io. Nếu bạn có tên miền riêng (chẳng hạn toideptraidethuong.com), bạn có thể đọc bài viết này để “gán” tên miền đó cho trang github vừa được tạo này.

Clone repository về máy. Ở bước 3, bạn đã tạo ra 1 repo chứa trang web ở trên trang github, bước này là để bạn đưa nó về máy (clone).

  1. Quay lại trang repo bạn đã tạo ở bước 3, nhấn vào Set up in Desktop, một popup trình duyệt sẽ hiện lên hỏi bạn Open GithubDesktop?, bạn chọn Open GithubDesktop clone
  2. Nó sẽ chuyển sang ứng dụng Github Desktop (GD). Bạn có thể thay đổi Local path ở bất kỳ đâu trên máy bạn. Đây chính là nơi bạn sẽ lưu trang web trên máy tính của mình. Sau khi chọn xong, bạn nhấn Clone. clone
  3. Mở trình quản lý file lên và đi đến thư mục chứa vừa tạo (cái thư mục trong Local path ở trên). Một thư mục mới mang tên thinot4work.github.io vừa được tạo ra. Trong đây chưa có gì cả! clone

Chọn theme có sẵn. Bây giờ bạn có thể chọn cho mình một theme Jekyll sẵn có trên internet để sử dụng. Bạn có thể vào trang này hoặc trang này để tìm một theme ưng ý. Cần lưu ý là không phải theme nào cũng có thể hoạt động trơn tru nếu áp dụng cách trong bài này. Theo kinh nghiệm sử dụng thì khoảng 90% theme hoạt động tốt.

  1. Giả sử tôi chọn theme Massively. Nhấn vào nút Download bạn sẽ down về máy mình một file có tên jekyll-theme-massively-src-master.zip
  2. Giải nén file này ra bạn sẽ có một thư mục cũng mang tên jekyll-theme-massively-src-master
  3. Chép hết tất cả các thứ bên trong thư mục ở tên và chép vào thư mục thinot4work.github.io đã tạo ra ở bước 4. chép theme

Tùy chỉnh theme thành của mình. Bạn gần xong rồi. Sau khi copy hết mấy file vào thư mục thinot4work.github.io, bạn cần chỉnh thêm một số thứ để cho giao diện đó là của mình.

  1. Mở file _config.yml lên
  2. Sửa thông tin tại (tùy vào theme mà có thể khác, tuy nhiên các thứ dưới đây là những thứ cơ bản, theme nào cũng có)
    • title: tên trang web của bạn, giả sử tôi sửa thành Anh chàng đẹp chai
    • description: miên tả trang, tôi sửa thành lại còn dễ thương
    • baseurl: địa chỉ trang web gốc, hiện tại nó chính là thinot4work.github.io, tuy nhiên bạn có thể bỏ trống chỗ này.
    • url: bạn sửa thành "thinot4work.github.io"
    • mathjax: true nếu bạn muốn hiển thị công thức toán trên trang.
    • disqus_shortname: username disqus của bạn, cái này để tạo form comment cho trang của bạn, giống như trên Tôi Tự Học lúc này. Nếu chưa có tài khoản disqus, bạn có thể đăng ký và sử dụng tại đây.
    • paginate: điền vào số bài blog post tối đa sẽ hiển thị ở mỗi trang, nếu vượt quá số này, nó sẽ qua trang kế tiếp. Chức năng phân trang của trang web Jekyll.
  3. Save lại file _config.yml.

Push những thay đổi lên Github. Bây giờ bạn quay lại phần mềm Github Desktop, sẽ thấy ở cột bên trái hiện lên hết các file bạn vừa chép vào thư mục thinot4work.github.io. Thật ra cột này nó sẽ hiển thị những file bên trong thinot4work.github.io mà bạn vừa thay đổi. Lý do nó hiện hết là do bạn vừa chép vào thư mục này tất cả file này.

push theme lên github

Bạn gõ vào ô Summary tóm tắt những thay đổi trong lần thay đổi này, tôi đã điền tao trang ban dau. Bạn có thể không cần điền vào ô Description (miêu tả chi tiết hơn). Ghi chú này giúp bạn có thể hiểu các bước để mà quay lại nếu lỡ có lỗi sau này. Sau đó nhấn Commit to master > nhấn Publish branch.

Tada! Bạn đã hoàn thành rồi đấy, vào trình duyệt, gõ thinot4work.github.io để xem trang web của bạn hoạt động chưa nhé.

thành quả

Bây giờ, mỗi khi có thay đổi gì, ví dụ bạn viết một post mới, Github Desktop sẽ tự động nhận biết và hiển thị ở khung bên trái như ở bước 7. Hãy làm tương tự là được.

Đọc thêm loạt bài về Jekyll trên Tôi Tự Học để biết thêm nhiều thủ thuật khác nhé!

github
github pages
jekyll
Top