< Posts
Tags: [Web]
Posted by Ronald
30-06-2016

A fresh new website

As I am about to resume my freelance activities, it was time to put some effort into this website again. The old one was not responsive and did not really work well on mobile, which is odd for a mobile software developer :-). So here it is, a fresh new website!

Blog

One of the key additions to the website (apart from the redesign) is a blog, of which you are now reading the first post. My plan is to start sharing knowledge about the technology I am working on now and in the future. The main focus will be on Android development, Augmented and Virtual Reality, 3D graphics and emerging technology.

After deciding I wanted a blog, the next step was to choose what technology to use. My old website was very simple and used some custom php template system which was not suitable for a blog. The more dynamic blog systems like WordPress were also not an option as I did not want to deal PHP and MySQL anymore. In my search for a solution, I found several open source projects that focus on static site generation. These allow you to write your content in simple text formats like Markdown, while generating a fully functional static website from a template. This sounded like a perfect solution for me.

Jekyll or Hugo

The first project I tried was Jekyll as it was listed as the most popular project. Installation was fairly easy and after a simple command I could play around with a default site to see what it was all about. It looks quite useable, until I started trying out the syntax highlighting for code snippets. There was no support for the language I am planning to blog about quite a bit, Kotlin. I tried to have a look if I could add my own sytax definition, but as I don’t have experience with Ruby (which is used in Jekyll), I felt it would be too much effort.

A quick Google search led me to Hugo. This project has similar goals, but faster and implemented in Go. There is no installation needed, it is sufficient to just put a single executable on your PATH, which makes it very nice to use on a minimal web server. The documentation is very nice and after some initial tests (including Kotlin syntax highlighting) I chose to build this website with it.

Theme design

Hugo does not come with a default theme, but there is a big collection of open source themes available at https://themes.gohugo.io. As my focus is primarily on Android development, I wanted a theme that uses some design elements from Material Design. There are several themes on-line, but none of them matched the look and feel and funcationality I wanted to achieve. So I decided to make my own.

Making a theme for Hugo is relatively easy and well documented. For Material Design, I use the great open source library Material Design Lite. This library provides all the components and layouts needed. Also, there are various templates available, and I used the stand-alone article as the basis, but added a menu (topbar on desktop, sliding drawer on mobile) and some other customizations.

While this site currently is still quite basic, I think it is a nice new foundation for future improvements.