In this blog post, I will walk you through the process of moving a website from Hugo to Astro, a simpler solution that eliminates the need to work with Hugo templates when making changes.

I find Astro to be a great choice for this migration because it allows me to use JSX, a syntax I am more comfortable with, and also gives me the flexibility to incorporate frameworks like Svelte or React in the future.

The website in question is thejscourse.com, the official website of the JavaScript Course. It is currently live and primarily built with plain HTML and CSS, with an images/ folder and a thanks/index.html page dedicated to thanking customers after their purchase.

Here are the steps I followed to migrate the site:

  1. First, I created a new branch in the Git repository and initialized Astro using the command npm init astro. This prompted me to overwrite the existing files, which I confirmed.

  2. Then, I chose the Minimal template and completed the installation process.

  3. I moved the images folder to the public directory and the index.html file to src/pages/index.astro.

  4. To verify my progress, I ran npm install followed by npm run dev, which allowed me to see the site in action. Everything worked as expected!

  5. Next, I moved the thanks/index.html page to src/pages/thanks.astro and checked the corresponding URL. Once again, it worked seamlessly.

The transition was surprisingly smooth, requiring no additional work for transferring the HTML files. This simplicity is unique to Astro’s JSX, which offers a more intuitive approach compared to traditional JSX syntax. For instance, there is no need to use camelCase attributes or className= for HTML classes.

At this point, I decided to create a common layout for both pages to streamline their design. I achieved this by creating a layout file called src/layouts/common.astro, which contained the necessary HTML structure, including CSS, font import, meta tags, and a basic layout container. To implement the layout across multiple pages, I utilized <astro-include> as explained in my blog post on Astro layouts.

The only adjustments I needed to make were using <style global> instead of <style> and updating the links to images, which previously used a relative URL like ../images. Now, all images were located in the /images directory. Failing to make these changes would result in build errors, which can be tested locally using the command npm run build.

By centralizing the layout in this way, I could modify it once and have the changes applied to all pages effortlessly.

Finally, let’s talk about deployment. I went to my Cloudflare Pages dashboard and configured the build settings accordingly. I also adjusted the NODE_VERSION environment variable in the site settings to ^14.13.1 to ensure compatibility. Pushing the branch to GitHub triggered a preview build.

The deployment process took roughly the same amount of time as before, around 3 minutes, even though the site is now powered by Astro. The majority of this time is spent setting up the build environment, which Cloudflare Pages handles for any type of site.

After confirming that everything was set up correctly, I merged the branch with the default one specified in the Cloudflare Pages settings and pushed the changes to GitHub, thus making the migrated site live.

Now, Astro is successfully powering thejscourse.com.