Moving a simple site to Astro

⭐️ 👀 2023 WEB DEVELOPMENT BOOTCAMP starting in days! Join the waiting list to reserve your spot in my 10-weeks cohort course and learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much much more! 👀 ⭐️

I have a website that is powered by Hugo, but I want to switch to using a simpler solution, so I don’t have to deal with Hugo templates when I want to make a change.

Astro seems like a good choice for it.

I feel more familiar with JSX, and I can choose to use a framework like Svelte or React if I want later down the road.

In this article I’m going to show you how I switched.

The site I’m talking about is https://thejscourse.com, the website of the JavaScript Course.

It’s already live, it’s built with plain HTML and CSS, inline in the page. I just have an images/ folder, and a thanks/index.html page that’s where I thank customers after the purchase.

Here’s what I did. First I created a new branch of the Git repository, and I initialized Astro in there, with npm init astro.

This asks me to force overwrite the existing files:

Then I chose the Minimal template and I finished the installation:

I moved the images folder under public and I moved index.html to src/pages/index.astro.

I ran npm install and npm run dev to see my work so far.

It worked!

Then I moved the thanks/index.html page to src/pages/thanks.astro

Checked the URL, it worked!

That was a quick transition. Transferring HTML needs zero work.

Not what you’d expect when working with JSX. But as you know Astro’s JSX is a bit unique, and makes our life easier. No more camelCase attributes, or className= for all HTML classes.

Then I decided to make a common layout for both pages, since they share a lot in common.

I made a layout in src/layouts/common.astro and made a simple skeleton with the head and body of the page, with all the CSS, font import, meta tags etc, and the basic layout container.

With ` like I explained in my post about Astro layouts.

The only thing I had to change was to use <style global> instead of <style>, and the links to images, which were using a relative URL like ../images. Now all images are in /images. If you don’t do this, the build will fail, as you can test using npm run build locally:

[build] file:///Users/flaviocopes/www/thejscourse.com/src/pages/thanks.astro: could not find file "/_astro/src/images/welcome2.jpg".

In this way, I can modify all in need in that layout, and that’s applied to all pages.

Finally, the deployment part.

I went to my Cloudflare Pages dashboard, configured the build:

And configured the NODE_VERSION environment variable to ^14.13.1 in the site settings, otherwise by default it’s too old.

Pushed the branch to GitHub, which triggered a preview build.

The deploy time went from 2m 26s, for a simple HTML site with no build step at all, to about 3 minutes. Not a big difference.

The most of this time is setting up the build environment, which CFP does for any kind of site anyway.

After making sure everything was set up correctly, I merged the branch with the default one I set in the CloudFlare Pages settings, and I pushed the changes to GitHub so the changes could go live.

Now Astro is powering http://thejscourse.com.

One more thing! ⚠️ ✋

At the end of January I will organize the Web Development Bootcamp.

It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.

It's not "just a course". It's a big event I organize once a year.

We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more! 

At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.

Because once you got the fundamentals, you only learn by working on real, exciting projects.

To find out more, visit bootcamp.dev