Matt Finucane

Design Portfolio Static

Portfolio site generated using Hugo.

About this project

This is the online portfolio for Anna Christoffer, an Art Director based in Berlin.

Work on this project started in April 2017 and is still ongoing. The source code for the project can be seen on Github.

The brief

Design and build a responsive website that is fast and easy to maintain. Given that this is a portfolio website, images and videos will feature heavily.

They should look clean and crisp but not impact on loading performance over slow networks.

It should also be easy to add content to the website and to have new changes pushed to a staging and production environment automatically.

Project planning

I opted to use GoHugo a static site generator for the following reasons:

Development environment

I started out this project by setting up a development environment using Docker Compose with three containers as follows:

Using Docker along with Docker Compose makes it easier to handle individual project dependencies. It does away with problems that may arise between different platforms.

For handling static assets such as CSS and Javascript, I created a gulp file that concatenates and minifies scripts and stylesheets.

I use SASS as the CSS preprocessor framework and the ES7 standard for Javascript.

To handle responsive images, I use the HTML5 <img> srcset attribute, which allows me to specify the correct images to load given the device screen constraints.

Deploying changes

For managing deployments, I use the CircleCI in combination with Git. Any changes pushed to the develop branch are deployed to a staging server, while releases tagged from the master branch are deployed to the live server.

The static assets for the site will be generated using gulp.js and then GoHugo will generate the rest of the content for the site, combining the content with the layout templates.

Using the Let’s Encrypt tool, we can generate free SSL/TLS certificates and serve content over HTTPS. Nginx is also configured to serve content using the HTTP/2 protocol, which brings about big benefits in terms of speed.

Benefits of this approach

By serving static content, we can do away with the need for databases and bootstrapping the project is much simpler.

The resources needed to serve this site will be minimal compared to a standard content managed site set up using another tool like Wordpress or Drupal.