Baking static blog with JBake

May, 14 2017
Manik Magar
jbake
ssg

Static site is a new buzz topic that you might hear every where these days. Many blogs are simple static content and less frequently published. So having a static site compared to traditional CMS may make things simple and fast. There are many static site generators available in market, at least one per programming language like (ruby, java, php, go, groovy etc). You can choose anyone based on your comfort and liking.

Sometime back, I decided to switch my sites from hosted wordpress to static sites. For this task, I chose JBake static site generator which is written in java. It is very light and simple to use. In this post, we will see how to build a static blog with JBake.

Installing JBake

There are different ways to install JBake. I think the easiest way is to use SDKMAN.

Run below commands in terminal to install JBake

curl -s "https://get.sdkman.io" | bash`  (1)
sdk version
sdk install jbake
sdk current jbake

1	Refer: SDKMAN Install for more details

Initializing the site

Once you have JBake installed, you would want to get any existing template for your jbake site. You can choose one from example templates to initialize your site. While baking my this site, I have a published a new freemarker template - jbake-future-imperfect-template. Let’s create a site with this template.

If you have git installed on your system then you can clone the template repo into your local or download the current relesed package.

To clone the repo, run below commands in terminal

mkdir ~/awesome-jbake && cd ~/awesome-jbake
git clone https://github.com/manikmagar/jbake-future-imperfect-template.git .
jbake -b (1)
jbake -s (2)

1	`-b`: bakes the content and convert it into html files. It generates site in `output` folder.
2	`-s`: Serves generated content site

Open any web browser, your site should be accessible at http://localhost:8820. You should see something like below in your browser-

Content Authoring

Now you have you basic site up and running, let’s add some content to it. Two folder’s in our template are important for creating content -

content: This is where you would place all your blog posts, pages or any other content. JBake supports writing posts in raw HTML format, Github Markdown or AsciiDoc format. You can choose any one or have mixed files too. There are some sample posts included with template, take a look at those.
assets: This folder should contain all static resources like images, js, css files related to blog/template. For post related images, you can create the structure similar to what you would create in content folder for your posts.

Content Editing

There are many tools available to edit your content. Some of them are -

Atom: Atom is feature-rich text editor with has lots of plugins to make markdown, html or asciidoc writing easy. I liked this for authoring asciidoc content. With asciidoc-image-helper package, you can just paste any image data and it will save that as file with reference in the same folder. Although you would need to move this file to assets folder, I found it very handy. I use this for creating content asciidoc.
prose.io: If you are going to host your site/content on github and write in markdown, you may want to look at this online content authoring tool. It is tightly coupled with github and markdown though.
Typora: Beautiful, simple, clean and distraction-free standalone application that makes it easy to create markdown-formatted content. I use this for creating Markdown content.
More on Headless CMS: There are many CMS that helps to author content for static sites. Headlesscms.org has a curated list of such CMS applications.

Rebuilding site

When you add/modify the content of your site, you need to bake it again. If your already serving jbake site with jbake -s then your site should rebuild as soon as you modify your content files. This is because JBake is watching your content folder and it detects the changes to rebuild the site. Otherwise, you can always run jbake -b -s to build and server the site.

Conclusion

JBake makes it easy to ramp up a static blog site. In less than 2 mminutes, our static template site was up and running.

So keep baking and editing!

Follow @manikmagar on twitter to get updates on new posts.