null
Contents
  1. Overview
    1. Hexo
      1. Requirements
      2. Installation
    2. Fexo
    3. Atom Editor
    4. markdown-writer

Blogging with Hexo

Overview

This entry is intended as a note-to-self to document my blog configuration.
The blog framework I chose is: Hexo
The hexo theme I’ve settled on is: Fexo
I’m editing with the atom text editor, and have enabled the markdown-writer plugin.

Hexo

Hexo is a simple blog framework that generates static pages. Blog posts are created in the markdown format, then parsed by hexo. Hexo outputs static site content which you can synchronize to your web server. Hexo is written in node.js.

Requirements

Hexo requires Node.js and Git.

Installation

Hexo can be installed with npm (Node.js package manager) with a single command:
$ npm install -g hexo-cli

Once hexo is installed you’ll use the hexo command to configure the blog. Typing the command with no parameters outputs the following:

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
X:\>hexo
Usage: hexo <command>
Commands:
clean Removed generated files and cache.
config Get or set configurations.
deploy Deploy your website.
generate Generate static files.
help Get help on a command.
init Create a new Hexo folder.
list List the information of the site
migrate Migrate your site from other system to Hexo.
new Create a new post.
publish Moves a draft post from _drafts to _posts folder.
render Render files with renderer plugins.
server Start the server.
version Display version information.
Global Options:
--config Specify config file instead of using _config.yml
--cwd Specify the CWD
--debug Display all verbose messages in the terminal
--draft Display draft posts
--safe Disable all plugins and scripts
--silent Hide output on console
For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/
X:\>

I created a folder: X:\routeswitch.net and initialized the blog folder with:

1
2
3
X:\>hexo init routeswitch.net
cd routeswitch.net
npm install

This creates a number of files and folders:

1
2
3
4
5
6
7
8
9
. (This folder is X:\routeswitch.net\)
├── _config.yml (this is the main hexo configuration file)
├── package.json
├── scaffolds (this is where prottype files for posts go)
├── source (site source - )
| ├── _drafts ()
| └── _posts
└── themes (where theme files are installed)
└── landscape (landscape is the default hexo theme)

From here I examined the _config.yml file, which is in a really simple markup format: YET ANOTHER MARKUP LANGUAGE.

A few configuration changes were required here:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: Lose Yourself to Labs
subtitle: Not the Worst Site
description:
author: James Schallau
language: en
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://routeswitch.net
root: /
permalink: :year/:month/:day/:title/

I’ll likely revisit this once I have a more appropriate name and the like.

The default theme, landscape, didn’t suit my tastes. After spending a few hours trying out and customizing various themes I chose Fexo by Forsigner.

Fexo

Fexo“ by Forsigner is a minimalist theme for Hexo. Fexo’s documentation is here.

There are four reasons why I chose fexo:

  • Fexo makes it easy to display a list of blog entries by title on my landing page.
  • Fexo automatically creates a contents side-bar. This side-bar parses the headers, diplays the header of the article section the readers is viewing, and allows the reader to click to jump to a different section.
  • Integrated disqus support. With word-press I had the hassle of managing my own comment systems that is susceptible to attack. With disqus I cede some control but alleviate another administrative burden.
  • Fexo has a clean look.

Fexo’s default language is Chinese, but it has localization files for both Norwegian and English. I changed the default language setting in routeswitch\_config.yml and started from there.

The primary changes I made were:

The creation of a personal-style.css. Here I overrode some of the default theme settings. Notably, changing away from some custom fonts to Arial.

Toggling the creation of an Archive page, a Tags page, and an About page.

At the moment the archives page is essentially the same as the “Home” page. I might omit it entirely unless I discover some additional functionality.

Atom Editor

Atom is an open-source cross-platform text editor started by the folks at github.

I wanted something to replace the various text editors I use across platforms. I had only been using Mac for the past 6-7 years, but with the purchase of a Microsoft Surface, Windows has come back into my life. Many years ago I used notepad++, and while it served me well I thought it would be a fine time to evaluate my options.

I’m loving Atom so far. It is themeable and supports packages which extend its capabilities. I’ll likely create a YouTube video showing my configuration.

markdown-writer

The markdown-writer Atom plugin enables additional keyboard shortcuts to assist when creating .markdown files. It has a cheat sheet built in which is accessible by pressing ctrl-shift-p and entering markdown-writer cheat sheet - autocomplete makes this fast.

The following keyboard shortcuts were added into atom:

1
2
3
4
5
6
7
8
9
10
11
12
"shift-ctrl-K": "markdown-writer:insert-link"
"shift-ctrl-I": "markdown-writer:insert-image"
"ctrl-i": "markdown-writer:toggle-italic-text"
"ctrl-b": "markdown-writer:toggle-bold-text"
"ctrl-'": "markdown-writer:toggle-code-text"
'ctrl-`': "markdown-writer:toggle-codeblock-text"
"ctrl-h": "markdown-writer:toggle-strikethrough-text"
"ctrl-1": "markdown-writer:toggle-h1"
"ctrl-2": "markdown-writer:toggle-h2"
"ctrl-3": "markdown-writer:toggle-h3"
"ctrl-4": "markdown-writer:toggle-h4"
"ctrl-5": "markdown-writer:toggle-h5"

But son, her emails...
But son, her emails…