Chia-Hsun's Blog

Website under construction

Website Here talks about how this site is built.

Abourt jekyll and hyde

This is a website(blog) create by jekyll using the theme - hyde.

However, I want to test Bootstrap, so large part of them is replaced by Bootstrap.

Configurations

1. Change markdown parsing engine

For _config.html, change the markdown parsing engine from redcarpet to kramdown. (default : redcarpet in Hyde)

The reason is that:

GitHub Pages will only support kramdown.

markdown:         redcarpet

to

markdown:         kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Be sure to gem install kramdown rouge if you want to run it locally.

2. Use Bootstrap

If you want to use Bootstrap CSS like me, you have to add the following lines to _includes/head.html

<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

and comment out Hyde CSS

<!--
<link rel="stylesheet" href="/public/css/poole.css">
<link rel="stylesheet" href="/public/css/hyde.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
-->

Note that syntax.css should be kept for rendering the code.

Reference

Run jekyll

jekyll serve

Then, you can open the browser to http://127.0.0.1:4000/

Create page

1. Suppose that you want to create a page awesomeness, then create a directory of that name at the blog root.

mkdir awesomeness

Now your directory should have:

/                # root directory
/404.html
/LICENSE.md   
/README.md    
/_config.yml  
/_includes/   
/_layouts/    
/_posts/      
/_site/       
/about.md     
/atom.xml     
/awesomeness/    # your new directory for pages - awesomeness
/index.html   
/public/

2. Put the following lines at the front of index.md which should locate at awesomeness/.

---
layout: page
title: awesomeness
---

Note that the title doesn’t have to conform to any retrictions, but it should not be empty.

It would be the name used on the navigation bar and title display.

Further reading

Rouge syntax highlighter

Liguid for Designers the engine behind Jekyll

Reference