Skip to main content
The MilesONerd website is organized as a static HTML site with a clean, modular structure designed for easy maintenance and deployment.

​
Directory Tree

milesonerd.github.io/
├── .github/
│   └── workflows/          # GitHub Actions automation
│       ├── deploy.yml
│       ├── docker.yaml
│       └── update-copyright.yml
├── assets/
│   ├── image/
│   │   ├── Logo/           # Site logo files
│   │   └── favicon/        # Favicon in multiple sizes
│   └── scripts/
│       ├── functions.js    # Core JavaScript utilities
│       └── quotes.js       # Random quote generator
├── dist/
│   └── _headers            # CORS configuration
├── old/
│   ├── blog/
│   │   ├── index.html
│   │   ├── posts/          # Markdown blog posts
│   │   └── scripts/
│   │       └── list-posts.js
│   ├── about.html
│   ├── contact.html
│   ├── index.html
│   └── styles.css
├── policies/
│   ├── cookies.html
│   └── privacy.html
├── terms/
│   └── service.html
├── license/
│   └── cc-by.html
├── 404.html
├── accessibility.html
├── index.html
├── robots.txt
└── LICENSE

​
Core Directories

assets/

Contains all static resources including images, scripts, and potentially styles. Organized into image/ and scripts/ subdirectories for clean separation of concerns.

old/

Legacy version of the website including the blog system. Contains previous iterations of about, contact, and index pages with their own styling.

policies/

Legal and privacy documentation including cookies policy and privacy policy pages.

.github/workflows/

GitHub Actions automation workflows for deployment, Docker builds, and automated copyright updates.

​
Key Files

​
Root-Level HTML Pages

The main homepage featuring:
  • Tailwind CSS for styling
  • Font Awesome icons
  • Google Analytics and Tag Manager integration
  • Open Graph and Twitter Card metadata
  • Random quote rotator
  • Responsive design with mobile-first approach
Located at: ~/workspace/source/index.html
Custom error page displayed when users navigate to non-existent URLs. Maintains site branding and provides navigation back to main pages.Located at: ~/workspace/source/404.html
Dedicated accessibility statement page documenting the site’s commitment to web accessibility standards and compliance.Located at: ~/workspace/source/accessibility.html

​
JavaScript Files

1

functions.js

Core utility functions including the addLoadEvent() helper that ensures multiple JavaScript functions can safely execute on page load.Path: assets/scripts/functions.js
2

quotes.js

Powers the random quote feature with 185+ quotes from movies, games, and pop culture. Includes automatic rotation on page load and manual refresh capability.Path: assets/scripts/quotes.js
3

list-posts.js

Blog post loader for the legacy blog system. Uses Showdown.js to convert Markdown to HTML and fetches posts from GitHub API.Path: old/blog/scripts/list-posts.js

​
Configuration Files

robots.txt: Search engine crawler directives controlling which pages are indexeddist/_headers: CORS headers configuration for GitHub Pages deploymentLICENSE: MIT License file for the repository

​
Asset Organization

​
Images

The assets/image/ directory contains:
  • Logo/: Site branding including the Phoenix logo (Phoenix.jpg)
  • favicon/: Multiple favicon sizes for different devices and contexts
    • favicon.ico (legacy)
    • favicon-16x16.png
    • favicon-32x32.png
    • Additional sizes for mobile and high-DPI displays

​
Scripts

All JavaScript is organized in assets/scripts/: 
assets/scripts/
├── functions.js    # 281 bytes - Utility functions
└── quotes.js       # 15.6 KB - Quote database and rotator
The website uses a combination of inline scripts (for analytics) and external JavaScript files (for features). This approach balances performance with maintainability.

​
Blog System Structure

The legacy blog system in the old/blog/ directory uses a dynamic approach:
  1. Markdown Storage: Blog posts stored as .md files in old/blog/posts/
  2. GitHub API: Fetches post list from repository via GitHub API
  3. Client-Side Rendering: Showdown.js converts Markdown to HTML in the browser
  4. Dynamic Loading: Posts load without page refresh using async JavaScript
The blog system references the update-urls branch specifically in the API calls. Ensure this branch exists and is up-to-date for the blog to function properly.

​
Deployment Structure

The dist/ directory contains deployment configuration: 
dist/_headers
This file configures CORS headers for all routes: 
/*
  Access-Control-Allow-Origin: *
  Content-Type: application/json
The wildcard CORS policy allows the site’s resources to be accessed from any origin, which is necessary for the blog’s GitHub API integration.

​
Version Control

The .github/workflows/ directory contains three automated workflows:
  • deploy.yml: Handles deployment to GitHub Pages
  • docker.yaml: Docker containerization workflow
  • update-copyright.yml: Automated annual copyright year updates
See Deployment for detailed information on these automation workflows.

Build docs developers (and LLMs) love

Get started for freeTalk to us