News

Deploy a Static Astro Site on Railway

stp2y0 Comments
Deploy 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



Source link
lol

By stp2y

Leave a Reply

Your email address will not be published. Required fields are marked *

No widgets found. Go to Widget page and add the widget in Offcanvas Sidebar Widget Area.