Manik MagarManik Magar

In this previous post we saw how we can create a static blog using JBake static site generator. Once you have your site ready, next obvious question will be where to host the site? Off course there are many hosting options available. One of the easy and free way to host static pages is with Github Pages.

In this post, we will go over
  1. Publish our JBake site to Github Pages.

  2. Achieve continuous deployment of our site using CircleCI.

Publish JBake site to Github Pages

We will use the same template site we built in our previous post and publish a site called 'awesomejbake'.

Step 1: Create Github Repository

Go to Github and create new repository with name awesomebake as shown in below sample screenshot. To keep it simple, keep "Initialize this repository with a README" option checked.

jbake with continuous deployment to github create repo

Step 2: Checkout and Bake Site in local

We will use git command line client, if you don’t have git client installed, read this for how to install it.

Follow below steps to setup local site:

mkdir ~/awesomejbake
cd ~/awesomejbake
git clone https://github.com/username/awesomejbake.git

Dont forget to replace username with your Github username.

Now, copy the content of ~/awesome-jbake that we created in previous post and paste content in ~/awesomejbake directory. So, we have our template site in repo directory.

Github can either publish site from the root of the repo or a folder named docs in the root of the repo. As we will be having other template files at the root of the repo, let’s choose to use docs folder to publish our site.

To see our site in local, run this command while in username.github.io folder -

jbake -b . ./docs

This command will bake our jbake site and generate the output in docs instead of default output folder.

To preview out site, run below command to serve it from docs folder -

jbake -s ./docs

So, we have our site ready to push to Github.

Push site to Github

To push our site to repo, follow below commands -

git add content assets templates jbake.properties docs
git commit -m "Upload awesome site"
git push

Go Live with Github pages

Go to Github Settings page for your repo - https://github.com/{username}/awesomejbake/settings and scroll down to Github Pages section. Under Source section, select 'masterbranch /docs folder' and click save.

You should see your site url in header - http://{username}.github.io/awesomejbake. You can access your site at that URL. We are LIVE!

jbake with continuous deployment to github setup pages

Continuous Deployment to Github Using CircleCI

We have our site live at Github. We can now keep adding new content in our ~/awesomejbake/content folder. Once we add content, we must bake our site again and push the latest content and generated /docs to github. We can either bake locally or go for online continuous deployment.

Option 1: Local baking and Publish

Bake your site locally and commit/push baked content to github. Everytime you add/modify content, you will follow part Step 2 above to bake and push the site. This option ties you to your local machine to publish your site. Remember we saw few options to author your content online. You may not be able to take full advantage of online editing with this option.

Option 2: Continuous Deployment via Online CI

Another option is to use Continuous Integration services like CircleCI, Travis-CI etc.

Step 1: Login/Sign up to CircleCI and build your project.

jbake with continuous deployment to github build circleci

Step 2: Add a circle.yml file in ~/awesomejbake/. Add below content to this file-

machine:
  pre:
    - git config --global user.name "CircleCI"
    - git config --global user.email "[email protected]"

dependencies:
  pre:
    - curl -s "https://get.sdkman.io" | bash
    - sdk install jbake 2.5.1

test:
  override:
    - sdk version
    - sdk current jbake

deployment:
  master:
    branch: master
    commands:
      - rm -rf docs/*
      - jbake -b . ./docs
      - git add docs
      - git commit --message "Generated site on $(date) [ci skip]"
      - git push origin master

Step 3: Then push this file to github-

git circle.yml
git commit -m "Added circleci"
git push

Next time when you add a content to your github repository, CircleCI should start the build and deploy new site back to docs folder.

Permissions for CircleCI to Commit to your repo

For git push to work from circle ci, you must add deploy key to circleci with these instructions.

Conclusion

We built our JBake site and hosted it on Github Pages. Also, we saw how we can publish out site to github.

Hope this helps you to bake your own site. Keep Baking!

Baking static blog with JBake

JBake is a very simple java based static site generator which makes it easy to generate static blogs.

Manik MagarManik Magar
JBake - A Java based Static site generator

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-

JBake Future Imperfect

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 -

  1. 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.

  2. 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.

  3. 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.

  4. 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!