Logo

dev-resources.site

for different kinds of informations.

Deploy a Static Astro Site on Railway

Published at
10/20/2024
Categories
railway
astro
deploy
webdev
Author
markmunyaka
Categories
4 categories in total
railway
open
astro
open
deploy
open
webdev
open
Author
11 person written this
markmunyaka
open
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
deploy Article's
30 articles in total
Favicon
How to Deploy a Static Website to AWS S3 with Razorops CI/CD
Favicon
Pipeline CD en Jenkins para terraform AWS EKS segunda parte (plugin AWS Credentials)
Favicon
Kamal 2 Quick Start - the missing tutorial
Favicon
Evento de Mobile, Frontend, Backend, Banco de Dados e Deploy Gratuito
Favicon
Deploy a Static Astro Site on Railway
Favicon
Deploy a PHP site to Railway
Favicon
Added advanced debugging features to my machine learning library like pytorch.
Favicon
When Companies Adopt Feature Flags
Favicon
Why should you have a Staging environment?
Favicon
How to Deploy Flutter Apps to the Google Play Store and App Store
Favicon
Deploy MongoDB Replica Set on K8s
Favicon
Deploy Go Application using Docker Compose Replicas and Nginx
Favicon
Despliegue de aplicación de Django con Github Actions para un servidor propio
Favicon
Common and Useful Deployment Patterns
Favicon
From Frustration to Fix: Conquering Vercel Errors Like a Pro
Favicon
Efficient Data Management with Prisma, Fly.io, and LiteFS Configuration
Favicon
Deploying Forem on Render.com PromptZone.com
Favicon
My Docker stack to deploy a Django + Celery web app
Favicon
Firebase Hosting Setup Complete Issue
Favicon
Deploy an Azure Functions app from a monorepo with a GitHub Action for Node.js
Favicon
DevOps, como começar? ...e por que?
Favicon
Kotlin and Azure Functions - Automating the deployment
Favicon
Private Deployment Gantt chart Project management tools
Favicon
Laravel Deployer Free package for laravel and nodejs apps Deployment
Favicon
Don't Couple Your Deployments
Favicon
Six niche tips for shipping Flutter MacOS builds
Favicon
Deploying a Static Site (feat.Vite, gh-pages)
Favicon
Deploy Express App to Render with MySQL
Favicon
Deploying on Netlify via GitHub Actions: A Seamless Guide
Favicon
AWS CodeDeploy Best Practices for Reliable and Efficient Deployments

Featured ones: