Other Worlds

This is the website for the Other Worlds Zine Collective. Every May we hold an annual zine fair in Sydney. We also run quarterly postal subscription service.

This website uses hons-static-site-generator.

General workflow

All source files are placed in /src. When you run gulp develop these files are processed and placed into /dev. The files in /dev can be read by your browser.

Out of the box, gulp develop does several things:

• Watches any changes in /src and processes these changes to /dev
• Converts the original tailwind.css file to a browser-legible .css file.
• Adds any necessary browser prefixes to the .css file so it is compatible on all browsers
• Converts and collates the .njk files to browser-legible .html files
• Creates folders based on these html file names and then renames them to index.html
• Copies any javascript files
• Copies any fonts
• Processes all images to various sizes to enable lazy loading and responsive images

When development has finished a gulp production command runs a series of scripts that processes all the /dev files and places them into /public. /public is the final, production ready site.

gulp production does several things to get the files production ready:

• Runs PurgeCSS to get rid on any unwanted CSS
• Minimises CSS to make it as lean as possible
• Minimises and uglifies javascript files
• Copies all fonts
• Copies all images

Directory tree and file structure

The directory tree looks like this

src (this holds all source files)
|   |– img
|   |– scripts
|   |– styles
|   |– templates (this holds .njk files which correspond to its .html page)
|      |– partials (this holds the .html templating blocks)
|
dev (this holds all development files)
|   |– img
|   |– scripts
|    |– styles
|
public (this is production ready code)
|    |– img
|    |– scripts
|    |– styles

Geting started

These instructions are for getting the project running on a local development environment.

System requirements

• NodeJS v12.16.3
• Gulp

Install plugins

Install all the necessary plug-ins by running npm install in the root of the project folder.

Run your first build

gulp develop

Where to work

You should always be working from /src.

Common commands

Development

• gulp development processes and watches all /src files and puts them into /dev.

  • gulp css processes .css files in /dev.
  • gulp html processes .njk files in /src and converts them to .html and places them in /dev.
  • gulp scripts processes .js files in /src and places them in /dev.
  • gulp watchTask watches any changes in /src and runs the necessary script.

Production

• gulp production processes and watches all /dev files and puts them into /public.

  • gulp cssProduction processes .css files in /dev.
  • gulp scriptsProduction uglifies all .js files in /dev

Optional plug-ins

There is another branch of this project called 'optionals'. This branch contains the following optional plugins:

• SwupJS for animated page transitions
• gulp-responsive for making multiple resolutions of images
• LazySizes for lazy loading images
• gulp-rename for renaming files and directory paths. This is used for renaming html files to index.html and placing them in a folder named after the original filename.