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

#railway #astro #deploy #webdev

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

Top comments (0)