Website

This website uses the following open source tools:

• Zola static website generator
• shallz's Zola Deploy GitHub Action
• Tailwind CSS framework
• Prettier code formatter
• npm NodeJS package manager
• nvm NodeJS version manager

Repository Contents

• content/
  • Website content written in Markdown
  • Directory structure corresponds to structure used on website
    • content/blog.md served at https://a-gavin.github.io/blog/
    • content/blog/bitmagic.md served at https://a-gavin.github.io/blog/bitmagic/
• static/
  • Website static content, including CSS and images.
• templates/
  • Templates used for website content
  • partials/ contains partial templates allowing for reuse in other templates
  • post.html is used for all blog posts

Development Setup

1. Install Zola (static website generator)

   • Follow the Zola install guide

2. Install npm (via nvm)

   • Follow the nvm install guide

   • After installing nvm, run:

     # Install NodeJS v22
     nvm install v22
     
     # Redundant, but just for reference
     nvm use v22

3. Install required node packages

   npm install

4. Generate tailwind CSS from config

   NOTE: To update CSS, make sure to regenerate using following command and manually check the updated CSS in.

   # Zola looks for CSS and favicon in './static/' by default
   # Add '--watch' to run in the background if not using editor Tailwind plugins
   npx tailwindcss -i ./static/app.css -o ./static/main.css

5. Serve webpage locally

   # The 'shalzz/zola-deploy-action' GitHub action generates
   # the required directory structure for hosting on GitHub Pages
   # by running on all pushes to main.
   zola serve

Reference npm Commands

# List both development and production dependencies
npm list

# List only production dependencies
npm list --omit=dev -depth 0

# List only development dependencies
npm list --include=dev -depth 0

# Install and add new dependency to tracked packages
# Add '--save-dev' to install as development dependency
npm install $PKG_NAME@$PKG_VERSION