I deal with my blog the same as I deal with iphone, I have to replace it every 4 years, first couple of years usually it is perfect, cutting edge technology and easy to maintain and very fast to create and deliver content, in the 3rd year you start feeling that it is not as great as it was, and in the 4th year you start complaining about it, hard to maintain, newer technologies are way better in performance and user (developer) experience, and at this moment I got convinced that it is time to change it.
My Old Website “Stack”
In my previous version of my website, I used to use what was common when I built it, Here is a list of what I used:
- JavaScript: this sounds obvious right? but I mention it explicitly as I unfortunately didn’t start that old version using TypeScript and didn’t spend the time to move it to TypeScript.
- Gatsby 🔗 as my framework (was even recommended by the react team), simply gatsby is impower your react app to build static website, easily and also provide very nice plugins that you can setup and use easily, I used a lot of them.
- Sass 🔗: yes funny as it seems, I used to love writing scss files and use all the benefits coming with it, including css variables, css nesting, mixins and more, but nowadays most of this is coming out of the box in css already or using a utility.
- Chakra-UI 🔗: I used it later after building most of the pages already using Sass, it comes with tons of a11y features and theming is easy.
- Markdown 🔗 only for blog posts but not for the pages (had to be html)
- Prismjs 🔗: to show and format code blocks.
- react-helmet 🔗: that helps with SEO and adding the og tags.
- font-awesome 🔗: for icons.
- JSON files 🔗: yes, I used json files in order to fill lists in my website including: talks, projects, and highlights, there was no clear other way to make lists.
- Hosting on Netlify 🔗, it was a great free option to host static websites, and I loved their UI as well, later switched to Vercel.
- There was a dark mode but no button, it works automatically based on user preference 🔗, using a gatsby plugin (gatsby-plugin-dark-mode 🔗)
My New Stack
Well as I mentioned in the into above, I started looking for the best way available out there to create a static website, and my choice was Astro.
In the new website, that you are reading this post from now, here is a screenshot since it might be changes by the time you are reading already 😄
I created this one just by the end of 2023, and here is the stack I used:
- Astro 🔗: I made quite good research about all the options out there to create a static website nowadays, as a matter of a fact they are a lot now, even big frameworks like Nextjs or Nuxtjs are giving the option to generate static sites or incremental rendering.
- TypeScript 🔗: indeed I cannot start any new application without having type safety, using the cli of astro I preferred using typescript
- Tailwind 🔗: at first I was against the idea of using something else than css, but tailwind was really fantastic option, I am not using any component libraries any more, I build all the components of this website myself using tailwind, was a great choice and highly recommended if you are not already using it now.
- react-icons 🔗: well, this lib comes with all types of icons that you might need from different vendors, check it out, I use it almost in every side project I create that needs icons.
- @vercel/og 🔗: This one is used in order to auto generate the beautiful og images that you could have seen shared with the link of this post on social media like X(Twitter), Facebook, or Linkedin, these images are called Open Graph (og) images and are used as the main images per link (I will talk further about that in my next post)
- applause-button 🔗: since I don’t have comments on my blog and I am not planning to have, I added one interactive button that you can find in all posts as the following example:
- Astro Integrations 🔗: well I used some plugins that were very helpful and easy to setup, I can write a different blog post for plugins I use, let me know on X(Twitter), the used plugins including:
- @astrojs/rss: to generate rss feed.
- @astrojs/mdx: to create interactive components in md files.
- @astrojs/tailwind: to have integration with tailwind.
- astro-social-share: to have the social share buttons in the sticky part or in the button.
- reading-time: to generate the average reading time in minutes based on words in blog posts.
- rehype-external-links: to add an external link icon beside each external link in blog posts.
- rehype-pretty-code: to enhance the way of styling coding blocks in posts, to highlight lines.
- Vercel 🔗: for hosting and auto deploy from the github repo directly.
Conclusion
I write these kind of posts to share with people what I use to build my pet projects, in this post I share what I use to build a static website (my blog).
I am planning to create some posts about specific parts of the website that I found interesting, please let me know if you are interested on X(Twitter) 🔗 when you share this post, I hope you got inspired by the stack I upgraded to, checkout the links and let me know what you are using or going to use and don’t forget to press the applause button if you like this post 😉
Tot ziens 👋