Flavio - What do you think about my new website?

Hi Reader

2 days ago I woke up with the idea of moving my website flaviocopes.com from Hugo to Astro.

It took me just a day, with a brand new theme design as well. 

In this email I'm going to detail the process and decision making, figuring it could be useful to you.

In case you don't know Astro, it's one very cool site building tool. I've been using it on many of the new websites I've created lately. I wanted to make this move since months, but I kept resisting and also I had a lot other more important things to do.

While working on my websites, my most important metric for me is DX, developer experience aka I don't want to work with bad tools.

Astro is very good on this because it allows me to build a website using UI components that I can create with its components syntax, which is JSX-like and very nice, or even React components, which can be frontend rendered or also server rendered at build time. Or any other frontend framework.

I've used this last feature to build a very cool thing.

I'm happy to tweak my pages inside VS Code, but sometimes it can get tiring, and the process makes me avoid writing a new post. I know I could use a CMS but I just won't. I want to build my own, right? Perfectly suited for me.

I'm a heavy Notion user, and I really like its authoring experience so much that I've been using it for creating all the courses I've done in the past 2 years, Bootcamp included. No tool compares to it, in my opinion.

This time I wanted to see if I could use Notion to power my blog as well. Not all of it, because the blog has over 1600 tutorials now 🤪, and it would be quite taxing if every build had to ask the Notion API for all the content. It would take a lot of time and I would have to work around rate limiting.

So instead I built a hybrid solution. 

I write new posts in Notion, and I can run a command on my computer to fetch them and transform them as markdown files on my site.

Best of both worlds: fast authoring and fast build times.

Hugo built the site in 1' 10". Astro builds the site in 2' 43".

It's more than 2x built time but.. hey, 1600 blog posts. It's a lot. It's actually much faster than some built times I hear about. 

I have more time to grab a cup of coffee before I can see the changes I push to production, but now I can do so much more, because Hugo is great and fast, but Astro is JavaScript and I can do whatever I want with it.

I didn't stop here.

I also had this idea: I want to be able to entirely build a site from a Notion page. Make that the homepage, and have sub-pages be pages on the site. 

I also wanted to optionally code the homepage with an Astro page, with code, and then have a page on Notion that could serve those sub-pages. Best of both worlds.

So when I want to add a page to the site I don't have to open my computer, VS Code, go in src/pages, create a new file, write HTML / JSX... I can just create a Notion page, even on my smartphone while I'm on a train, type the content, hit a button to trigger a new site build.

The site asks Notion which pages it has ready for publishing, fetches them at build time, and builds a static site with that content. 

I know other tools exist to make a site from Notion but the big difference with them is that this is completely customizable, developer friendly, and Notion can be just a portion of the website.

I have total control. And the rest of the site could be built in React, Svelte, whatever. Oh did I mention React that's server rendered at build time is great? I can use the React fancy features and JSX, and generate HTML that's shipped to the browser, instead of shipping React itself and client-render it. 

I'm happy with this workflow so far, and I built a few different sites using this technology. I like it. It's easy, but does not get in the way of doing whatever I want with it.

Also I think it's a refreshing approach to Web publishing. 

I can focus on the content rather than the tech stack (ironically, as I've been talking to you about the tech stack until now). Once built, it disappears behind the scenes.

Site builders are fun. I like building sites and talking about building sites. I've been working with them for a long time.

While I was doing this major rewrite of the underlying platform, I also had to migrate from a custom Hugo theme, which accumulated years and years of dust and tweaks and conditionals.

I decided to start from a blank slate approach. I had the content, and nothing else. I added Tailwind CSS, which it's something I wanted to do for ages but never had the courage to migrate the tons of lines of custom CSS I had.

Started simple, just have some basic CSS in place. And I replicated all the URL structured from before, so I won't have to deal with URL changes that could make Google angry.

The site looks clean. I wanted a minimalist UI with no fluff. The important thing is the content. I removed the sidebar. Removed the unimportant things I accumulated. I have a page with all the posts now, instead of pagination. It's great for searching. I can remove Algolia. Less code. I have a nice way to visualize tags.

Take a look.

I also have dark mode because I don't want your precious eyes to burn at night, you turn it on with your operating system settings.

Let me know what you think by replying to this email!

Oh and if you spot anything wrong with the site, tell me :)

Got some new blog posts for you too:

• How to embed YouTube videos using the correct aspect ratio
• How to bulk convert file names using Node.js
• How to replace all filenames with space with underscore using a shell script
• You can’t generate classes dynamically in Tailwind

P.S. remember, in just 49 days we'll start the 2023 cohort of the Bootcamp, a 10-weeks long intensive online course that teaches you the fundamentals of Web Development using modern technologies, including HTML, CSS, JavaScript, Tailwind, Astro, React, Next.js, Prisma, PostgreSQL, NextAuth and much more! We'll go from zero to building websites, and then we'll focus on building web apps!

Have a great day!

Flavio @flaviocopes

This email was sent to you because you are subscribed to Flavio's Newsletter. If you want to stop receiving my free tutorials, click here to unsubscribe