Xây dựng Blog Cá Nhân Với Jekyll
Bài đăng này đã không được cập nhật trong 2 năm
Dạo gần đây thì mình bắt đầu đọc sách nhiều hơn, và có xu hướng muốn dịch cũng như phân tích những gì mình đọc được. Để giới thiệu những gì mình biết, những trang blog kiểu như https://viblo.asia là quá đủ để mình diễn. Tuy nhiên thì mình vẫn thích cái gì đó của riêng mình, sau này tha hồ thay đổi. Chí ít là giao diện sẽ không bị phụ thuộc vào người khác (Mặc dù mình thiết kế giao diện rất tệ 
)
Hôm nay mình sẽ giới thiệu với các bạn một công cụ xây dựng blog cá nhân rất đơn giản, đó là Jekyll. Có nhiều ưu điểm của Jekyll, nhưng cái nổi bật nhất, là nó được viết bởi tác giả của Github, được Github hỗ trợ, cho nên bạn sẽ dễ dàng public trang web của mình với tên miền đuôi .github.io dựa trên tài khoản github của bạn. (Kiểu như dinhhoanglong91.github.io). (hura)
Ưu điểm lớn nhất xong rồi, giờ mình đi vào chi tiết 
Jekyll là gì
-
Một cách ngắn gọn, Jekyll là công cụ sinh ra website tĩnh (static website), nói một cách chính xác nhất thì nó là
text transformation engine(cỗ máy chuyển đổi text). Jekyll sẽ chuyển đổi từ các filemarkdown,liquidquen thuộc với lập trình viên thành các file HTML để hiển thị trên trình duyệt. Ngoài ra nó cũng hộ trỡ phát triển frontend vớiCoffeeScriptthay vìJavascript,SASS,SCSSthay vìCSSthuần. -
Vì là website tĩnh, nên tất cả nội dung sẽ được viết trong source code, không có database. Cách làm việc này giúp hệ thống đơn giản khi bạn chỉ cần làm với 1 lượng thông tin nhỏ, không cần tương tác nhiều với người dùng. (Trường hợp website to thì đương nhiên là ko dùng Jekyll được).
-
Jekyll hỗ trợ phát triển blog rất tốt (
blog-aware). Các chức năng tạo liên kết giữa các bài viết, quản lý phân trang, phân chia category đều được Jekyll hỗ trợ một cách mặc định.
Cài đặt và sử dụng
-
Yêu cầu Bạn cần chạy trên hệ điều hành Linux hoặc Mac OS. Máy cần cài sẵn Ruby, RubyGems, NodeJS (để hộ trợ CoffeeScript, còn không dùng CoffeeScript thì không có cũng được).
-
Cài đặt
gem install jekyll
Sau khi cài xong, gõ câu lệnh `jekyll` trên terminal mà được như sau là bạn cài xong.
dinhhoanglong@long-inspiron:/var/www/html/test_jekyll$ jekyll
jekyll 2.5.3 -- Jekyll is a blog-aware, static site generator in Ruby
...
-
Sử dụng
Tạo một project mới
jekyll new your_project_name
Sau câu lệnh này bạn sẽ có một project jekyll trong máy với đầy đủ các thư mục theo đúng kiến trúc mặc định của Jekyll. Bạn chạy lệnh `jekyll serve` để xem website của mình.
dinhhoanglong:test_jekyll$ jekyll new my_blog
New jekyll site installed in /var/www/html/test_jekyll/my_blog.
dinhhoanglong:test_jekyll$ cd my_blog
dinhhoanglong:my_blog$ jekyll serve
Configuration file: /var/www/html/test_jekyll/my_blog/_config.yml
Source: /var/www/html/test_jekyll/my_blog
Destination: /var/www/html/test_jekyll/my_blog/_site
Generating...
done.
Auto-regeneration: enabled for '/var/www/html/test_jekyll/my_blog'
Configuration file: /var/www/html/test_jekyll/my_blog/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Như bạn thấy ở trên, nếu access vào địa chỉ [127.0.0.1:4000](http://127.0.0.1:4000) bạn sẽ thấy trang web của mình :D
-
Kiến trúc thư mục của Jekyll
Bạn có thể thấy thư mục gồm các thành phần sau:
dinhhoanglong:my_blog$ tree
.
├── about.md
├── _config.yml
├── css
│ └── main.scss
├── feed.xml
├── _includes
│ ├── footer.html
│ ├── header.html
│ └── head.html
├── index.html
├── _layouts
│ ├── default.html
│ ├── page.html
│ └── post.html
├── _posts
│ └── 2015-09-23-welcome-to-jekyll.markdown
├── _sass
│ ├── _base.scss
│ ├── _layout.scss
│ └── _syntax-highlighting.scss
└── _site
├── about
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2015
└── 09
└── 23
└── welcome-to-jekyll.html
13 directories, 20 files
Sau đây mình sẽ giải thích ngắn gọn chức năng các thư mục chính
_config.yml: Đây là file config của Jekyll, bạn có thể thiết lập đủ thứ ở đây._includes: Thư mục chứa các file được gọi đến để bổ sung cho các file khác. Ví dụ{% include file.ext %}sẽ gọi đến_include/file.ext._layouts: Đây là nơi chứa template cho các bài viết của bạn. Một bài viết muốn dùng layout thì chỉ cần bổ sung cú phápYAML Front Mattervào là xong. Nội dung file để chèn vào template được định nghĩa trong thẻ liquid{{ content }}._posts: Đây là nội dung các bài post của bạn. Jekyll hiện tại chỉ hỗ trợ một định dạng tên duy nhất làYEAR-MONTH-DAY-title.MARKUP._site: Các file được jekyll sinh ra sau khi build các file mà bạn tạo/chỉnh sửa. Thư mục này nên được đưa vào.gitignore. Khi deploy thì server sẽ tự động build và sinh ra thư mục này. (Github làm việc đó cho bạn)). Còn không thì bạn có thể mang thư mục này đến bất cứ đâu và bạn sẽ có trang web.
Một vài chú ý quan trọng khi làm việc với Jekyll
-
Jekyll build
Bằng việc chạy lệnh
jekyll buildhoặcjekyll serve, Jekyll sẽ tự động kiểm tra mọi thay đổi trên các file trong project của bạn và build vào trong thư mục_site. Bạn hoàn toàn có thể thiết lập để đổi tên thư mục đích của công việc build. Tuy nhiên mình thấy việc đổi tên là không cần thiết. -
YAML Front Matter
Cốt lõi của quá trình build là các file có cú pháp
YAML Front Matter. Nó có dạng như sau:- Trường hợp không có gì:
---
---
* Trường hợp có nội dung
---
layout: "post"
title: "Welcome to Jekyll"
---
Để tập tin của bạn được Jekyll biên dịch, nó bắt buộc phải có phần khởi đầu như trên. Mặc định Jekyll sẽ kiểm tra tất cả các file bạn ghi ra. Nếu bạn không cho nó khởi đầu như trên, nó sẽ được copy/paste nguyên si vào trong thư mục `_site`. Đây là trường hợp với các file `CSV`, `HTML` (không có thẻ liquid), `CSS`, `Javascript` thuần. Trong trường hợp bạn bổ sung cho nó `YAML Front Matter`, Jekyll sẽ biên dịch nó. `SASS`, `SCSS` sẽ được biên dịch ra `CSS`, `CofeeScript` sẽ được biên dịch ra `Javascript`, markdown, các thẻ liquid trong file HTML sẽ được biên dịch ra HTML thuần. Các tham số ghi ở đầu sẽ được hiểu như các tham số setting, biến cho việc biên dịch. (Bạn có thể thấy hơi phiền phức khi chèn 2 dòng vô nghĩa lên trên đầu các file `SASS`, `SCSS`, `CoffeeScript` chỉ để Jekyll hiểu và biên dịch nó. Tuy nhiên đây là luật của Jekyll, không được làm trái.)
Kết luận
Bài viết giới thiệu sơ lược về Jekyll để bạn đọc có cái nhìn cơ bản cho việc phát triển trang web tĩnh/blog bằng Jekyll. Rất mong có thể hỗ trợ được các bạn đôi chút trong công việc học tập, chia sẻ và ..."quảng bá bản thân" của mình
Bạn có thể tham khảo source code blog của mình ở link sau. https://github.com/dinhhoanglong91/dinhhoanglong91.github.io
Giao diện mặc dù đã được chăm chút kha khá nhưng mà vẫn xấu quá, mình đang cải tiến, các bạn đừng ném gạch nhá (khoc) .
All rights reserved
