Skip to content

Static Site Generators

Sigal is a simple static gallery generator.

Getting started

Create the config file:

sigal init

Edit the config file...

Then run the build command

sigal build

Thumbsup is a Video and Image Gallery but i prefer Signal for images. Thumbsup works great with videos. Read the documentation for details. To get started:

Requirements

Option 1: Install on machine

# Install Nodejs and NPM
# Install GraphicsMagick
npm install -g thumbsup

Option 2: Run Docker

docker run -t -v /Volumes/photos:/input:ro -v "$(pwd)/website:/output" -u $(id -u):$(id -g) ghcr.io/thumbsup/thumbsup thumbsup --input /input --output /output

New Gallery

Create a new Gallery in subfolder gallery from subfolder source:

thumbsup --input ./source --output ./gallery

MkDocs

MkDocs is a great way to host a simple, static website. This website uses Material for MkDocs. Material for MkDocs is a theme for MkDocs, a static site generator geared towards (technical) project documentation.

Use docker or python to quickly create and host a static website:

Host MkDocs locally with docker

git clone https://github.com/FullByte/FullByte.github.io.git # clone repo
cd FullByte.github.io # Go to main folder
docker run --rm -it -p 8000:8000 -v ${PWD}:/docs squidfunk/MkDocs-material # run the container

Serve MkDocs locally with python

Run this once to install all requirements:

choco install -y python
python -m pip install --upgrade pip
pip install MkDocs
pip install MkDocs-material

Run this in the folder of the MkDocs.yml file to host the MkDocs page:

MkDocs serve

Create page

Overriding template blocks: https://www.mkdocs.org/user-guide/customizing-your-theme/#using-the-theme-custom_dir

Extensions

MkDocs-material is a great theme and comes integrated with the pymkdown extensions, which lets you add tabbed code blocks, progress bars, task lists, keyboard symbols and more.

Further plugins:

Examples

Checkable List

markdown_extensions:
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.tasklist:
      clickable_checkbox: true
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Vestibulum convallis sit amet nisi a tincidunt
    • In hac habitasse platea dictumst
    • In scelerisque nibh non dolor mollis congue sed et metus
    • Praesent sed risus massa
  • Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

md * [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit * [ ] Vestibulum convallis sit amet nisi a tincidunt * [x] In hac habitasse platea dictumst * [x] In scelerisque nibh non dolor mollis congue sed et metus * [ ] Praesent sed risus massa * [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque

Lazy load a picutre:

Placeholder

PHP based static page

Use PHP to create a static HTML website with this code.

Clone the repo and add content to content/, then run php portable.php > index.html