hiijax.net

Jax's homepage on the net.

Developing

# clone and enter the repo
git clone https://git.protogen.chat/HiiJax/hiijax.net.git
cd hiijax.net

# install dependencies
npm install

# start the dev server
npm run dev

Gallery

Currently, you can store originals for the art gallery at:

/original/[slug].[ext]

The following is needed for full functionality:

/static/gallery/[slug].avif
/static/gallery/[slug].webp
/static/thumb/[slug].webp

For now, use a tool like XL Converter to create images at 90% quality. Full resolution in /gallery. Resize shortest edge to 240px in /thumb.

This will be done automatically at runtime in the future.

Production

For testing a production build locally, use docker:

# build the image
docker build -t hiijax.net .

# run the image
docker run -v ./static:/app/public -v ./data:/app/data -p 3000:3000 hiijax.net

Since this is just a personal website, Forgejo Actions automatically builds and overwrites the :latest tag in the container registry.

The is how the production container is typically run with docker-compose. Note that ./static is now ./public since we are no longer in a dev environment.

services:
  hiijax.net:
    image: "git.protogen.chat/hiijax/hiijax.net:latest"
    ports: "8080:3000"
    volumes:
      - ./public:/app/public
      - ./data:/app/data

Static Assets

Static assets are not included in this repo.

In production, an Express server is used to dynamically serve static assets at / from /app/public within the container. Therefore, this directory must be mounted into the container when running in production. This is so images and such can be easily swapped out by simply replacing the file.

For development, /static/ has been added to .gitignore so that you can provide the assets there, since they are also served at / by npm run dev

Files that only need to be accessed by the server, such as the gallery metadata, are stored in /data.

Credits

• PetraPixel for her layout generator!