how to make zines into websites

Motivation

I like making little tiny quarter page zines. I made a friend name Marie LeBlanc at the Open Source Hardware Conference in 2024 who was doing this at a party. I loved the idea so I’ve also been doing it at parties. I always want to share them with people after the fact, but its hard to do that since they are 8 pages long (taking pictures and then texting or email is annoying).

I decided to make a website that could showcase them. I found out about this rad Electric Zine Maker tool which is printshop and art tool for making zines (with a computer) and this cool tool called the EZM Reader that turns zines you make with that into little websites. Since I am making mine by hand, I haven’t used the Electric Zine Maker, but I have used the EZM Reader to take my images and make a nice little display for the zines. This is my pipeline and a script made to take your images and put em into a site eazy peasy.

Example

live site of the zines

Overview

  • use cam scanner to take photos of the zine
    • use Book mode so you can do 2 pages at once
  • share them as Images and email to yourself
  • extract them and put them in the Zines folder
  • run this script I made! (with a lot of help from Prof. AI Coder!)
    • it asks you to type in the name of the folder and the Title of the site (this title will be used for the main link list archive site as well as the title for the web page)
    • the script will copy the Prototype folder (which has the bare bones index.html and javascript file)
    • rename the images and put them in the right folder
    • makes a small favicon type image of the front cover to use as icon
      • this is also used in the archive site
    • adds your zine site to the archive site with a photo of the cover by it

The Script

#!/bin/bash

# Enable strict error handling
set -euo pipefail

# Prompt the user for the folder name
read -p "whats the name of the folder: " folder_name

# Replace spaces with underscores in the folder name
folder_name="${folder_name// /_}"

# Prompt for Title
read -p "whats the title for your new zine (no slashes!): " title

# Debugging output
echo "Folder name: $folder_name"
echo "Title: $title"

# Define base paths
base_path="/c/Users/moogtron 4k/Desktop/freakylamps website/httpdocs/zines"
prototype_folder="$base_path/prototype"
new_folder_path="$base_path/$folder_name"

# Create a new folder by copying the prototype folder
if cp -r "$prototype_folder" "$new_folder_path"; then
    echo "Copied prototype folder to $new_folder_path"
else
    echo "Failed to copy prototype folder. Exiting."
    exit 1
fi

# Construct the path to the pages directory
pages_path="$new_folder_path/pages"

# Check if pages directory exists
if [ ! -d "$pages_path" ]; then
    echo "Pages directory does not exist. Exiting."
    exit 1
fi

# Update index.html placeholders with the new folder name
index_file="$new_folder_path/index.html"  # Corrected path to index.html
if [ -f "$index_file" ]; then
    sed -i "s/xyxyxy/$title/g" "$index_file"
else
    echo "index.html not found in $new_folder_path. Exiting."
    exit 1
fi

# Change to the directory containing images (the script's location)
cd "$(dirname "$0")" || { echo "Failed to change directory to script location"; exit 1; }

# Move all JPG files into the pages directory
echo "Moving all JPG files to $pages_path..."
for file in *.jpg; do
    if [[ -f "$file" ]]; then
        mv "$file" "$pages_path/"
        echo "Moved $file to $pages_path/"
    else
        echo "No JPG files found in current directory."
    fi
done

# Define an array of new names for images
new_names=("FRONT" "INNERFRONT" "1" "2" "3" "4" "5" "BACK")

# Initialize counter for renaming process
count=0

# Loop through each JPG file in the pages directory and rename them
cd "$pages_path" 
echo "Now in pages folder"

for file in *.jpg; do
    if [[ -f "$file" ]]; then
        # Check if we have enough names in new_names array
        if [[ $count -lt ${#new_names[@]} ]]; then
            new_file="${pages_path}/${new_names[count]}.jpg"
            echo "Renaming file: $file to $new_file"

            # Rename the JPG file using the corresponding new name from new_names array.
            mv "$file" "$new_file"
            count=$((count + 1))
        else
            echo "No more names available in new_names array for renaming. Skipping $file."
        fi
    else
        echo "No JPG files found in $pages_path."
    fi
done

# Resize FRONT.jpg and create FRONTsmall.jpg if it exists.
if [[ -f FRONT.jpg ]]; then
    magick FRONT.jpg -resize 100x100 FRONTsmall.jpg || { echo "Failed to create FRONTsmall.jpg"; exit 1; }
else
    echo "FRONT.jpg does not exist, skipping resizing."
fi

# Update index.html to point to FRONTsmall.jpg using absolute path.
if [ -f "$index_file" ]; then
    sed -i "s|path_to_image|https://freakylamps.com/zines/$folder_name/pages/FRONTsmall.jpg|g" "$index_file"
else
    echo "index.html not found for updating image path. Exiting."
    exit 1
fi
# Append new entry to /zines/index.html with title and image link.
zines_index_file="$base_path/index.html"
if [ -f "$zines_index_file" ]; then
    
    # Create a temporary file to store changes.
    temp_file=$(mktemp)

    # Read through zines_index_file and write changes.
    while IFS= read -r line; do
        
        # Debugging output to see each line
        # echo "Reading line: $line"  # This will print each line being read

        # Check for the comment indicating where to add the new link
        if [[ "$line" == *"// add new link here"* ]]; then
            
            # Write current line from original file.
            echo "$line" >> "$temp_file"
            
            # Add new entry immediately after this line.
            echo "{ text: \"$title\", image: \"$folder_name/pages/FRONTsmall.jpg\", url: \"$folder_name/\" }," >> "$temp_file"
            
            continue  # Skip to the next iteration
        fi
        
        # Write current line from original file.
        echo "$line" >> "$temp_file"
        
    done < "$zines_index_file"

    # Move temp file back to original index file.
    mv "$temp_file" "$zines_index_file"

else
    echo "/zines/index.html not found. Exiting."
    exit 1
fi

echo "Image processing completed successfully."

Leave a Comment