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

Static Site Template

A starting point for building a static site.

Development

Uses

• Turborepo x pnpm
• Prettier / ESLint (w/ eslint-plugin-import)
• lint-staged / husky
• Renovate (w/ renovate-approve)
• GitHub Actions (Formating + Linting + Testing (Validate href and src paths))
• Execute eslint --fix and prettier when saving with VS Code

Apps and Packages

• apps
  • web - Static Site
    Tailwind CSS / Rollup
    HTMLHint / webhint
• 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)

• Tailwind CSS IntelliSense
• HTMLHint / ESLint / webhint
• EditorConfig / Prettier

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",