DEV Community

Christian Nwamba
Christian Nwamba

Posted on • Edited on

6

Deploy an Astro Blog to AWS Amplify

Astro.js is a modern web development framework that allows developers to build static websites and web applications using components, with support for server-side rendering, data fetching, and other advanced features.

AWS Amplify Hosting, is a subset of AWS Amplify tools and features that enable developers to deploy and manage their web applications with ease.

In this tutorial, we will cover the steps required to deploy an Astro.js website to AWS Amplify Hosting.

Create an Astro Project

Run the following command to create an Astro project on your computer:

npm create astro@latest
Enter fullscreen mode Exit fullscreen mode

Give the project a name.

Choose the blog template so we can test with a production ready blog website. Go with the default settings for the rest of the wizard prompts.

Run the following to ensure that your set up works:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Setup Walkthrough

The website has a static home page, about page and blog index page that aggregates all your blog posts. It also has a statically generated blog pages for each blog entry.

The home and about pages are direct children of the pages folder while the blog page is an index.astro file inside pages/blog folder. The statically generated pages are setup with the slug file in pages/blog folder.

Deploy to AWS Amplify

You need to have a git repository deployed to a git provider such as Github. With a git repository, Amplify Hosting can set up continuous delivery automatically. Commit all your changes to Git and push your website to Github.

Go to your AWS console and search AWS Amplify. Open it, click the New App dropdown and choose Host web app:

Choose your Git provider and click Connect branch

Choose the repository, select a branch and click Next

In the build settings page, choose Create new environment and choose a role or create a new role that allows Amplify Hosting to access your resources.

Click Edit to edit the build settings. Change the baseDirectory to dist and click save.

Click Next and Click Save and Deploy. Give the deployment process a minute or two and once it is done, click the production URL to preview the website.

Conclusion

Congratulations! You have successfully deployed your Astro.js website to AWS Amplify Hosting. By leveraging the power of AWS Amplify, you can easily host and scale your website with minimal effort, allowing you to focus on building great web experiences for your users.

Resources

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (4)

Collapse
 
bcsgbl profile image
bcs-gbl

What about server side rendering?

Collapse
 
reeshee profile image
Rishi Raj Jain
Collapse
 
bcsgbl profile image
bcs-gbl

Thank you !!! :)

Collapse
 
intelrunner profile image
Eric E.

This is great, because it just works. With a little domain / dns fliddling in Route53, you can get a fully secure, domained site, in less than an hour.

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay