Octopress is an obsessively designed toolkit for writing and deploying Jekyll blogs. Pretty sweet, huh? – Octopress

Octopress là một framework design cho Jekyll. Gọi là framework nghe có hơi to tát - 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.

Trong khuôn khổ bài viết này, mình xin hướng dẫn các bạn sử dụng Octopress để tạo 1 blog đơn giản, thêm bài viêt, page.

Xong màn dạo đầu... Tiến hành luôn cho nó nóng.

Cài đặt và sử dụng

Yêu cầu:

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

Đầu tiên, chúng ta cần cài đặt octopress gem từ Teminal:

gem install octopress

Tạo mới project

Tạo một project mới với Octopress CLI commands::

octopress new izweb

Kết quả thu được sau khi chạy lên trên như thế này là bạn đã thành công:

$ cd izweb
$ tree
.
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│   └── 2017-08-28-welcome-to-jekyll.markdown
└── _templates
    ├── draft
    ├── page
    └── post

2 directories, 10 files

Thêm bài viết

Để tạo bài viết mới, các bạn dùng Octopress CLI commands:

octopress new post Hello World

Comand trên sẽ tạo mới 1 bài viết với tiêu đềHello Worldvà thêm vào thư mục_postsfile2017-08-28-hello-world.markdownvới nội dung như sau:

$ cat _posts/2017-08-28-hello-world.markdown 
---
layout: post
title: "Hello World"
date: 2017-08-28T16:28:42+07:00
---

Mặc định nội dung của bài post được viết dưới dạng markdown file. Nội dung bài post sẽ nằm phía dưới YAML front matter (phần nội dung nằm giữa cú pháp ---, tại đây bạn cũng có thể đặt được các biến xác định trước và biến tùy chỉnh, chẳng hạn như Categories, Tags và permalink. Chi tiết các bạn tham khảo thêm tại Jekyll Documentation).

View bài viết

Để view được bài viết vừa thêm, trước tiên cần chạy lệnh:

$ jekyll build

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ây giờ chúng ta chạy lệnh:

$ jekyll serve

Access vào địa chỉ http://127.0.0.1:4000 bạn sẽ thấy trang web của mình

Tạo page

Khi chạy lệnh jekyll buildOctopress mặc định tạo ra About page tại địa chỉ http://127.0.0.0:4000/about/. Các bạn có thể tìm thấy nó trong thư mục _site/about Để tạo page cũng tương tự như tạo post, các bạn sử dụng Octopress CLI commands:

$ octopress new page contact.md

Thao tác này sẽ tạo một trang mới trong thư mục chính của project. Nội dung file được tạo ra như sau:

---
layout: page
title: ""
---

Nhập title của page nếu bạn muốn. Bạn có thể nhập nội dung cho trang bên dưới phần đầu của YAML. Giống như trong trường hợp của bài viết, nội dung được viết bằng định dạng markdown. Bạn cũng có thể chọn một đường dẫn để tạo trang. Ví dụ:

$ octopress new page news/index.md

Thao tác này sẽ tạo ra một thư mục mới có tên news và một tệp index.md bên trong nó.

Khi bạn chạyjekyll buildvàjekyll serve, tệp .html được tạo ra giống như nội dụng có trong trang "about". F5 web, link tới trang sẽ tự động hiển thị trong navigation bar.

Configuration

Octopress cung cấp cho chúng ta file cấu hình các thông tin cơ bản cho website, đó chính là file _config.yml được đặt ở thư mục root của app.

# Site settings
title: Your awesome title
email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
markdown: kramdown

Từ file cấu hình, chúng ta có thế thêm tên người dùng twitter, github. Chúng sẽ được hiện thị ở cuối trang, cùng với mô tả. Chúng ta có thể chỉnh sửa các cài đặt như mong muốn, sau đó khởi động lại server và xem kết quả những thay đổi đó ở ngoài trình duyệt.

Social Media Sharing

Tính năng chia sẽ bài viết lên mạng xã hội (Twitter, ...) là rất quan trọng nếu bạn muốn có được một lượng traffic lớn. May mắn thay, có một gem có sẵn trên Octopress để giúp chung ta làm điều đó. Trong bài viết này, tôi sẽ hướng dẫn cấu hình với Twitter. Bạn có thể tham khảo cách cấu hình cho Facebook và Google Plus tại đây. Chúng ta thêm đoạn code sau vào file Gemfile:

group :jekyll_plugins do
  gem 'octopress-social'
end

sau đó chạy lệnh

bundle install

Mở file _config.yml và thêm đoạn code sau:

twitter:
username:                               # Add your Twitter handle
tweet_count:         false              # Show number of shares on Twitter
size:                normal             # Or large
embedded_link_color:                    # Set link color for embedded tweets

follow_count:        false              # Show number of followers
tweet_message:       ":title by :username :hashtags - :url" # With Tweet button Twitter add the URL last
tweet_link_text:     Twitter            # Configure the link text
tweet_link_title:    Share on Twitter   # Share link title
profile_link_text:   Follow :username
profile_link_title:  Follow :username on Twitter  # Profile link title text

Điền username Twitter vào dòng này:

username: twitter_user

Các setting còn lại có thể để default Để sử dụng Twitter share buttons, chỉ cần đặt đoạn tag sau vào vị trí bạn muốn:

{% twitter_script_tag %}

Nếu bạn muốn đặt button sharing ở tất cả bài post, chỉ cần đặt đoạn code sau {% tweet_button %}vào thẻ content tag trong file _layouts/post.html Làm tương tự với các page khác nếu muốn. Reload trình duyệt và xem kết quả nhé ^^.

Deploying to GitHub Pages

Chúng ta sẽ lưu trữ source code của blog trên GitHub. Tạo tài khoản nếu bạn chưa có tài khoản. Tạo mới repository, đặt tên repo theo chuẩn: username.github.io, nhớ thay username bằng GitHub username của bạn. Trong ví dụ này chúng ta đặt là izweb.github.io. Mở terminal và chạy lệnh initialize git:

git init
git remote add origin https://github.com/izweb/izweb.github.io.git

Tạo file config deploy cho blog sử dụng command octopress deploy init.

octopress deploy init git git@github.com:user/project

File _deploy.yml sẽ được tạo ra, nội dụng của file như sau:

method: git                               # How do you want to deploy? git, rsync or s3.
site_dir: _site                           # Location of your static site files.

git_url: git@github.com:izweb/izweb.github.io  # remote repository url, e.g. git@github.com:username/repo_name

# Note on git_branch:
# If using GitHub project pages, set the branch to 'gh-pages'.
# For GitHub user/organization pages or Heroku, set the branch to 'master'.
#
git_branch: master                        # Git branch where static site files are commited


# remote_path:                            # Destination directory

Cuối dụng thì deploy source mới nhất lên thôi!

octopress deploy

Sau khi xong, website của bạn sẽ được cập nhật. Link url website: https://izweb.github.io

Kết luận

Trong bài viết này mình đã giới thiệu cơ bản các thao tác đề tạo được 1 blog, thêm bài viết mới, thêm page với Octopress 3, bên cạnh đó cũng hướng dẫn các bạn thêm tính năng chia sẻ lên mạng xã hội (Twitter) và deploy lên môi trường production sử dùng Github Pages (đối với các bạn chưa biết về Gihub Pages. Chúc các bạn thành công!

Nguồn: https://github.com/octopress/octopress