Skip to content
This repository has been archived by the owner on Aug 22, 2024. It is now read-only.

A starting point for building a static site.

License

Notifications You must be signed in to change notification settings

usagizmo/static-site-template

Repository files navigation

All features can continue to be used in usagizmo/nextjs-template

Static Site Template

A starting point for building a static site.

Development

Uses

Apps and Packages

  • apps
  • packages
    • eslint-preset - Base settings used by .eslintrc.cjs for each package
    • lintstagedrc - Base settings used by .lintstagedrc.js for each package
    • pathtest-utils - Used in apps/web/test/path.test.js
    • script-modules - JS modules used in apps/web/src/script.js
    • tailwind-config-base - Used in apps/web/tailwind.config.cjs

VS Code Extensions (Recommend)

Commands

pnpm i

pnpm build   # Build `apps/web/src/[styles.css,script.js]` and output `apps/web/public/*`
pnpm dev     # Watch and build `apps/web/src/[styles.css,script.js]`
pnpm lint    # Linting
pnpm format  # Format with `eslint --fix` and `prettier`
pnpm test    # Testing

# apps/web
pnpm clean   # Remove unused image files in `public/images/*`
pnpm deploy  # When deploying to a VPS such as DigitalOcean using `rsync`

Subresource Integrity

You can use the openssl command to generate an SRI hash.

curl "<url>" | openssl dgst -sha384 -binary | openssl base64 -A

Ref: Subresource Integrity - Web security | MDN

Use renovate on GitHub

Give Renovate and renovate-approve permission to operate the repository.

Then change your GitHub settings as follows.

Settings > Branches > Branch protection rule

  • Branch name pattern: main
  • Protect matching branches:
    • Require a pull request before merging
      • Require approvals: [1]
    • Require status checks to pass before merging
      • Status checks that are required:
        • Build (Node 16 on ubuntu-latest)
        • Vercel

Published on Vercel

General > Build & Development Settings

  • FRAMEWORK PRESET: Other
  • OUTPUT DIRECTORY: apps/web/public
  • INSTALL COMMAND: npm i pnpm -g && pnpm i

With Basic Authentication

# Add packages
pnpm add -D static-auth safe-compare

Run the following, then change the username and password in index.js.

# vercel.json
printf "{
  \"builds\": [
    {
      \"src\": \"index.js\",
      \"use\": \"@vercel/node\"
    }
  ],
  \"routes\": [{ \"src\": \"/.*\", \"dest\": \"index.js\" }]
}
" > vercel.json

# index.js
printf "const path = require('path')
const protect = require('static-auth')
const safeCompare = require('safe-compare')
const directory = path.join(__dirname, '/apps/web/public')

const app = protect(
  '/',
  (username, password) =>
    safeCompare(username, '<username>') && safeCompare(password, '<password>'),
  {
    directory,
    onAuthFailed: (res) => {
      res.end('Authentication failed')
    },
  }
)

module.exports = app
" > index.js

Add the vercel-build command to package.json.

"build": "turbo run build",
+ "vercel-build": "npm run build",