Add back to hugo post

content/blog/back_to_hugo.md

@@ -0,0 +1,47 @@
+---
+title: "Back to Hugo"
+date: "2023-08-13"
+tags:
+    - gatsby
+    - hugo
+---
+
+Over the years, this website was running on WordPress, Hugo, a custom React SPA, server-side rendered React, Gatsby, and now I'm back to Hugo.
+
+<!--more-->
+
+## First Hugo Website
+
+I created my first Hugo website in 2016 while still in University studying Computer Science. I started looking for internships and thought that having a personal website would enhance my appeal. I created the [Nix theme](https://github.com/LordMathis/hugo-theme-nix), a minimalistic theme inspired by Unix and the terminal. Looking back at the code, it's actually not that bad considering I had zero experience with web development. But I think it speaks more about the simplicity of Hugo and Bootstrap rather than my skills.
+
+If I were to rewrite this theme from scratch, I would implement many things differently. However, many people use the theme, so I continue to maintain it.
+
+## Here Comes React
+
+Hugo was working perfectly fine for my needs, but for some reason, I wanted something more. Since I was already learning React and Node.js, I decided to build my website using React. Initially, I started building the website as a standard React app. I created all the components that I thought I might need, and the website quickly grew.
+
+Then I learned about universal (isomorphic) rendering and decided to give it a try. This part of development took me the longest. My challenge with implementing universal rendering was a distinct lack of up-to-date tutorials. They all used outdated versions of Webpack or React Router, or didn't utilize React Router at all. Another issue was that some tutorials were using babel-node in production, which is not recommended.
+
+After finally implementing universal rendering, the next issue to solve was how to deliver content. A simpler approach would be to create a new React component for each blog post and "hard code" the content. However, that's not very React-like. Instead, I implemented a simple API in Express.
+
+There are many more aspects that I didn't mention, things I spent hours working on, only to change my mind after implementation. An honorable mention goes to the CSS and the overall style of the website, which underwent several changes. I also reinvented the wheel multiple times, opting to build features from scratch rather than using existing modules.
+
+So now, I had a new website that was much more complex but had fewer features than my initial Hugo website.
+
+## The Great Gatsby
+
+My React-based website wasn't fully server-side rendered. The only server-rendered element was the page layout, while the content was served via an API and rendered on the client side. Thus, I found myself running a Node.js app at all times for a relatively simple website with minimal visitors and content. Instead of embarking on creating my own server-side renderer, I got sidetracked by a captivating newcomer: Gatsby.
+
+Migrating to Gatsby wasn't overly challenging since I already had all my styles and components ready. I just needed to grasp how to write GraphQL queries to fetch content and assemble a set of Gatsby plugins for website building. The initial implementation of the Gatsby website was enjoyable, but ongoing maintenance proved to be a hassle.
+
+## Move Fast and Break Things
+
+The JavaScript landscape evolves at breakneck speed. Libraries that emerged yesterday risk deprecation tomorrow. Not to mention the ceaseless discovery of vulnerabilities every day. To mitigate this, I established dependabot security alerts for my website's GitHub repository. At one point, dependabot became the primary contributor.
+
+While the detected vulnerabilities didn't directly threaten my server, as the website generated static HTML files and was served by nginx, a chain of vulnerabilities encompassing Gatsby, nginx, and Docker would be necessary for a genuine threat. Nevertheless, uncertainty lingered.
+
+In the end, I opted to return to Hugo. You can still explore the archived React/Gatsby source code [here](https://git.namesny.com/Mathis/namesny-com-gatsby-archive).
+
+## Full Circle
+
+Instead of revisiting my old Nix theme, I chose to create a new theme: [Nightfall](https://github.com/LordMathis/hugo-theme-nightfall), based on the layout of my Gatsby website. Migrating to Hugo was relatively straightforward, thanks to React components. I only needed to replace JSX tags with appropriate HTML tags and integrate Hugo partials. I welcome all contributions to both the Nix and Nightfall themes.