New Website and Redesign: Improving Developer Experience and Content Creation

A few days ago, I had a brilliant idea of migrating my website, flaviocopes.com, from Hugo to Astro. In just one day, I successfully accomplished the transition with a fresh new theme design. In this blog post, I will share the entire process and decision-making behind this change, as it may prove useful to you.

For those unfamiliar with Astro, it is a fantastic site-building tool that I have been using for many of my latest website projects. Despite my desire to make this move for months, I continually put it off due to other pressing priorities. As a developer, the most important metric for me is DX, or developer experience. I strive to work with efficient tools that enhance my productivity.

Astro excels in this regard. It allows me to build websites using UI components created with its JSX-like syntax or even React components. These components can be either frontend rendered or server rendered at build time. Additionally, I can leverage other frontend frameworks if desired.

To explore Astro’s capabilities further, I utilized its server rendering feature to create a unique solution. Although I enjoy tweaking my pages in VS Code, at times it becomes tedious and discourages me from writing new posts. While a content management system (CMS) may be a viable alternative, I prefer to build my own solution that perfectly suits my needs.

As a heavy Notion user, I am enamored with its authoring experience. In fact, I have used Notion to create all of the courses I have developed over the past two years, including Bootcamp. In my opinion, no other tool compares to Notion. Therefore, I wanted to experiment with using Notion to power my blog as well.

However, given the extensive content library of over 1700 tutorials on my blog, it would be highly inefficient to rely on the Notion API for every build. The sheer volume of content would result in excessive build times and potential rate limiting issues. Hence, I devised a hybrid solution.

Now, I write new posts in Notion and run a simple command on my computer to fetch and transform them into markdown files for my website. This approach offers the best of both worlds: fast and intuitive authoring experience coupled with quick build times.

Comparing build times, Hugo completes the process in 1 minute and 10 seconds, while Astro takes approximately 2 minutes and 43 seconds. Considering the staggering amount of blog posts, the slightly longer build time with Astro is more than acceptable. In fact, it is considerably faster than some of the build times I have heard of.

Moreover, Astro’s JavaScript foundation provides unparalleled flexibility. I did not stop at merely migrating to Astro and using Notion for content creation. I also wanted to build an entire site from a Notion page. This involved using one Notion page as the homepage and leveraging sub-pages on Notion as individual site pages. I even incorporated optional coding with Astro for the homepage, creating a seamless integration of code and content. Truly, the best of both worlds.

Now, whenever I desire to add a new page to my site, I no longer need to open my computer, launch VS Code, navigate to src/pages, and create a new file. Instead, I simply create a Notion page, even while on the go with my smartphone on a train, type the content, and trigger a new site build with a single button press.

During this major rewrite of the underlying platform, I also migrated from a custom Hugo theme that had accumulated years of dust and numerous tweaks. To start with a clean slate, I added Tailwind CSS, something I had wanted to incorporate for a long time but had hesitated due to the extensive custom CSS codebase. Implementing a minimalist UI approach, I removed the sidebar and unnecessary elements that had accumulated over time. I now have a single page displaying all my posts, resulting in an improved search experience without the need for pagination. Consequently, I was able to remove Algolia and reduce the overall codebase. Furthermore, I implemented a visually appealing way to display tags.

Feel free to explore my redesigned website at flaviocopes.com. I have also included a dark mode feature for those wishing to protect their eyes during nighttime browsing. Dark mode can be activated through your operating system settings.

Enjoy the improved user experience and focused content on my website!

tags: [“website redesign”, “Astro”, “developer experience”, “content creation”, “Hugo”, “Tailwind CSS”, “Notion”, “site-building tool”]