How I Built This Blog From Scratch

purple desktop on a purple background

Experienced bloggers often tell beginners to not spend hours on their blog design. And for good reasons: Content is more important.

Yet, as a designer, I struggled with this. I dislike templates, and I want full control over my site. I want to know every single detail of it.

The margin, max-width, hover state, grid system, typography. Everything.

So, after long hours of grinding, I have created a blog design that, for now, I’m satisfied with. It’s not perfect, but I’m improving it.

In this post, I want to share how I built this blog, what tools I use to pull it together, and the problems I had to solve to get everything working.


This site is not some development masterpiece. Compared to Brian Lovin’s website, the development of this blog is nowhere near that.

I simply want to document the blog’s current version.

First Version

my original blog

This was the first version of my blog.

As you can tell, I used a template. And yes, it did look clean and minimalistic. But, I didn’t like it. It lacked a personality, so I decided to revamp the site.


design iterations on figma

I delved into Figma to experiment with different blog designs. In the end, I settled on a few design principles and elements.

Clean & Functional

I wanted the site to be modern with a techie touch. Hence the font Sora and the white background.

Specific UI Components

There’s something beautiful about filled buttons as hover state and Notion tags. I wanted to add those to my blog.

Cohesive Visuals

If I were to use image thumbnails, I need to make sure they all look cohesive and nice together.


I used Webflow to create the blog. It’s my go-to development tool as a designer. It gives me full design customization and a powerful CMS system to organize my blog posts and categories.

I will share the specifics of each page on this blog.

Home Page

Home page

At this point, I can’t count how many iterations I’ve made on Webflow. But the biggest design change I made was on the home page.

At first, I designed a home page that displays the “text” of each blog post: Title, publish date, categories, and a description.

text only version of blog home
Original home page

But, after discovering Hashnode’s Web3 blog,, and Peter Tarka’s work, I decided to change the home page by:

Adding image thumbnail

A good visual can be a game-changer. It increases the odds of a visitor clicking on a post. I intend to use single block color as the background and a 3D element on top for cohesiveness.

Setting up a grid system to structure all posts

I structured the blog posts using a two-column grid system instead of three to make it easy on the eye.

Deleting blog description

I figured that a good title should be enough to grab a visitor’s attention. Also adding a description means the visitor will have to scroll more to see the next posts.

In the end, I’m satisfied with the design changes as it makes the site more lively. Here are some specific design elements:

Content with a 80% width (desktop)

I set the width to 80% to have two posts in one row.

Inline tags

I set the tag’s padding to 4px 12px to create a Notion-like tag. Each will link to its category page.

Grid footer

I changed the footer on the home page to two columns because the container’s wide length makes the text hard to read.

Typed text effect

I followed this tutorial on how to create this effect.

About Page

about page

This was the least changed page on the site. Here are some design elements:

Content with a 55% width (desktop)

I went with 55% for all the other pages to improve readability. According to research, the optimal line length is considered to be 50-60 characters per line. So I aimed for that.

Highlighting effect

This is my default highlight styling for all links. I bolded and underlined the text to provide enough contrast.

Category Page

category page

I wanted to create a space for visitors to see all the categories. I stored the categories in a CMS database. I can be select them when writing a blog post.

category cms

Individual Category Page

individual category page

This is a CMS Collection page that displays all posts with a specific tag. This helps the visitor easily find articles they’re interested in.

Links Page

favorite link page

I found this on David Perell’s blog and love the idea. It’s a great way to share and organize what I consume online.

Individual Blog Post

Individual blog post

I store all my blog posts in a CMS database.

blog post cms

Here are some other design elements:

Rich Text Field

I use this to display my article content. A hidden style guide page sets the style for the rich text field. For instance, I changed the H4 styling to the “Read Next” header you see below.

Sidebar navigation

I followed this post on Webflow's forum to create the fixed sidebar nav.

Read Next

Located at the bottom of the article, “Read Next” shows three relevant articles. Any of the three articles will have the same category as the current blog post.


I embedded a ShareThis button into my blog post.



This was a hard choice as I was debating between Mailchimp, Substack, and MailerLite.

In the end, I went with Substack for a few reasons:


This was the main reason. Substack is completely free regardless of the number of subscribers. If you add paid subscriptions, it’ll charge 10% on top of a credit card fee charged by Stripe. But that’s acceptable compared to Mailchimp and MailerLite’s pricing plan.


I’ve always been a fan of Substack’s innate newsletter style, so this was a no-brainer.

Welcome email

Though Mailchimp’s free plan allows users to have up to 2,000 contacts, I can’t automate welcome emails. In Substack, this is simple. Check a checkbox, edit the welcome email, and Substack will send it for you automatically.

Integration with Webflow

MailerLite currently does not have an integration system with Webflow. And both Substack and Mailchimp have one.


I use Google Analytics to track my blog’s performance. I’m new to GA so will need some time to get used to it.

google analytics


Webflow Hosting - $19/yr - I’m on the CMS plan. And because I’m a college student, I applied for the student discount and got a 90% discount (192/yr to 19/year). Huge steal.

Domain - $18.54/yr - For I paid $8.99 for the .com register and 8.99 more for domain privacy + protection. With sales tax, it adds up to $18.54.

Total: $37.54/yr.

This is the first time I put these numbers together. Honestly, I’m very happy with this cost. The Webflow student discount helped out a lot.

What’s next

Here are a few things I’d like to work on next:

Improve sidebar navigation

For some reason, the sidebar nav in an individual blog post doesn’t always work well. Might have to look into it in the future.

Create my 3D assets

I’ll only do this when I have lots of time. But it’ll be nice to create my 3D assets to use for post thumbnails.

To be honest, I’ve poured a considerable amount of time into the blog design. So, as I complete the designs soon, I’ll start pushing out content consistently on this blog and Substack. Also, I will start distribution to gain traction (LinkedIn posts, Reddit, Medium publication, and more).

Anyways, this will be a long journey. There’s a lot to learn, but I’m excited about how this blog will grow.

And that’s a wrap!

Thank you for being awesome and reading this far! :)If you have any questions, feel free to reach out on LinkedIn or by email. Will love to set up a casual call and chat!

Read Next