Tạo blog cá nhân bằng octopress 2 và github
Markdown
7
octopress
1
White

huydx viết ngày 27/05/2015

Tạo blog trên github

Hẳn là một github user, hẳn bạn biết github hỗ trợ cho user tạo một static blog trên domain của github (xxx.github.io).
Để tạo blog cá nhân thì bạn có thể tham khảo chi tiết ở đây. Hiện tại thì để tạo github page
thì đã có giao diện rất dễ sử dụng nên mình sẽ không nói thêm ở đây. Về mặt bản chất thì github page chỉ là một repo
trên github, trong đấy có chứa các static file, và được trỏ đến domain xxx.github.io.

Jekyll và github page

Khi bạn push bất kì thứ gì lên repo của github page, github sẽ chạy site generator sử dụng jekyll.
Tại sao phải sử dụng site generator? Vì github không chỉ hỗ trợ html mà còn hộ trợ markdown, một markup language khá đơn giản và dễ sử dụng (bạn có thể tham khảo thêm ở đây. Vậy bạn có thể đoán ra jekyll là gì: jekyll là một sản phẩm của Tom Preston-Werner, ceo của github. Jekyll sẽ nhận input là một template directory, chạy qua một cái converter engine để convert từ (Textile | Markdown | Liquid) sang html, tạo ra một static website.

Như vậy bạn đã có thể hình dung ra cách để tạo ra một github page:

alt text

3. Sử dụng octopress để gen blog trên github page

Trong bài viêt này mình sử dụng phiên bản đã cũ octopress2.
Octopress là một framework design cho jekyll. Gọi là framework nghe hơi lớn, nhưng nói một cách ngắn gọn, octopress là một bộ template/tools/
plugin giúp cho việc generate static site đơn giản hơn. Những tính năng chính của octopress bao gồm:

  • Responsive design template (gồm css, js, html)
  • Build-in 3rd supports cho một số mạng xã hội (như like button của facebook, tweet button của twitter), và đặc biệt có comment của disqus khá tiện
  • Build-in web server để review sau khi generate qua jekyll
  • Hệ thống theming rất tốt với Compass và Sass

Nói lý thuyết nhiều quá, giờ vào cụ thể về cách cài đặt và sử dụng:

Prerequisite: máy bạn phải install git và ruby, cách install các bạn có thể google :D. Sau đấy bạn clone octopress về máy, install bundler rồi install các dependencies như sau:

git clone git://github.com/imathis/octopress.git octopress
cd octopress
gem install bundler 
bundle install

Ok, như vậy bạn đã có một môi trường đẹp đẽ để chuẩn bị viết blog rồi. Về mặt trình tự thì để có 1 blog trên github page bạn sẽ phải:

  • Viết blog (dùng markdown/..) => generate qua jekyll => deploy lên github page

alt text

Octopress đã chuẩn bị sẵn cho bạn một Rakefile (bạn có thể tìm hiểu về rake ở đây
.Trong đấy có rất nhiều task octopress đã chuẩn bị sẵn cho bạn để giúp cho việc cài theme, deploy lên github page trở nên đơn giản hơn bao giờ hết.

Đầu tiên bạn sử dụng

rake install 

để instal theme.

Sau khi đã install xong theme, chúng ta sẽ viết blog. Bước đầu tiên là setup repository để cho việc deploy lên github pages thuận tiện hơn:

rake setup_github_pages

Khi làm bước này thì octopress sẽ prompt ra một cái để hỏi về repo của github pages của bạn (repo của cái xxx.github.io mà mình đã nói ở trên)

alt text

Như hướng dẫn đã ghi, bạn sẽ phải điền repo của bạn với format
git@github:your_username/your_username.github.com

Ví dụ như trong trường hợp blog ktmt thì sẽ là
git@github:ktmt/ktmt.github.com.git

Bạn điền vào, press OK, như vậy là đã xong bước setup.
Sau bước này thì thì octopress sẽ tạo ra một cái git repo trong octopress/_deploy/.git/ link đến git@github:ktmt/ktmt.github.com.git.
Như vậy bạn có thể hình dung là sau này khi deploy thì octopress sẽ gen ra file vào trong _deploy và git push lên *git@github:ktmt/ktmt.github.com.git*.

Một chú ý nữa là sau bước này octopress sẽ:

  • Đổi tên remote branch hiện tại của bạn từ 'origin' sang 'octopress'
  • Add git@github:your_username/your_username.github.com vào remote branch và đổi thành 'origin'

alt text

Note là octopress branch của mình đang không phải là
*git://github.com/imathis/octopress.git
như các bạn mà đang là https://github.com/ktmt/ktmtblog-octopress.git.
Thực ra cái ktmtblog-octopress chỉ là một bản được fork về của octopress, và được tạo nên để giữ các bài viết trên github của bọn mình thôi.

Vậy là setup xong, tiếp theo là việc quan trọng nhất, viết blog.Để viết blog thì đầu tiên bạn sẽ phải generate ra file markdown thông qua

rake new_post["post_title"]

Kết quả là một file markdown đã được tạo ra ở thư mục source/post

alt text

Sau khi đã hoàn thành việc viết blog, việc tiếp theo bạn phải làm là generate cái file markdown đó + đống template thành static page thông qua jekyll. Octopress đã chuẩn bị sẵn cho bạn một rake task là generate, nên việc bạn phải làm chỉ là

rake generate

Kết quả là

alt text

Để preview thành quả của mình, octopress cung cấp cho bạn cả httpserver để preview, bạn gõ

rake preview

Và truy cập vào localhost:4000 thông qua browser là đã có thể preview thành quả của mình rồi.

Cuối cùng, bạn sẽ deploy lên github page thông qua

rake deploy 

Và như thế là bạn đã deploy thành công blog của bạn lên github page (với điều kiện là bạn không viết sai syntax markdown :D).
Chú ý là khi bạn rake deploy thì octopress sẽ copy đè "toàn bộ" cái repo your_username/your_username.github.com của bạn thay bằng cái thư mục _deploy của nó, kể cả commit tree. Vậy nên để lưu giữ các bài viết của cá nhân thì các bạn nên làm như mình là: fork octopress về thành một repo cá nhân, và mỗi lần viết xong thì bạn push ngược lại vào octopress repo đó. Lưu ý là octopress repo nhé:

git push octopress master

Cá nhân mình thì mình viết thêm 1 cái task vào Rakefile để cho đỡ bị nhầm lẫn repo:

desc "push to octopress also"
task :push_octopress do
  puts "pushing to octopress repo"
  system "git checkout master"
  system "git pull octopress master"
  system "git add ."
  system "git commit -m ¥"Octopress push new post¥""
  system "git push octopress master"
end

Và như vậy sau mỗi lần deploy bạn chỉ cần

rake push_octopress

Là đã synchronize thành công.

Kết luận:

Như vậy sau lần đầu setting có vẻ loằng ngoằng, từ bây giờ khi muốn viet blog bạn chỉ cần:

alt text

Rất đơn giản đúng không :D. Happy blogging.

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

huydx

118 bài viết.
1240 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
220 20
Một ngày đẹp trời, bạn quyết định viết một dịch vụ web dự định sẽ làm thay đổi cả thế giới. Dịch vụ của bạn sẽ kết nối tất cả các thiết bị di động ...
huydx viết 2 năm trước
220 20
White
192 15
Introduction (Link) là một cuộc thi ở Nhật, và cũng chỉ có riêng ở Nhật. Đây là một cuộc thi khá đặc trưng bởi sự thú vị của cách thi của nó, những...
huydx viết 4 năm trước
192 15
White
151 15
Happy programmer là gì nhỉ, chắc ai đọc xong title của bài post này cũng không hiểu ý mình định nói đến là gì :D. Đầu tiên với cá nhân mình thì hap...
huydx viết hơn 5 năm trước
151 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 gần 2 năm trước
9 0
Male avatar
7 4
Yandex được mệnh danh là google của Nga , có rất nhiều dịch vụ tương tự với google như : mail , maps , tranlaste , ... .Sau Khi google và microsoft...
Frey viết gần 5 năm trước
7 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
118 bài viết.
1240 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á!