·
2 min read
At the end of last year, I started working on my private portfolio website and researching how to build and deploy such static websites quickly.
The Tools
Hugo
I discovered Hugo, a viral open-source static site generator. It is speedy and flexible, and it is fun to build websites with this generator.
Just follow the official "Quick Start", and you will be running a beautiful static website locally on your machine in less than five minutes.
There are many themes available, which are often highly customizable.
The basic workflow looks this way:
- Serve your website locally using
hugo serve - Generate the static website content using
hugo - Publish the generated website content (see next chapter)
Netlify
Netlify provides a platform to automate code to create high-performant sites and web apps. Push your code and Netlify takes care of the rest.
Setting up Netlify is easy if your code is already on GitHub, GitLab or Bitbucket: Select your Git provider, define which build commands should be executed and in which folder the final content is located.
For more details, check the official "Getting Started" guide.
Netlify provides a free subscription model, which I am currently using. Additionally, there are many additional features which you have to pay for. Check the official Pricing page for more details.
My Setup
I started using a simple static website which I hosted manually on a web server without using a service like Netlify. The custom domain I used is www.mokkapps.de.
Some month ago, I decided to start my tech blog about software development topics, and I wanted to continue using Hugo. Therefore I had to choose another Hugo theme as the current theme was not capable of content management which is necessary for a blog.
After a short research, I found KISS, which had the style and the functionality I was looking for. Blog posts are written in Markdown, which I like for writing articles and other text-based stuff.
I wanted the blog to be accessible via www.mokkapps.de/blog, so I had to generate the blog page using Hugo and drop it on the web server in a blog folder. This was a manual process that I wanted to automate.
Luckily, platforms like Netlify can help at automating such tasks. I have integrated both websites in Netlify but still had to made the connection from one Hugo website to another.
Netlify provides Redirects for such cases. So I added a static _redirects file to my main page, and now it correctly links to the second page hosted on Netlify:
/blog/* https://mokkapps-blog.netlify.com/:splat 200
Now all I have to do is to write my blog posts or make any other changes on my websites and push them to my Git provider. Netlify then automatically builds and deploys the pages.
Conclusion
It's fun to build and deploy websites using services like Hugo and Netlify. I highly recommend looking at them, and maybe you can need them for your current or future projects.
Links
My First NPM Package: github-traffic-cli
Since I published my first projects on GitHub I've enjoyed viewing the traffic on my repositories. It is exciting to see how many people visit or clone my repositories.
Lessons Learned: My First Smartphone Game
In 2017, I have released my first smartphone game "Supermarket Challenge" for iOS and Android. I learned a lot during the game development and wanted to share my experiences with you.
