Awesome

Jott

v0.1.8

Jott is a static site or blog generating tool for node.js.

Read the documenation on a Jott generated blog here.

Preamble

This is my first real project, therefore it may be a bit rubbish in places. Please do email me at jon@andthats.it, or send a pull request, if you see anything glaringly awful.

Jott uses Jade for templating and Jade only. I prefer to use explicit references to the HTML tags that I work with all day. It will probably never support markdown. Jade is incredibly simple and quick to pick up.

Philosophy

Jott was born from my reluctance to blog using any webapps or self-hosted blogging software, as well as some of my thoughts on the matter of blogging, which are articulated far better than I ever could by @biesnecker here and here.

Summary

• I don't want distract myself from writing by worrying about Categories or Tags.
• I don't want to wrestle with web based text editors to write, especially when I'm comfortable with HTML/Jade.
• A navigation is not neccessary, there is a list of all articles at the site index.
• The site should be highly performant, containing little to zero JavaScript and a small amount of CSS.
• Generates static HTML.
• Manipulated via the Command Line, where I spend most of my time.

Installation

Jott is a command-line tool built for Node, it's written in CoffeeScript, and is available through npm.

$ sudo npm install -g jott

Jott needs to be installed globally using -g so it can create the necessary command in /usr/local/bin.

Usage

Init

$ mkdir test_blog
$ cd test_blog
$ jott init

$ Enter your Blog's name
$ -> <name>
$ Enter your Blog's Base URL,
$ Eg: "localhost/blogtest" or "www.joeblogs.com" 
$ (This can be changed in jott.json at anytime.) 
$ http://<url>

Initalizes the Jott blog by creating the basic blog structure and saving a blog name and base URL in the jott.json settings file.

test_blog/
	src/
		jade/
			header.jade		- the jade template for the header
			index.jade		- the jade template for the index page
			items.jade		- the list of all the posts so far
			posts/			- the directory containing the posts in jade
			templates/
				footer.jade		- the jade template for the footer of each post
				list.jade		- jade mixin for creating the index list of posts
				post.jade		- a blank post template (N.B the 'jott post' command creates posts automatically)
		styl/
			style.styl		- stylus file for theming
	posts/		- folder containg the rendered html for the site
	www/		- public web folder, can contain images and js as well as compiled css
		css/
			reset.css		- actually a copy of normalize.css
			style.css		- generated css file from stylus
			c.min.js		- minified and concatenated of both files
	jott.json	- JSON configuration file

New Post

$ jott post

$ Enter your new blog/post/page title:
$ -> <title>
$ New Post "<title>" Created  
$ Blog added to index

The newly created post will be available in the src/jade/posts/ folder

$ cd src/jade/posts
$ vim <title>.jade

Build

$ jott build

The 'jott build' command will compile your posts, index and stylus, along with the settings in jott.json. An index.html file will appear in the project root, and all the posts will be in the 'posts' folder.

Google Analytics

$ jott ga

$ Enter your Google Analytics tracking code.
$ Format: UA-12345678-0
$ -> <code>

If you have a free Google Analytics account, you can add your tracking number to all pages and posts with the 'jott ga' command.

Theming

The theming is mostly down to you. There is a very stripped back version of Bootstrap in place, but it is not used in any overt way, rather it is there purely for pre and code blocks, as well as structure. There is basic two colour styling in style.styl.

Google's prettyPrint library is used for code highlighting. Just mark your Jade as follows:

pre.prettyprint.lang-coffee
	| @variable = 'Jott is neat'
	| a + b = 7

Obviously replace coffee with js or whichever language you prefer.

Issues

- String escaping is a mess.
- 'jott post' can only be run in the project root.

Author

• Jonathon Sherrard (jonsherrard.com]

License

Unlicensed aka Public Domain. See /UNLICENSE for more information.