So, it took me almost two months to redesign my website. Therefore I would like to mention first that there is a lot of scope for improvements in both the visual and engineering side of this site which I am documenting. Are you using dark mode and light mode? Which Blog was your favorite? Well, this blog is not about all those features or content on this site, it's about how built it and what my future goals and strategies are for making improvements and producing greater good from this site. Let's look at some overviews of this site to deep dive in.
Stats Overview:
Lines of code this site eats :). Current Cloc stats.
npx cloc ./pages ./styles ./public ./constants ./lib ./components
npx: installed 1 in 1.385s
27 text files.
27 unique files.
6 files were ignored.
github.com/AlDanial/cloc v 1.92 T=0.04 s (634.8 files/s, 21372.2 lines/s)
-------------------------------------------------------------------------------
Language files blank comment code
-------------------------------------------------------------------------------
TypeScript 24 104 9 674
CSS 2 16 8 94
SVG 1 0 0 4
-------------------------------------------------------------------------------
SUM: 27 120 17 772
-------------------------------------------------------------------------------
At the time of this blog (January 22), the total lines of code are 772.
Technology Stack Overview:
Next JS: For server-side rendering and static web applications using React JS.
TypeScript: Typed JavaScript (necessary for any project you plan to maintain).
Jest: Unit/Component testing framework.
Tailwind CSS: Utility classes for consistent/maintainable styling.
Framer Motion: Great React Animation library
React markdown: React markdown is a React component that converts Markdown text into the corresponding HTML code.
Sharp: The typical use case for this high-speed Node.js module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, and AVIF images of varying dimensions.
Daisy UI: Clean and beautifully build Tailwind CSS components library.
PostCss: CSS processor (pretty much just use it for Autoprefixer and tailwind).
Vercel: A great web hosting tool for deploying web applications instantly, scaling automatically, and serving personalized content around the globe.
Architectural Overview:
The main architectural decisions of this site were made keeping in mind.
- Faster And Better Performant App.
- Content Management For Mainly My Blogs and Portfolio.
So, Let's discuss them.
Faster And Better Performant App:
One word Next JS. But obviously, it's not all I have used the awesomeness of both Server-side rendering (SSR) and Incremented Static Generation (ISR) to achieve the goal of a faster and better-performant web application. Pages on my app like any specific blog page are rendered through Server Side rendering, so with that, I am able to create static pages at build time and not wait for the blog page to load when requested. The second approach I use for page rendering is Incremental static regeneration (ISR). I use ISR mainly on those pages which are supposed to be updated or are dynamic in nature like the page that displays the list of blogs. It makes sense because whenever I upload a new blog my website will show you a cached version for a window of 100 seconds after which it will fetch the data again. All that and SSR with the power of Next JS.
Content Management Mainly For My Blogs and Portfolio:
This part was interesting I went through a lot of CMS systems out there and they are good, one example is Strapi, and how it allows sites to manage content is awesome but I am using any third-party CMS to manage my content. So how am I uploading and managing my blogs? Before creating this site I used to write and maintain my blogs on the Hashnode platform a great blogging site and this site utilizes the Hashnode APIs to fetch and write my blogs. So it can fetch a new blog from Hashnode whenever there is a new one. What's currently in progress for the future release of this site is a complete server and database for managing content and providing a user-friendly environment so that users can log in and save and bookmark their favorite blogs and projects so later this site can recommend them blogs of their interest. I might sound like I am against the CMS systems but trust me that's not true CMS is great and very useful it's just that what I am trying to achieve in terms of architecture and features for this site would not be possible with third party CMS.
So, that's mainly how I have built this site and what my future goals are related to it. If you enjoyed reading this I am there for you on Hashnode.