Nick Peng's Blog

How to build your own github blog pages.

2014-06-26T15:00:00+00:00

As my own blog has been almost completed, I’m writing this guide to anyone who wants to build his own blog.

The website is based on jekyll, jekyll is a simple, blog-aware, static site generator, it tool can transform your plain text into static websites.

You can learn more about jekyll at http://jekyllrb.com/. for Chinese, you can visit at http://jekyllcn.com/.

Requirements

Accounts

Some accounts is necessary, such as github account, some not, but if you have these accounts , you can do more facilities on your site.

GitHub Account

An github account is required, you can sign up at https://github.com/join.

Google Account (optional)

Google account is used for statics and web analysis, you can sign up at http://www.google.com (YOU CANNOT ACCESS GOOGLE IF YOU ARE IN CHINA, FUCK GFW.)

Disqus Account (optional)

Disqus is a third social comments system, you can let people write their ideas on you blog pages. you can sign up at https://www.disqus.com/

Before start

sample blog in plain text

The blog file is in markdown or textile syntax, you can learn at http://daringfireball.net/projects/markdown/.

Here is a example:

layout: post
title: draft
date: 2014-06-24 23:00:00 +0800
categories: misc
description: page description.
tags: tags
---
This is an example.

for lazy guys

If you just want to use free blog, don’t want to create website yourself, you can use this wizard to create your own page, it’s very easy.

Sign in github with your account.
Open the following url, and do as wizard.

https://github.com/username/username.github.io/generated_pages/new
Clone your repository to local.
Write your blog file named YYYY-MM-DD-blog-title.md. and put it in _posts directory, the syntax of blog is markdown.
Push it to github server.
You can access you website at http://yourname.github.io. (The server will take some minutes for the first publish)

if you are a geek

if you want to build your blog pages yourself, just read the following text.

Some thing you need to know

You can host your website on github, the process is as follows.

Build your own website project according to jekyllrb.
Create a new repository on github named username.github.io.
Push your project into your repository on github.
Github server will run jekyll to generate your website, and publish your website automatically.
You can access you website at http://yourname.github.io. (The server will take some minutes for the first publish)

The detailed wizard is at https://pages.github.com/

Tools

Local computer tools

git : http://rubyinstaller.org/downloads/
ruby : http://git-scm.com/ (Windows users can download TortoiseGit. )

Build site

knowledge

jekyll project has it’s own directory struct, the struct is like these.

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
└── index.html

You can learn more about this at http://jekyllrb.com/docs/structure

How-to

About Front-matter

Any file that contains a YAML front matter block will be processed by Jekyll as a special file.

You can learn more about YAML Front Matter at http://jekyllrb.com/docs/frontmatter/.

Front-end framework.

Bootstrap is a popular front-end framework, You can use it to design your website in your own style.

Here are some example pages. http://getbootstrap.com/getting-started/#examples

You can use them as your templete pages.

Display blog posts.

Here is an introduction to write or display posts, http://jekyllrb.com/docs/posts/

Some other components you may need.

jquery : http://jquery.com/
highlight : http://highlightjs.org/
font-awesome : http://fortawesome.github.io/Font-Awesome/

Add comments system

There are many comments systems, I prefer Disqus

If your blog is in Chinese, you can use 多说 as your comments system.

At last

The rest is your creativity, you can create you own pages with these powerfull components.

You can also fork me at github.

useful links

github pages

https://pages.github.com/

personal website list

https://github.com/jekyll/jekyll/wiki/sites

Disqus : https://www.disqus.com/
多说 : http://www.duoshuo.com/

markdown syntax

syntax practice : http://markdown-here.com/livedemo.html
syntax : https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet

My first blog.

2014-06-23T15:00:00+00:00

Hi, everybody, This is my first github blog page, it’s my pleasure to see you all. The content contains some Markdown syntax test cases.

Start

Basic writing

Paragraphs

On July 2, an alien mothership entered Earth’s orbit and deployed several dozen saucer-shaped “destroyer” spacecraft, each 15 miles (24 km) wide.

On July 3, the Black Knights, a squadron of Marine Corps F/A-18 Hornets, participated in an assault on a destroyer near the city of Los Angeles.

Headings

The largest heading

The second largest heading

Blockquotes

In the words of Abraham Lincoln:

Pardon my french

Styling text

This text will be italic This text will be bold Everyone must attend the meeting at 5 o’clock today.

Lists

Unordered lists

Item 1
Item 2
- Item 2a
- Item 2b

Ordered lists

Item 1
Item 2
Item 3
- Item 3a
- Item 3b
- Nested lists
Item 1
A corollary to the above item.
Yet another point to consider.
Item 2
- A corollary that does not need to be ordered.
- This is indented four spaces, because it’s two spaces further than the item above.
- You might want to consider making a new list.
Item 3

Images

Code formatting

Inline formats

Here’s an idea: why don’t we take SuperiorProject and turn it into **Reasonable**Project.

Multiple lines

Check out this neat program I wrote:

x = 0
x = 2 + 2
what is x

Links

Visit GitHub!

GitHub Flavored Markdown

Multiple underscores in words

perform_complicated_task do_this_and_do_that_and_another_thing

URL autolinking

http://example.com

Strikethrough

~~Mistaken text.~~

Fenced code blocks

Here’s an example:

function test() {
  console.log("notice the blank line before this function?");
}

Syntax highlighting

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

1
2
3
4
5
int main(int argc, char *argv[])
{
	printf("Hello, world!");
	return 0;
}

Tables

First Header | Second Header ————- | ————- Content Cell | Content Cell Content Cell | Content Cell

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Name	Description
Help	Display the help window.
Close	Closes a window

Name	Description
Help	~~Display the~~ help window.
Close	Closes a window

Left-Aligned	Center Aligned	Right Aligned
col 3 is	some wordy text	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

First Header	Second Header
Content from cell 1	Content from cell 2
Content in the first column	Content in the second column

Writing on GitHub

Markup

Newlines

Roses are red Violets are blue

Task lists

@mentions, #refs, links, formatting, and ~~tags~~ are supported
list syntax is required (any unordered or ordered list supported)
this is a complete item
this is an incomplete item
a bigger project
- first subtask #1234
- follow up subtask #4321
- final subtask cc @mention
a separate task