How I built my site using Next.js, tailwindcss

Recently, I created site for sharing and storing daily learnings which are not suitable for blog but can be a snippet.

Website is hosted at til.varunyadav.com. You can find source code at github.

There are so many things which I see everyday and might not take note of it or I keep it at a place which is lost after certain time. That's why I created this site which is implementing the concept of #LearningInPublic.

Tech Stack

I chose Nextjs, Tailwindcss and mdx for creating website and Github for hosting website and content.

My experience with Nextjs and tailwind

This is first time I used Nextjs and it turned out to to be straight forward as I had some experience with React in past. Also the documentation is really good with nice tutorial on getting started.

It is very easy and simple process of having blog up and running. Real effort comes in when trying to style the blog page and implement features.

Tailwind

Tailwindcss  does really good job for styling which saved lot of time. I will say if you haven't tried it yet do so.

Setting up dark mode is straight forward and with amazing documentation to navigate.

MDX

For mdx files, to make it look better I am using packages like prismjs for syntax highlight, remark-toc to create table of contents if the post is too long, reading time at top of post so user knows how long the post is.

Features like using webmentions for displaying shares, mentions on twitter and twitter card for displaying post in blog post were challenging to implement but really cool to understand.

Github

I chose github for hosting site because it is easy to use and I am very familiar with the flow. It took less than minute to host with custom domain and using GitHub actions so that it push changes every time there is commit on main branch.

Also, there are lot of developers out there who are using nextjs and have source code in GitHub that helps out a lot when trying to implement new features and see how others implemented.

Biggest inspiration was Lee rob's site which has almost all the features one would want for their blog site and I used few features from his github.

Lighthouse score?

I am happy with this report. Best practice 100 is really good, hopefully will be able to keep this while adding new features 😅.

With SEO I am getting report of links are not crawlable, but I have sitemap and google search configured. Need to deep dive on what can be the cause.

Let me know what you think of new subdomain and you can reach me out if you have any feedback or suggestions.

Show Comments