@plushveil/pages - Build Static Pages with JavaScript Template Literals

Quick Start

1. Install the Package

npm install @plushveil/pages

2. Create a Page File

Create a file named index.page:

<!DOCTYPE html>
<html lang="${lang}">
  <head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <link rel="canonical" href="/" />
  </head>
  <body>
    <h1>${title}</h1>
    <p>Welcome to my site!</p>
  </body>
</html>

<script target="html">
  export const lang = 'en'
  export const title = 'My Website'
</script>

3. Serve or Build

Development Server:

npx pages serve pages/

Build for Production:

npx pages build pages/

Features

🎯

Plain JavaScript

Use template literals you already know. No new syntax to learn.

🚀

Fast Dev Server

Hot reload built-in. See changes instantly as you develop.

📦

GitHub Action

Deploy directly from GitHub with our official action.

🎨

Tailwind CSS

Built-in support for Tailwind with automatic purging.

⚡

Optimized Output

Automatic minification, compression, and optimization.

🔧

VS Code Extension

Syntax highlighting and IntelliSense for .page files.

📝

TypeScript Support

Write your scripts with full TypeScript support.

🌍

Multi-Page Sites

Build complete websites with multiple pages and routes.

🔄

Import Components

Reuse HTML snippets and components across pages.

Perfect For

📖

Documentation Sites

Build fast, searchable documentation with minimal overhead.

🏢

Landing Pages

Create beautiful landing pages without framework bloat.

📝

Blogs & Portfolios

Personal sites and blogs with simple, maintainable code.

Deploy with GitHub Actions

Add this to .github/workflows/pages.ymlto automatically build and deploy your site:

name: Build and Deploy Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pages: write
      id-token: write

    steps:
      - uses: actions/checkout@v4

      - id: build
        name: Build pages
        uses: plushveil/pages@latest
        with:
          folder: pages
          config: pages.config.mjs

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ${{steps.build.outputs.folder}}

      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

💡 Tip:The build step outputs the build folder path via ${{steps.build.outputs.folder}}. Use this in subsequent steps for custom deployment workflows.

Resources

📦

GitHub Repository

View source code, report issues, and contribute.

github.com/plushveil/pages →

📚

npm Package

View package details, versions, and installation instructions.

npmjs.com/package/@plushveil/pages →

🔧

VS Code Extension

Get syntax highlighting, formatting, and dev server integration.

Install from VS Code Marketplace →

⚙️

GitHub Action

Automate your builds and deployments with CI/CD.

View on GitHub Marketplace →