My New Website (tools and kits)
After a long time of procastinating, I’ve finally been able to make time to create my own personal website. This website involves a relatively small tech stack and doesn’t cost a dime as it involves no hosting or backend. In this post, I will like to share what the website is built on with you.
Here is a link to the site on Github: Code. You can grab some codes and use it in yours. Also, feel free to raise an issue.
Gatsby is a static site generator (SSR) which is used to make blazing fast websites and it is based on React. Gatsby uses server-side rendering to create static websites. Build usually take a while, which is based on the number of pages and images. I chose Gatsby for this project because it:
- Has great image optimization
- East to setup
- Has a large ecosystem of developers
- Is blazing fast
Both the code and the post content are stored on github.
I used styled components for styling. Styled components allow for true reusable components, locally scoped classes and prevents clashing class names. I plan on writing more about styled components in future posts
Most developers love markdown. So combining the power of markdown (md) and react JSX for a blog is absolutely incredible. It allows you to embed any react components directly into your blog.
ImprovMX serves as my mail forwarder. It forwards mails from *@keyejohn.com to my personal email account. BTW, It’s free.
React-icons is a collection of different fonts from different: font-awesome, material design icons, etc. For this project, I used only font awesome though I hope to explore other ones in future.
This website is hosted on Netlify. I enabled continuous deployment, so that the code is automatically updated from Github
Overall, this stack is good. The major problem however is the long build time. This denies the opportunity to see changes to the site immediately. However, the introduction of Gatby’s incremental build has reduced this drastically.
This stack is in no way perfect. I however went with this because:
- It has great developer experience (DE)
- It is cheap (comes at no cost)
- It is very easy to maintain