DEV Community

Cover image for Deploy a Static Astro Site on Railway
Mark Munyaka
Mark Munyaka

Posted on

Deploy a Static Astro Site on Railway

Deploying a Static Astro Site on Railway

Astro is a framework for building websites. Railway is a platform for hosting web apps. This guide shows you how you can host an Astro website on Railway.

Prerequisites

  • GitHub Account
  • Railway Account
  • Node.js

Create Astro app

On your local machine, create a new folder named 'my-app'.

mkdir my-app
Enter fullscreen mode Exit fullscreen mode

Open my-app.

cd my-app
Enter fullscreen mode Exit fullscreen mode

Create a package.json file and add the following:

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.16.5"
  }
}
Enter fullscreen mode Exit fullscreen mode

Install the dependencies.

npm install
Enter fullscreen mode Exit fullscreen mode

Create a src/pages folder and add a src/pages/index.astro file.

mkdir -p src/pages && touch src/pages/index.astro
Enter fullscreen mode Exit fullscreen mode

Add this to src/pages/index.astro

<h1>Hello, World!</h1>
Enter fullscreen mode Exit fullscreen mode

Run the development server.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:4321 to view your site.

lynx localhost:4321
Enter fullscreen mode Exit fullscreen mode

Build Site

Stop your server and build your Astro site:

npm run build
Enter fullscreen mode Exit fullscreen mode

Astro will produce a dist folder containing the static site you will deploy.

Preview your build:

npm run preview
Enter fullscreen mode Exit fullscreen mode

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli
Enter fullscreen mode Exit fullscreen mode

Login to your Railway account:

railway login --browserless
Enter fullscreen mode Exit fullscreen mode

Create a new Railway project:

railway init
Enter fullscreen mode Exit fullscreen mode

Link the dist folder to your Railway project.

Change working directory to dist.

cd dist
Enter fullscreen mode Exit fullscreen mode

Link current directory, i.e. dist to your Railway project.

railway link
Enter fullscreen mode Exit fullscreen mode

Deploy your app.

railway up --detach
Enter fullscreen mode Exit fullscreen mode

When site is ready, generate a domain.

railway domain
Enter fullscreen mode Exit fullscreen mode

Test Deployment

lynx <YOUR-APP-DOMAIN>
Enter fullscreen mode Exit fullscreen mode

Update Site and Redeploy

Update home page, src/pages/index.astro:

<h1>Hello World!</h1>
<p>Happy to be here</p>
Enter fullscreen mode Exit fullscreen mode

Test update locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Rebuild site:

npm run build
Enter fullscreen mode Exit fullscreen mode

Redeploy to Railway.

cd dist && railway up --detach
Enter fullscreen mode Exit fullscreen mode

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 (0)

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

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay