To setup your personal programming blog (based on markdown) using hexo, you can follow these steps :

• Installing Git, Node and Hexo

  This is a pretty straight forward step so i will assume that you have them installed.
  The documentation here can be helful to you for the same.

• Initialize you blog

  To setup you blog, you need to create an initial hexo project.

1
2
3

$ hexo init <project-name> # If you installed hexo globally
$ node_modules/hexo/bin/hexo init <project-name> # If you installed hexo locally
# Example $ hexo init ksck23

After this, you should see a <project-name> folder with the following structure.
.
├── _config.yml
├── package.json
├── scaffolds
├      ├── draft.md
├      ├── page.md
├      ├── photo.md
├      └── post.md
├── source
├      ├── _drafts
├      └── _posts
├── themes
├      └── …
└── README.md

• Configure your blog

  The configuration file is a straight forward yaml file located at <project-folder>/_config.yml
  You can follow the sample code written below to configure yours.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

# Hexo Configuration
# Site
title: Hackers Hub
subtitle: A hackers blog
description:
author: Shiva Chandra Kumar K
email: ksck23@gmail.com
# follow IETF format codes given here
# http://www.w3.org/International/articles/language-tags
language: en
# URL
url: http://<blog-name>.github.io
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
highlight:
  enable: true
  line_number: true
  tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2
# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMM D YYYY
time_format: H:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Disqus
disqus_shortname:
# Extensions
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
plugins:
# Add this line to generate an atom feed for your blog
- hexo-generator-feed
## Themes: https://github.com/tommy351/hexo/wiki/Themes
# Add this line to choose a custom theme for your blog
theme: greyshade
exclude_generator:
# Deployment
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
  type: github # To deploy you blog to github
  repository: https://github.com/<github-username>/<github-username>.github.io.git
  #Example : https://github.com/ksck23/ksck23.github.io.git

• Installing a theme

  You can skip this step, if the theme you configured was the default light theme.
  In other case, run the following :

1
2
3

$ cd <project-folder>/themes
$ git clone <git-url-of-theme> <theme-name>
# Example $ git clone https://github.com/nuklly/hexo-theme-greyshade.git greyshade

Once the cloning is done, ensure that the theme is configured in the <project-folder>/_config.yml.
Any theme specific configuration can be set in the <project-folder>/themes/<theme-name>/_config.yml file

• Installing a plugin

  You can install a plugin in a simple step :

1
2

$ npm install <plugin-name> --save
# Example $ npm install hexo-generator-feed --save

Once the installation is done, ensure that the plugin is configured in the <project-folder>/_config.yml.

• Create a blog post

  You can create a blog post :

1
2
3

$ hexo new <post-title> # If you installed hexo globally
$ node_modules/hexo/bin/hexo new <post-title> # If you installed hexo locally
# Example $ hexo new "Hello World"

After you create your post, you should see a file named <post-title> in <project-folder>/source/_posts folder.
You can edit the file to write your post data in markdown. The documentation on markdown syntax could help you write better markdown code. A nice online markdown editor called markable can help you validate your markdown code.

• To generate the static files

  You need to generate the static HTML/CSS/JS files for your blog post :

1
2
3

$ hexo generate # If you installed hexo globally
$ node_modules/hexo/bin/hexo generate # If you installed hexo locally
# Example $ hexo generate

• To run a server locally

  You can run a local server to checkout your blog. It will start based on the config parameters given in the <project-folder>/_config.yml file :

1
2
3

$ hexo server # If you installed hexo globally
$ node_modules/hexo/bin/hexo server # If you installed hexo locally
# Example $ hexo server

• To deploy your blog to github repository

  You need to create a repository named <github-username>.github.io in github before this step.
  Also ensure that the github repository url is configured properly in the <project-folder>/_config.yml
  Then do :

1
2
3

$ hexo deploy # If you installed hexo globally
$ node_modules/hexo/bin/hexo deploy # If you installed hexo locally
# Example $ hexo deploy

Now, you should be able to see your blog static files in the <github-username>.github.io repository. After 5-10 mins you should be able to see your blog hosted at http://<github-username>.github.io and your blogs atom feed at http://<github-username>.github.io/atom.xml

That’s it. Happy Blogging hackers !!!!!!

Hello Guys,

This is a technical blog that talks about all the coding challenges that i have come across till date.
I hope you would like it.

Here is a sample code snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var myData = {
	name: "Shiva Chandra Kumar K",
	activities: ["Coding", "Basketball"],
	email: "ksck23@gmail.com"
};
var findMe = function (data) {
	console.log("My Name : ", data.name);
	console.log("My Activities : ", data.activities);
	console.log("My E-Mail : ", data.email);
};
findMe(myData);

Thanks,
Shiva K