Project Outline 🔗
Choosing a Web Tool 🔗
The majority of the internet is build with wordpress, but I never managed to be happy with what it offers and how it works. I have looked at different Content managed Systems and always came to the same conclusion: Its a compromise between design and content. I need to make content that works well with the design of a template, but its hard to adapt the template to personal needs.
Therefore I have decided to step away from content management systems and looked at static site generators. The biggest advantage of static site generators is the simplicity of the end result. Without any dynamic components, the website can run reliably fast without needing to deal with caching and other problems while still having the benefits of templates.
Hugo is also known to be the fastest static site generator.
Working with Hugo 🔗
Getting into Hugo is like being confronted with the “What came before? The chicken or the egg?” Problem. One doesn’t make sense without the other. In this case it means, it is best to work with a pre exisiting template instead of creating one from scratch. At least without prior experience. I am working with the Mini Theme by nodejh. The Mini theme provides a simple but elegant design.
The core idea of the workflow is to create a theme that defines the structure and style of the website and create the actual content in markdown. To further customize, elements of the Theme can be overwritten or can be extented with shortcodes, partials, and Hugo programming.
Markdown 🔗
Markdown is a lightweight markup language that allows the user to easily format text into headings, lists and more in a plain text editor. For example will “# Text” turn Text after the # into a heading.
Shortcodes 🔗
A shortcode is a template invoked within markup, accepting any number of arguments. They can be used with any content format to insert elements such as videos, images, and social media embeds into your content. For example are the image galleries implemented with a shortcode by liwenyip
Hugo Programming Example 🔗
Hugo offers a variety of functions to oragnize and program aspects of the website. Here is an example:
Programming is done inside of two curly brackets.
- “.Site.RegularPages” allows me to loop through the data of all pages. The data is stored in a variable called “pages”. $ indicates variables.
- “.Paginate” limits the amount of Pages, to not generated a list that is too long.
- “range” allows me to loop thrugh the individual pages and access and use the indiviual information. This needs to be closed with an {{ end }}.
- The Link to the Page, the publish date, title and summary are stored temporarly in variables.
- “{{ range first 1 (.Resources.ByType “image”) }}” allows me to access the first image found in the same folder of the current loops page.
- The images url is stored in a variable.
- The image is displayed in the background through regular HTML and CSS using the stored link.
- The title and date are also displayed through regular HTML. The date can be formatted to show different information, in this case month, day and year.
The final result with added CSS stylization:
Design Philosophy 🔗
The highest priority of all design decisions is “content first”. While the webiste should be pleasent to look at and easy to browse, it is important to realize that I am not a webdesigner and that I dont want to present myself as one. The endgoal is to present my works to somehow that is considering to offer me a job, aswell as documenting my work for my own sake.
The homepage is designed to be more visually captivating, while concentrating the most important information. The archive and every project page on the other hand is in depth.