Kunda

Pics Gallery Site - Configuration & Modifications

Site Overview

Repository: https://github.com/netdesignate/pics
Technology: Hugo Static Site Generator
Domain: https://pics.moonpooli.us/
DNS: Managed via Cloudflare

Server Locations

DEV Server: hobbit (192.168.50.70)

  • Path: ~/web/pics
  • Used for development and testing

PROD Server: moruya (192.168.50.68)

  • Path: /var/www/pics.moonpooli.us/public
  • Live production site

Password Protection Implementation

Overview

The NatalieBateman album contains copyrighted content and has been secured with password protection and navigation isolation.

Files Modified

1. Album Configuration

File: content/NatalieBateman/index.md

Added two front matter parameters:

private: true      # Hides album from navigation menus
protected: true    # Removes all navigation from the album page

2. Header Navigation

File: layouts/partials/header.html

Modified to hide navigation elements on protected pages:

  • Site title becomes non-clickable text on protected pages
  • Hamburger menu completely hidden on protected pages
  • All other pages retain full navigation

Key change: Wrapped navigation in conditional {{ if not .Params.protected }}

3. Breadcrumb Navigation

File: layouts/partials/breadcrumb.html

Wrapped entire breadcrumb navigation in conditional to hide on protected pages:

{{ if not .Params.protected }}
<nav class="w-full">
  <!-- breadcrumb content -->
</nav>
{{ end }}

4. Search Engine Blocking

File: static/robots.txt (created)

User-agent: *
Disallow: /nataliebateman/

5. Site Configuration

File: hugo.toml

Updated URLs from cityethics.org to moonpooli.us:

  • baseURL = "https://pics.moonpooli.us/"
  • website = "https://www.moonpooli.us"

nginx Password Protection (Production Only)

Configuration Location

Server: moruya (192.168.50.68)
File: /etc/nginx/sites-available/pics.moonpooli.us

nginx Configuration Block

location /nataliebateman/ {
    auth_basic "Restricted Album - Please Log In";
    auth_basic_user_file /etc/nginx/.htpasswd_natalie;
}

Password File

Location: /etc/nginx/.htpasswd_natalie
Created with: sudo htpasswd -c /etc/nginx/.htpasswd_natalie donmc

Applying nginx Changes

# After editing nginx config
sudo nginx -t                    # Test configuration
sudo systemctl reload nginx      # Apply changes

Git Workflow

Branch Structure

All password protection changes were made on feature branch:

git checkout -b feature/password-protection

Merging to Main (if not already done)

git checkout main
git merge feature/password-protection
git push origin main

.gitignore Additions

*.backup

Image Management

Fixing Sideways Images

Images sometimes display sideways due to EXIF orientation metadata. Fix by applying rotation to actual pixels:

# Navigate to album directory
cd ~/web/pics/content/[AlbumName]/

# Fix single image
mogrify -auto-orient image.jpg

# Fix all images in directory
mogrify -auto-orient *.JPG

# Return to project root
cd ~/web/pics

# Rebuild (regenerates all thumbnails)
hugo --cleanDestinationDir

# Deploy
rsync -avz --delete public/ [email protected]:/var/www/pics.moonpooli.us/public/

Note: mogrify overwrites original files. The -auto-orient flag reads EXIF data and physically rotates pixels to match, ensuring correct display everywhere.

Development Workflow

Local Development

cd ~/web/pics

# Start development server
hugo server           # Excludes drafts
hugo server -D        # Includes drafts

# Access at: http://localhost:1313/

Building for Production

cd ~/web/pics

# Clean build
hugo --cleanDestinationDir

# Deploy to production
rsync -avz --delete public/ [email protected]:/var/www/pics.moonpooli.us/public/

Full Deployment Checklist

  1. Make changes on hobbit (dev)
  2. Test with hugo server
  3. Commit to git
  4. Push to GitHub
  5. Build: hugo --cleanDestinationDir
  6. Deploy: rsync -avz --delete public/ [email protected]:/var/www/pics.moonpooli.us/public/
  7. Test production site
  8. If nginx changes needed, apply on moruya server

Adding More Protected Albums

To protect additional albums:

1. Update Album Front Matter

---
title: Album Title
private: true      # Add this
protected: true    # Add this
# ... rest of front matter
---

2. Add nginx Location Block

On moruya server, edit /etc/nginx/sites-available/pics.moonpooli.us:

location /album-slug/ {
    auth_basic "Restricted Album - Please Log In";
    auth_basic_user_file /etc/nginx/.htpasswd_albumname;
}

3. Create Password File

sudo htpasswd -c /etc/nginx/.htpasswd_albumname username
sudo nginx -t
sudo systemctl reload nginx

4. Update robots.txt

Add to static/robots.txt:

Disallow: /album-slug/

Security Features Summary

When an album is marked as private: true and protected: true:

✅ Hidden from navigation - Won’t appear in menus
✅ No site title link - “Kunda” becomes non-clickable text
✅ No breadcrumb - Home icon and path completely removed
✅ No menu button - Hamburger menu hidden
✅ Password required - nginx Basic Auth at server level
✅ Crawler blocked - robots.txt exclusion

Users can only access protected albums by:

  1. Knowing the direct URL
  2. Entering correct username/password
  3. No way to navigate to other albums once inside

Troubleshooting

Browser Cache Issues

If changes don’t appear after deployment:

Firefox:

  • Hard refresh: Ctrl + Shift + R
  • Or: Ctrl + Shift + Delete → Clear “Cache” and “Cookies”
  • Try private window to verify: Ctrl + Shift + P

Chrome:

  • Hard refresh: Ctrl + F5 or Ctrl + Shift + R
  • Or: DevTools (F12) → Network tab → Check “Disable cache”

Hugo Build Issues

# Clean everything and rebuild
rm -rf public/ resources/
hugo --cleanDestinationDir

nginx Password Not Working

# Verify password file exists
ls -la /etc/nginx/.htpasswd_natalie

# Check nginx config
sudo nginx -t

# View nginx error log
sudo tail -f /var/log/nginx/error.log

# Recreate password if needed
sudo htpasswd -c /etc/nginx/.htpasswd_natalie donmc
sudo systemctl reload nginx

Images Still Sideways After Rotation

# Ensure you're rotating the source, not the generated files
cd ~/web/pics/content/[AlbumName]/
mogrify -auto-orient *.JPG

# Must rebuild with clean flag
cd ~/web/pics
hugo --cleanDestinationDir
rsync -avz --delete public/ [email protected]:/var/www/pics.moonpooli.us/public/

Important Notes

What Goes in Git vs Server-Only

Committed to Git:

  • All Hugo template changes
  • Album front matter modifications
  • Site configuration (hugo.toml)
  • robots.txt
  • Documentation

Server-Only (NOT in Git):

  • nginx configuration files
  • Password files (.htpasswd)
  • SSL certificates
  • Server-specific paths

Cloudflare Console Warnings

You may see CORS warnings in browser console related to Cloudflare’s analytics beacon. These are harmless and don’t affect functionality. They can be ignored or filtered out in DevTools.

Quick Reference Commands

# Development
cd ~/web/pics
hugo server                    # Start dev server
git status                     # Check changes
git add [files]                # Stage changes
git commit -m "message"        # Commit
git push                       # Push to GitHub

# Production Deployment
hugo --cleanDestinationDir     # Build
rsync -avz --delete public/ [email protected]:/var/www/pics.moonpooli.us/public/

# Image Rotation
cd ~/web/pics/content/[album]/
mogrify -auto-orient *.JPG

# nginx (on moruya)
sudo nginx -t                  # Test config
sudo systemctl reload nginx    # Apply changes
sudo htpasswd -c /path user    # Create password

Contact & Support

Site Owner: Don McClintock
Email: [email protected]
Website: https://www.moonpooli.us

Repository: https://github.com/netdesignate/pics
Hugo Documentation: https://gohugo.io/documentation/:wq