I am trying to build a simple web page using Astro and deploy it on Github Pages to showcase something. The pipeline all green, but even after 1 day of waiting, I still get the 404 page unfound error. Here is the configs and related files that are used.
astro.config.mjs
import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
import node from "@astrojs/node";
// https://astro.build/config
export default defineConfig({
build:{
site: 'https://my-personal-githubaccount.github.io/',
},
integrations: [react()],
output: "server",
adapter: node({
mode: "standalone"
}),
plugins: [react({ jsxImportSource: '@emotion/react' })],
});
.github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/[email protected]
- name: Install, build, and upload your site
uses: withastro/[email protected]
with:
node-version: 18
package-manager: npm
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
Astro folder:
root
|- public/
|- favicon.svg
|- src/
|- a bunch of source codes files
|- package.json
|- tsconfig.json
|- astro.config.mjs
artifact.tar
|- ./
|- client/
|- _astro/
|- some js, css, svg file here(no html file found)
|- favicon.svg
|- server/
|- chunks/
|- 2 .mjs files and one subfolder containing index.mjs
|- entry.mjs
|- renderers.mjs
to deploy on github pages, you need to change
output: "server"
to
output: "static"
Astro reference
https://docs.astro.build/en/reference/configuration-reference/#output
Github reference "GitHub Pages is a static site hosting service..."
https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages