One of the first things I want to do always I publish some new project on GitHub is to provide a development diary / (b)log with the latest updates or feature additions but I have not found the proper tool yet. I’ve been told about Jekyll but it requires more effort than I’m willing to do (although it require very low effort). I want something quick and easy: with the minimum server or client support. Something to do with a simple text editor.
So I created AutoBlog. And I have all the documentation, setup, and feature list in an AutoBlog supported static site you can check for inspiration and example. Of course, this is only a beta and more features are coming but you know, step by step.
The concept is very simple:
1. Create some folders in the server:
. |-- haikus <--+-- My stories' folders! |-- index.html | |-- lib | |-- README.md | |-- spec | |-- src | |-- stories <--' |-- style.css `-- tests.html
2. Fill with plain text files:
[test-story.md]
Title of the story
The body is optional, follows the title after a break line.
+++
If you break the body by using the former three plus symbols (+++), you create
an excerpt and a body. The excerpt is all before the three pluses. The body is
the rest. You can specify the author and the publication date after three
dashes (---) using `by` and `on` special words.
---
by Here the author
on 2013-07-08
3. Keep an index file with the published stories:
[index] introducing-autoblog.md implemented-features.md some-of-the-new-features-coming.md
4. Add simple markup:
<body>
<header>
<h1>AutoBlog</h1>
</header>
<section>
<h1>Haikus</h1>
<div data-stream="haikus">
<article data-template>
<pre data-body></pre>
</article>
</div>
</section>
<section data-stream>
</section>
</body>
Note data-stream, data-template and data-body attributes.
- The data-stream attribute tells AutoBlog where to get the stories from (by default is stories)
- The data-template attribute, inside a stream, tells AutoBlog the element is a template for the stream stories.
- The data-body attribute, inside a template, tells AutoBlog to put the body of the story inside.
5. Include some JavaScript file…
<head> <script src="lib/polyfills/Promise.js"></script> <script src="lib/showdown.js"></script> <script src="src/autoblog.js"></script> </head>
Despite I’m working on a single file version, you need the DOMPromise polyfill for AutoBlog to work. You can include showdown.js if you want to support markdown in your stories.
…and you’re done! Check it by exploring the whole source code of the example website.
So, this is how it works. And this is my solution for quick blog deployment, hope it helps you with your own projects!
Uno + uno = diez 