# Moving a simple site to Astro

> Learn how I moved a simple HTML and CSS site to Astro, from running npm init astro to sharing a common layout and deploying the result on Cloudflare Pages.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-11-19 | Topics: [Astro](https://flaviocopes.com/tags/astro/) | Canonical: https://flaviocopes.com/moving-site-to-astro/

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](https://flaviocopes.com/astro-introduction/) 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](https://flaviocopes.com/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](https://flaviocopes.com/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](https://flaviocopes.com/git/) repository, and I initialized Astro in there, with `npm init astro`.

This asks me to force overwrite the existing files:

![Terminal showing npm init astro asking to force overwrite existing files with y/N prompt](https://flaviocopes.com/images/moving-site-to-astro/Screen_Shot_2021-11-17_at_20.07.12.png)

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

![Astro installation completed showing Minimal template selection and next steps with npm install and npm run dev commands](https://flaviocopes.com/images/moving-site-to-astro/Screen_Shot_2021-11-17_at_20.07.25.png)

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 `<slot /> like I explained in my post about [Astro layouts](https://flaviocopes.com/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](https://flaviocopes.com/moved-blog-cloudflare-pages/) dashboard, configured the build:

![Cloudflare Pages build configuration interface showing npm run build command and dist output directory settings](https://flaviocopes.com/images/moving-site-to-astro/Screen_Shot_2021-11-17_at_20.44.54.png)

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](https://flaviocopes.com/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.