How to write post in github pages

Posted in tools with : productivity

Contents:

Description

This post is not for how to deploy the environment of writing posts in github pages, but how to use the environment you deployed before.

Assuming that you have deployed the following tools:

In Local:

In Remote:

To add a new post

  1. git clone https://github.com/hongchaozhang/GitBlogs.git
  2. go to gh-pages branch
  3. open _post folder, add a new md file named like this: 2015-05-20-How-to-write-post-in-github-pages.md. Notice: DO NOT leave any space in the file title.

  4. use MarkdownPad in windows or Macdown in mac to open the md file you created, and put the yaml title on the top as follows (Note: three dashes at the top and bottom):

    ---
    layout: default
    comments: true
    category: choose only one from /data/categories.yml
    tags: [tag1, tag2, …, tagn] choose from /_data/tags.yml
    title: How to write post in github pages
    ---
    If you don’t have a local MarkdownPad, you can use online tools to edit the md file, like stackedit, a very powerful one. Five star recommended O(∩    ∩)O~！

  5. Add the content of the post. For Markdown grammar, refer here for Chinese version.
  6. After complete the md file, you can directly push the md file to github repo, if you believe it has nothing wrong.

For an alternative, you can using your local Jekyll to start a server and test the post you wrote. To do this:

  1. Open cmd window.
  2. Go to you post foler, for me, it is GitBlogs.
  3. Start Jekyll server by running: jekyll serve
  4. Open server address listed in cmd window, for me, it is localhost:4000/GitBlogs

To add a new “category” or “tag”

If we want to add a new tag “java” into our blog, we should:

  1. go to /blog/tag/ folder, and add a new file named “java.md”;

  2. add the following content into the new file:

    ---
    layout: blog_by_tag
    tag: java
    permalink: /blog/tag/java/
    ---

  3. go to /_data/ folder, and open tags.yml;

  4. add the following content into tags.yml file (NOTE the indent and spaces):

    - slug: java
    name: java

For “category”, it is similar.

To enable code highlihgt

official site

Improve Code Highlighting in a Jekyll-based Blog Site

1 <head>
2 ...
3 <link href="/css/syntax.css" rel="stylesheet">
4 ...
5 </head>

There is a problem here: when you select code, the line numbers are also selected. There are two ways to solve this:

 1 // hide line numbers in code pieces right before we copy the code
 2 $(document).ready(function () {
 3 	$("code").bind("copy", function () {
 4 	    var innerHtml = this.innerHTML;
 5 	    $(this).find('.lineno').remove();
 6 	    var that = this;
 7 	    setTimeout(function(){
 8 	        $(that).children().remove();
 9 	        that.innerHTML = innerHtml;
10 	    },0);
11 	});
12 });

To make the post searchable by Google

Refer here.

Google crawls and ranks websites partially based on links to it from other websites. You should consider submitting it to some award websites, show-and-tells, etc to increase the value of the domain.

It can take a few days to a few months to be indexed, depending on several factors. It’s recommended that you use the submit URL tool, which may help speed up this process.

I tried the submit URL tool, and after hald day, my blogs can be searched in google. But you should use exactly the same words in your post to search, or your post may be very behind, as the value of your domain is very low.

Some tips for markdown grammar

insert an image

To insert the image, just use the path under the base url, for me, it is */GitBlogs/images/.png*, for example

![image annotation](/GitBlogs/images/001_ios_frameworks.png)