#How to build static website with only Deno, without package.json?
8 messages · Page 1 of 1 (latest)
To build a static Astro website with Deno without using package.json, you can use Deno Deploy. Here's how to do it:
Building and Deploying an Astro Static Site with Deno
You can deploy a static Astro site using Deno in two main ways:
Option 1: Using Deno Deploy CLI
-
Install the Deno Deploy CLI:
deno install -gArf jsr:@deno/deployctl -
Build your Astro site (you'll need to do this on a machine with npm initially to generate the static files)
-
Once you have the built files, you can serve them using Deno's file server:
cd dist && deployctl deploy jsr:@std/http/file-server
Option 2: Running on Your Own Deno Server
If you want to run the site on your own server with just Deno:
-
Copy your built Astro project (the
distdirectory) onto your server -
Start the application with the following command:
deno run -A jsr:@std/http/file-server dist
This command uses Deno's standard HTTP file server to serve your static files without needing package.json or npm.
Using GitHub Actions for Deployment
For a more automated approach, you can use GitHub Actions to build and deploy your site to Deno Deploy:
- Create a
.github/workflows/deploy.ymlfile with the following content:name: Deploy on: [push] jobs: deploy: name: Deploy runs-on: ubuntu-latest permissions: id-token: write contents: read steps: - name: Clone repository uses: actions/checkout@v4 - name: Install dependencies run: npm ci - name: Build Astro run: npm run build - name: Upload to Deno Deploy uses: denoland/deployctl@v1 with: project: my-deno-project # replace with your project name entrypoint: jsr:@std/http/file-server root: dist
Note that this approach still requires npm for the build step, but the deployment and serving are handled by Deno.
Learn more about Deno deployment
If you're looking to completely eliminate npm/package.json from your workflow, you would need to manually build the Astro site or use a different static site generator that's compatible with Deno's ecosystem.
I hope this helps! Let me know if you need more specific information about any part of this process.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@radiant temple Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@unkempt locust Im asking because in one project im getting error:
[ERR_UNSUPPORTED_ESM_URL_SCHEME] Only file and data URLs are supported by the default ESM loader. Received protocol 'astro'
Let me check the knowledge base for you again. One moment! :books:
I understand you're encountering an error related to ESM URL schemes in your Astro project. This error occurs when Node.js is trying to import from a URL with the astro: protocol, which it doesn't recognize by default.
This error typically happens when you're trying to use Astro-specific imports like astro:assets or other built-in Astro modules in an environment that doesn't properly process these imports.
Common causes and solutions:
1. Using astro: imports outside of Astro components
When you use imports like import { Image } from "astro:assets", these are special imports that are processed by Astro's build system. If you're trying to use these in a regular JavaScript file that's not being processed by Astro, you'll get this error.
// This works in .astro files
import { Image } from "astro:assets";
2. JS dependencies in config file not being processed by Vite
In Astro 5, there was a breaking change where JS dependencies in the config file are no longer processed by Vite:
In Astro 4.x, locally-linked JS dependencies were able to use Vite features like
import.meta.globwhen imported by the Astro config file. Astro 5 updates the Astro config loading flow to ignore processing locally-linked JS dependencies with Vite.
JS dependencies in config file are no longer processed by Vite
3. Running Astro with Deno without proper adapter
If you're trying to run Astro with Deno, you need to make sure you're using the Deno adapter:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import deno from '@deno/astro-adapter';
export default defineConfig({
output: 'server',
adapter: deno(),
});
4. Document/Window not defined errors
If you're also seeing errors about document or window not being defined, this is because Astro components run on the server. You need to move browser-specific code to client-side scripts:
---
// Server-side code here
---
<html>
<!-- Your page here -->
<script>
// Client-side code with document/window access here
</script>
</html>
Common error messages - document is not defined