I’ve been told my greatest strength is my ability to research and dive into new technologies. I am very passionate about researching the latest tech and figuring out what works best for me. However, this passion for learning new tech can be a double edge sword, as I find it very hard to make decisions and go down a single direction. I think the reason for this is that I can see good in most frameworks or tools I learn. No framework is perfect, and there are pros and cons with each one I’ve looked into. As you can imagine, it was really hard for me to decide what frameworks, tools, providers to use for building my personal website.
Below outlines some of the major decisions I’ve made for building this site and I try to explain my reasoning behind it.
There are a few foundational metrics that I assessed to help me make my decision.
- Price - I want this to be free, or nearly free.
- Performance - I want this to be “BLAZINGLY FAST”. I want to avoid bloat and make my site globally accessible so I can reach the most users.
- Developer Friendliness - I want a site that I can easily enhance with new features which will allow me to have the flexibility I need to do some advanced front end development.
Architecture: JAMStack vs Monolith
This first one was a no brainer for me (I know, I know, I just said I have problems making decisions). I followed the JamStack Architecture. I’ve been building JAMStack applications for years now and have seen the benefits both in website performance, and developer experience. The overall architecture pattern of decoupling your stack is ideal for me.
Decision: JAMStack
CMS: Markdown and MDX vs CMS Platform
Okay, this one was a bit more difficult. Some CMS platforms I considered were: Ghost, Contentful, and Sanity. You may be wondering, where is WordPress? I’ve explored WordPress in the past and just never found it to give me the benefits I was looking for.
When considering a CMS platform you have to assess price, authoring experience, publishing experience, and code friendliness. In regards to pricing, nearly all CMS platforms eventually will require some type of costs down the road.
Both Ghost, Contentful, and Sanity have great authoring experiences however, as Josh Comeau points out in his blog there is an extreme benefit for using Markdown and MDX. With MDX you can embed react components in your content and have some really powerful interactive pages. I plan on taking full advantage of that in the future.
The markdown/MDX authoring experience is a process I’m familiar with. I have two methods I use when writing content in Markdown.
- Notion - you can write pages in Notion and then export to markdown very easily. From there, just move the images and markdown file in the appropriate place in your source code. This also gives me the ability to write content without having to run a local web server or go to a website.
- VSCode - If I’m on my developer laptop and the source code pulled down I sometimes just write my pages in source code with VSCode.
With all that in mind I decided to go with Markdown and MDX. One concern I have is as I create more content, how manageable will my content structure be? Will having 100s to 1000s of markdown files be annoying? I think so, but for now it feels like the right decision. That’s a future-me problem.
Decision: Markdown and MDX
Framework: Astro vs Next.js vs Remix
This was by far the hardest decision. There is a lot of buzz right now around a few different JavaScript frameworks. I’ve been using React professionally for years now and spearheaded the use of Next.js as the framework of choice when building public facing web applications that require having good SEO. I love how progressive and forward thinking Next.js has been. It is a well established proven full stack React framework that has been used by Hulu, Nike, TikTok and other big brands.
Although Next.js is normally my top choice, I realize that I’m not building a web application but rather a content driven website. I don’t think I’m going to need all the features that Next.js has to offer and it seems a bit overkill. One recent criticism that Astro and Remix make about Next.js is that the amount JavaScript that loads on the page is unnecessary and impacts performance. I plan on using very little JavaScript at the start. So with that in mind I decided to explore Remix and Astro. Some insights I had with Remix, is that it just feels nice. It is hard to explain but it just feels like a familiar framework. There is some nice magic that makes Remix feel easy. I particularly like the opinion of betting fully on Server Side Rendering (SSR). With the progress of Cloud Edge Computing this framework is setup to be really successful in the near future. The main deterrent for using Remix at this time is confidence in the performance of framework. I found a YouTube video where Astro compares performance of Remix vs Astro and Astro came out on top. I also wasn’t convinced of Remix’s performance based on running some chrome lighthouse test on their main site.
So in comes Astro claiming they are the best for content-driven websites that provide “blazingly fast performance”. They do this by rendering HTML on the server and strip away any unused JavaScript by introducing a new concept called Astro Island. This is a new paradigm shift in frontend web architecture, similar to Deno’s Fresh Framework. Astro is also a framework-agnostic platform that lets you choose between: React, Preact, Vue, Svelt, and other component frameworks that you can incorporate into your app. You also gain access to an ecosystem of 100+ integrations and themes. So I decided to go with Astro.
After working with Astro to build out this site one might ask, “would you recommend it now that you’ve had some experience using it?”. My answer → yes, if you are looking for something with the features above. I do miss the robustness of Next.js and would consider switching to Next.js if I wanted to add more flexibility or complexity to my site in the future. We’ll see.
Honorable Mentions:
- Deno Fresh: This is currently a bit too new for my taste. It was also mentioned in a recent episode of JSParty. Creator of Fresh explains how the initial intent of Fresh was to first be an example of what you can do with Deno and not a full framework. Right now it just feels too immature to bank on.
- Hugo: I was really interested in Hugo which uses Go programming language. This framework also claims it is “blazingly fast”. I’ve been a fan of the Go programming language for a while, but there wasn’t enough to win me over to use it for this site. It was also very unfamiliar to me and I wanted something I was more used to.
Decision: Astro
CSS: Tailwind vs Sass vs CSS-In-JS
I’ve used Sass and CSS-In-JS in the past. My tendency is to use Sass with CSS Modules in my React application as that is what I am most accustomed to. For this site I wanted to explore using Tailwind. My general opinion after using it is positive. I don’t have to think about how to implement theming as this is setup by default with tailwind.config.js . I really like how you can override settings within tailwind and all classes using the settings update accordingly. Yes, you can do this with Sass, but I like how opinionated tailwind is regarding this. A common criticism is that html feels bloated with Tailwind classes. I personally didn’t mind it and got used to it pretty quickly.
Decision: Tailwind
Hosting: Vercel vs Netlify vs Deno
I spend most of my professional time using Azure, Google Cloud Platform, or AWS, and there often is a lot of work involved when it comes to hosting in these cloud providers. There is a certain beauty about the ease of use with the “newer” cloud providers such as Vercel, Netlify, and Deno. They remove a lot of the hosting complexity by connecting directly to your GitHub repository and managing all deployment and hosting for you. You will also benefit from their global edge network that will provide an excellent experience to your global user base.
With that in mind I lean toward Vercel, as they are well established and are the native Next.js platform. They are trusted by some of the largest companies like Meta, Uber, HashiCorp, and Washington Post. They are constantly evolving and a leader in this space.
Decision: Vercel
Conclusion
As you know there are a ton of decisions to make when it comes to web development and it can be very time consuming determining what the right decisions are. After hours of research I’m pretty happy with the decisions I’ve made, but as time goes on I will undoubtably adjust my stack based on what benefits me the most at that time. Don’t be afraid to test new things out, form your own decisions, and learn from it.
Hope this helps!
Thanks for reading!
Jonathan