diff --git a/content/blog/back_to_hugo.md b/content/blog/back_to_hugo.md new file mode 100644 index 0000000..f19606f --- /dev/null +++ b/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. + + + +## 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.