Jekyll
{% include JB/setup %}
Install Ruby
Install Jekyll
sudo gem update --system
sudo gem install jekyll -V
Clone jekyll-bootstrap
cd ~/workspace/
git clone https://github.com/plusjade/jekyll-bootstrap.git taohex.github.io
cd taohex.github.io/
git remote set-url origin https://github.com/taohex/taohex.github.io.git
git push origin master
Run Jekyll
Start server
jekyll serve --watch
Now open chromium and browse
http://localhost:4000
Before creating a page, we read
vim Rakefile
We can find
# Usage: rake post title="A Title" [date="2012-02-09"] [tags=[tag1, tag2]]
# Usage: rake page name="about.html"
# You can also specify a sub-directory path.
# If you don't specify a file extention we create an index.html at the path specified
For example, create
rake post title="Jekyll" date="2013-08-11"
rake post title="Jekyll" date="2013-08-11" tags="[linux, ubuntu, macos, jekyll, github]" category="linux"
rake page name="linux/jekyll.md"
Edit and save
vim _posts/2013-08-11-jekyll.md
vim linux/jekyll.md
Refresh chromium to take effect.
Syntax Highlighting
Method 1: Use pygments (Support GitHub Flavored Markdown)
Install pygments, pygments.rb and redcarpet
easy_install pygments
sudo gem install pygments.rb
sudo gem install redcarpet
Add the following line to _config.yml below line pygments: true
markdown: 'redcarpet'
Generate syntax.css
cd path/to/your-site
pygmentize -S monokai -f html > assets/themes/twitter/css/syntax.css
You can use pygments-css instead
Find this line
<link href="{{ ASSET_PATH }}/css/style.css?body=1" rel="stylesheet" type="text/css" media="all">
Add this line below it
<link href="{{ ASSET_PATH }}/css/syntax.css?body=1" rel="stylesheet" type="text/css" media="all">
Defines all Languages known to GitHub
Preview all Pygments Styles for your code highlighting needs
Method 2: Use highlightjs (Better Visual Effect)
vim _includes/themes/twitter/default.html
Add following lines at the end of body
<!-- highlightjs -->
<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/monokai_sublime.min.css">
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Try other styles here: Test
Refresh chromium to take effect.