The original version of my website was built with Webflow over New Year’s 2019 (or even earlier). Now that we’re moving into 2021, I figured it was time for a refresh.
From the beginning, I knew I wanted two things with a new site:
- Static, so it loads incredibly fast
- Self-hosted, so I can extend and customize as needed
Webflow works great for organizations and people who don’t want to use code to build a website. For me, though, I found myself constantly getting frustrated with the limitations of the WYSIWYG editor. Additionally, it was too slow for my taste - much slower than a simple one-page website should be (it works great for multi-page websites, though!). While I’ve previously used Gatsby for static websites, this time I wanted a more straightforward approach.
I ended up going with a combination of Next.js, an incredible framework for building server-side React applications, and Tailwind CSS, a utility-first CSS framework.
Next.js is super minimal with a clear model that was easy for me (a non-engineer) to understand, and I didn’t end up with 50 folders with 300 files. I also wanted to use MDX, which was the format I wanted to use to write blog posts in.
# My first MDX post
MDX is a really cool authoring format because it lets
you embed React components right in your markdown:
<MyComponent myProp={5} />
How cool is that?MDX is especially interesting to me because unlike regular Markdown, I can embed live React components directly into my content. This unlocks a ton more opportunities for engaging readers - I can build interactive demos and stick them into an article, or build a whole new component for an article and locally scope it with CSS modules.
I already write in Markdown with Obsidian.md, so MDX is a simple step forward.
public/
scripts/
src/
├── components/
├── css/
├── img/
└── pages/
├── rebuilding-my-website/
│ ├── index.mdx
├── google-doesnt-laugh
│ ├── index.mdx
│ ├── airbnb.png
│ ├── results.png
├── _app.js
├── _document.js
└── index.js
next.config.js
package.json
postcss.config.js
README.md
tailwind.config.js
Plus, I really wanted to play with React more.
Tailwind was a simple choice — we use it at Cialfo, and I wanted to learn more about it so I could help out with front-end development work if necessary (or at least, know what they’re talking about).
Vercel was a no-brainer for deployment - they created Next.js, and so has first-class support. I also really liked their DPS workflow (Develop, Preview, Ship) where each Github push created a new deployment with a unique URL. It’s also free!
The workflow
I use Obsidian.md as a second brain. Once a blog post has been fleshed out in Obsidian, I create a new folder in pages and copy/paste the text. If there are images, I upload them into the folder too.
After some formatting, I test on localhost with yarn dev. If that looks fine, I either deploy directly to master or to dev if there are some components I’ve embedded into the article. Vercel will then automatically create a production deployment.
Dead simple, and I’m much happier with this than my old setup.