As mentioned on the homepage, my hobbies change frequently, and I always enjoy learning something new. I have actually thought about creating a blog-like website to document my projects for years, but didn’t do it because I didn’t want to spend money on it. Besides that, I was, and still am, worried that it will hold me back; that I don’t want to start a new project because I don’t want to spend a lot of time documenting it for a website no-one will ever read.
In the end I decided that, to heck with it, it won’t hold me back, and I’ll document however much or however little I want. If the website becomes stale, so be it, I’ll have fun with it as long as it lasts. So, that is my promise to you, dear (and probably only) visitor: absolutely nothing 😃
Now to the main point: how it was made. The following should propably be reordered to workflow, but this order explains my decision-making process.
Hosting: Microsoft Azure
I was taking the course AZ-104: Microsoft Azure Administrator, when I learned that you can create free static web apps in Azure for hobbies and personal projects. Microsoft even made an easy to follow guide to create a Hugo site from a GitHub repository.
Note: You can create an Azure account for free, and at the time of writing you get $200 credit that you can spend the first 30 days to try out all the Azure services. Some services are free (static web apps for hobbyist for instance), but I would still suggest to create a budget in the Azure portal, which allows you to configure budget alerts. Just in case.
Static site generator: Hugo
A static web app is a website containing content that doesn’t change and is handled client-side (HTML, CSS, Javacript etc.), where a dynamic website run some code (PHP, ASP etc.) on a server and maybe even make requests to other backend servers (a database for instance).
This idea of static sites resonates with me; it’s easy to grasp, enough for my needs, and it brings me back to my first experinces with web development in primary school, where I had a friend who was proficient with HTML at like 9 years old and would teach me the very basics.
But, it also means that I would need to code the top menu on all pages, and keep it updated on all of them as well. In comes the Static Site Generators. Next.js is the highest rated, but as I understand it’s more of a framework than a full-fledged solution to my problem. Of the time of writing Hugo is the second highest rated, and it seemed easy enough to get into after watching a few episodes of this YouTube Playlist.
Templates and shortcode
The way it works, basically, is that templates are created, they sort of work as frames to the content. Shortcodes can be made for repeating tasks, and I think of these as methods or functions. I’ve made shortcodes to add images, links, and a YouTube player with subtitles enabled by default. Both can include Go Templates code and HTML.
Content
Content is added in markdown files. Markdown allows easy formatting of documents on the internet, including list, tables and headings.
Note: Hugo uses Goldmark to convert markdown to HTML, which does not render raw HTML by dafault. One way to get around this is by adding necessary HTML to shortcodes, and calling the shortcode in the markdown file.
Build
When Hugo builds the website, it wraps the content in the templates and creates an HTML file for each page.
Code repository: GitHub
GitHub is used for versioning of code. It is owned by Microsoft, and that’s why it’s so well integrated with Azure Static Web Apps. A repository is created and edited on the local computer and then comitted to the cloud when you choose to.
When creating an Azure Static Web App a GitHub Action is created. In the repository, in .github/workflows, a YAML file is created. That file describes a workflow where everytime there’s a commit, the public website files are build and deployed to Azure.
Integrated development environment (IDE): Visual Studio Code
I use Visual Studio Code as my editor because there are plugins for all the coding languages I can think of, easy commits to GitHub, and settings can be synchronized to my Microsoft or GitHub account, which means that I can switch computers pretty much in the blink of an eye.
Front-end framework: Bootstrap
Now, design is probably what I’m worst at, but I still had a very specific idea about what the website should look like. It felt overwhelming to learn CSS, which is used for styling websites, and then write all the code. So, I started to look for an easier way to handle this, and Bootstrap looked like that.
Bootstrap is basically a bunch of CSS classes, made by people who know design, that can be used to style the HTML. It’s made with the approach of mobile first where the idea is that most web browsing nowadays happens on a smartphone, so we design the website for a small screen, but it scales up nicely.
I used this guide to make it work with Hugo.
To customize things like fonts and colors, I needed to learn a little bit of Sass as well. And I got to say Sass is pretty great, it adds math, variables and conditionals, amongst other things, that I’ve been missing from CSS.
Note: I just learned that some of the benefits of Sass, the stuff I’ve been missing, is actually possible in native CSS.
Note: Hugo uses a library called LibSass to transpile Sass to CSS by dafault, but that library is depricated.
Public DNS: Azure DNS
Another thing that I found to be really cool about Azure Static Web Apps’ free tier is the possibility to add up to two custom domains, meaning that you don’t have to access this site with the randomly generated URL https://gray-tree-052966a03.3.azurestaticapps.net, and you get a free SSL/TLS certificates added to the site, so that it can be accesses without the “Your connection to this site is not secure” warning.
Note: Should more than two domains be needed it is possible to create one web app and configure it to route/redirect to another, but I don’t know what Microsoft thinks about this approach.
There are some free DNS services out there and you can make them work with Azure Static Web Apps but it was just so much easier with Azure DNS. Azure DNS is not free but I only have two domain names, and I think it’s going to be a while before there’s more than a million monthly queries, so at the time of writing this adds up to $1.40 per month.
Conclusion
So, that’s it - that’s how to create a website, and I’m basically a front-end web devoloper now. That’s obviously a joke as it’s still quite the struggle. Especially on the design side I need to fix some things, for example: remove images from lists, style lists of content and make sure the border thickness of the top menu stay the same on small screens. I would also like to add at least one page of content for each of the categories I chose for this site.
I’m quite proud that I was able to make the design in my head a reality, and I’m happy that I finally got aroung to actually making the website I thought about so many time.
But, I’m definately still learning and having fun. And maybe it will even come in handy at some point in my professional life as well. We’ll see.