Github pages

Thông tin cơ bản

  • GitHub Pages: một dự án để mọi người tạo trang web cá nhân hoặc nhóm. Nó chỉ là một repo trên GitHub, trong đó chứa các tập tin web và được trỏ đến domain xxx.github.io
  • Một số cách để sử dụng GitHub Pages – Thêm trang web lên trên repo – Sử dụng Jekyll: Link – Sử dụng Octopress: Link => Trong bài viết này sẽ hướng dẫn sử dụng octopress trên github

Công cụ sử dụng

  • Python 2.7.6
  • Ruby 2.0.0
  • Ruby DevKit 4.7.2

Hướng dẫn

Cài đặt Python 2.7.6

Cài đặt Ruby 2.0.0 và Ruby DevKit

Cài đặt và sử dụng git trên windows

Khắc phục lỗi sau khi cập nhật hệ điều hành MacOS

  • Lỗi “warning: Insecure world writable” cho thư mục nào thì gọi lệnh “sudo chmod go-w …” cho thư mục đó
  • Lỗi “No such file or directory - jekyll”
    • Cài đặt lại ruby 2.2.3 cho mac os 10.11-el-capitan: https://gorails.com/setup/osx/10.11-el-capitan
      • brew install rbenv ruby-build

      • Add rbenv to bash so that it loads every time you open a terminal

        echo ‘if which rbenv > /dev/null; then eval “$(rbenv init -)”; fi’ » ~/.bash_profile source ~/.bash_profile

      • rbenv install 2.2.3
      • rbenv global 2.2.3
      • ruby -v
    • Vào trong thư mục chứa octopress thực thi các lệnh sau: https://github.com/imathis/octopress/issues/1749
      • rbenv local 2.2.3
      • gem install bundler
      • rbenv rehash
      • bundle install
    • Xóa thư mục public
    • Xóa nội dung thư mục _deploy và gọi lệnh gen_deploy
  • Lỗi “Could not find eventmachine-1.0.4 in any of the sources”
    • Chạy lệnh “gem install eventmachine -v ‘1.0.4’ – –with-cppflags=-I/usr/local/opt/openssl/include”

Các bước thực hiện

  • B1: Tạo 1 tài khoản github
  • B2: Download src của octopress từ https://github.com/imathis/octopress
  • B3: Sử dụng với các lệnh sau (bundle exec)
    • rake new_post[”…”]: tạo 1 bài post => Sử dụng trong zsh: bundle exec rake “new_post[test]”
    • rake new_page[”…”]: tạo 1 trang mới
    • rake preview: xem trên localhost
    • rake generate: phát sinh trang html
    • rake deploy: up len github (nhập user và password của tài khoản trên github)
    • Nếu có lỗi không thể deploy thì có thể làm tay
      • Tạo thư mục chứa các tập tin/thư mục để đưa lên sever. Sử dụng lệnh: “mkdir _deploy”
      • Tạo kết nối của thư mục _deploy và repo của github. Sử dụng lệnh: “git clone _deploy”
      • Khởi tạo. Sử dụng lệnh: “rake gen_deploy”
    • Nếu không nhận ra bundle
      • cd C:/RubyDevKit
      • ruby dk.rb init
      • ruby dk.rb install
      • cd thư mục chưa octopress
      • gem install bundler
      • gem install RedCloth -v ‘4.2.9’
      • bundle install

Một số cú pháp thông dụng

  • Hình ảnh: < Image sr=””/>
  • Link tham khảo: [chuỗi mô tả](đường link)
  • Code block:
    • { % codeblock [lang:language] [title] [url] [link text] [start:#] [mark:#,#-#] [linenos:false] % }
    • code snippet
    • { % endcodeblock % }

Cài đặt và sử dụng mục lục trong octopress

  • Cài đặt
    • Download từ link
    • Giải nén
      • Copy các tập tin trong thư mục js vào thư mục “source/javascripts”
      • Copy các tập tin trong thư mục css vào thư mục “source/stylesheets”
    • Tạo tập tin “javascripts/generate-toc.js” với nội dung sau
1
2
3
4
5
6
7
8
9
10
11
12
13

function generateTOC(heading) {
  	   var container = jQuery("<section></section>");
	   var div = jQuery("<ul id='toc'></ul>");
	   var content = jQuery('.sidebar');

	   if (heading != undefined && heading != null) {
	      container.append('<h1 class="tocHeading">' + heading + '</h1>');
	   }

	   div.tableOfContents("#content",{startLevel: 2});
	   container.append(div);
	   content.prepend(container);
  }
  • Thêm đoạn code sau vào tập tin “source/_includes/custom/head.html”
1
2
3

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
     <script src="/javascripts/jquery.tableofcontents.min.js" type="text/javascript"></script>
     <script src="/javascripts/generate-toc.js" type="text/javascript"></script>
  • Thêm đoạn code sau vào tập tin “source/_includes/custom/after_footer.html”
1
2
3
4
5
6

<script type="text/javascript">
    jQuery(document).ready(function() {
        // Put a TOC right before the entry content.
        generateTOC('Table of Contents');
    });
    </script>
  • Sử dụng: trong phần head của mỗi bài post hay page, thêm vào “toc: true”
  • Tham khảo: link

Sử dụng theme

  • Chọn theme trong link bên dưới
  • https://github.com/imathis/octopress/wiki/3rd-Party-Octopress-Themes
  • Làm theo hướng dẫn
1
2
3
4

cd octopress
git submodule add GIT_URL .themes/THEME_NAME
rake install['THEME_NAME']
rake generate
  • Một số theme yêu thích:
    • https://github.com/alexharris/calm-shallow-sea
    • https://github.com/sevenadrian/foxslide
    • https://github.com/mikeclarke/villainy-octopress-theme
    • https://github.com/syui/syui.github.io/tree/theme
    • https://github.com/deakolt/octoflow
    • https://github.com/annejohnson/octofound
    • https://github.com/coogie/oscailte/
    • https://github.com/jez/hpstr-theme

Tài liệu tham khảo