There are a lot of free options where you can deploy Astro.js websites like CloudFlare Pages, Vercel, or Netlify all of them for free but with some limitations.
I have even created a tutorial of how you can deploy astro.js on CloudFlare Pages but you may want to use your own VPS server for it to not reach the limits of a free solution.
In this tutorial we are going to see how you can deploy an astro.js blog or any website on your own VPS server, you can use any VPS provider you want, the most known are DigitalOcean, Vultr, Hetzner, I have also written an article and made a video with the benchmarks here: DigitalOcean vs Vultr vs Hetzner you can check it out.
To deploy Astro in this tutorial we will need to have the VPS server created and have CloudPanel installed, if you don’t know CloudPanel is a hosting panel that can help you host different websites from PHP ones to Node.JS ones to static ones. It is fast and can help you manage your VPS easily, you can check the Install CloudPanel and Host Node.js Apps to see exactly how you can install it.
If you are interested on how you can monitor your CPU and have an automatic email sent when load is to big you should check: Monitor CPU Usage and Send Email Alerts in Linux
Video With Astro.JS Deployment on VPS
You can check also this tutorial is showing how you can deploy Astro on your VPS with a Heroko or Netlify alternative Coolify: Coolify Install A Free Heroku and Netlify Self-Hosted Alternative
Deploy Astro.JS on Your Own VPS With CloudPanel
Let’s get into this tutorial and see how we can have our website deployed on a VPS server.
1. Add The Website to CloudPanel
The first step is to go and add the website to CloudPanel, you just go and hit the Add Site and choose the static site option, you need to add your website URL with the website user and password.
After you need go and edit the root directory to point to www.domain.com/dist the dist directory is used by Astro to deploy the static content when you build it. Check the below picture:
2. Point the Website DNS to the server IP
The next thing to do is to go and point the A record of the domain to your server IP, I am doing this in CloudFlare and I have also activated the proxy for this domain.
3. Generate an SSL Certificate for the Website
This is done from the CloudPanel SSL/TLS interface you just need to go there on the website and hit the new Let’s Encrypt Certificate.
Now the website will have its certificate and can be accessed over HTTPS.
4. Install Node.js on your website user
Astro is using node.js so we need to have node.js working on the user used for the website for this you just need to follow the below steps, also the Install Node.js using NVM on MacOS and Ubuntu can help you:
Login with SSH to the VPS server and go under the user used for the website:
ssh -i <key> root@serverip sudo su - <website_user>
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash source ~/.bashrc
nvm install --lts
5. Remove the current website to add a new one with Astro:
cd htdocs rm -rf www.domain.com
6. Add an Astro Website
Add the Astro website, if you have a GitHub repo you can use the Link GitHub with A SSH Key for more details. In this article, I will add a clean Astro website
npm create astro@latest Need to install the following packages: [email protected] Ok to proceed? (y) y ╭─────╮ Houston: │ ◠ ◡ ◠ Let's create a new project! ╰─────╯ astro v2.0.6 Launch sequence initiated. ✔ Where would you like to create your new project? … fratica.ro ✔ How would you like to setup your new project? › a personal website starter kit ✔ Template copied! ✔ Would you like to install npm dependencies? (recommended) … yes ✔ Packages installed! ✔ Would you like to initialize a new git repository? (optional) … yes ✔ Git repository created! ✔ How would you like to setup TypeScript? › Strict ✔ TypeScript settings applied! next Liftoff confirmed. Explore your project! Enter your project directory using cd ./fratica.ro Run npm run dev to start the dev server. CTRL+C to stop. Add frameworks like react or tailwind using astro add. Stuck? Join us at https://astro.build/chat ╭─────╮ Houston: │ ◠ ◡ ◠ Good luck out there, astronaut! ╰─────╯ npm notice npm notice New minor version of npm available! 9.3.1 -> 9.4.1 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.4.1 npm notice Run npm install -g [email protected] to update! npm notice
Be sure that Where would you like to create your new project? to add the exact folder with the domain name you deleted.
7. Build your website
After you make the modifications you can build your website:
npm run astro build
This is the easiest way to host astro.js on your own VPS, this can be used on any static website you just need to add the proper destination folder for your static website.
Using CloudFlare on the website will assure that will be fast and can be secured with additional security rules.
In case you are interested to have a web panel that can help you manage your applications and be used as a reverse proxy you can check the bellow course: