PCHS JROTC Website Preview

PCHS JROTC Website

A content-managed website developed for a hypothetical high school JROTC program. The project demonstrates structured content management, a custom GitHub OAuth authentication workflow, Decap CMS integration, and GitHub Pages deployment to create a maintainable website management system.

Project Overview

This project explores how a static website can be transformed into a maintainable content management system without relying on traditional hosting platforms. Instead of using a server-side framework, the website is deployed through GitHub Pages while content is managed through Decap CMS, authenticated using a custom GitHub OAuth workflow powered by Cloudflare Workers.

The objective was to create a solution that allows instructors and rotating cadet leadership to update announcements, events, leadership information, resources, and gallery images through an intuitive editing interface while preserving the simplicity, performance, and security of a static website.

Objectives

  • Develop a responsive website.
  • Create a maintainable content workflow.
  • Enable non-technical users to manage content.
  • Deploy through GitHub Pages.

Technologies

  • HTML
  • CSS
  • JavaScript
  • Git
  • GitHub
  • GitHub Pages
  • Decap CMS
  • Cloudflare Workers
  • GitHub OAuth

Features

  • Responsive design
  • Announcement management
  • Event management
  • Resource management
  • Leadership profiles
  • Gallery management
  • Media uploads
  • Git-based content workflow
  • Secure GitHub OAuth authentication
  • Static deployment through GitHub Pages

Technical Highlights

Custom GitHub OAuth Authentication

Instead of relying on Netlify Identity or another hosted authentication service, the project implements a custom OAuth workflow using a Cloudflare Worker. The worker authenticates users through GitHub, exchanges authorization codes for access tokens, and securely integrates with Decap CMS.

Structured JSON Content

Website content is organized into dedicated JSON files that separate content from presentation. Each content type is managed independently, simplifying maintenance while reducing duplication throughout the project.

Maintainable Architecture

The website is organized into reusable components with a clear separation between content, styling, and behavior. JavaScript modules dynamically load and render structured content, making future expansion straightforward.

Challenges

  • Building a custom OAuth workflow compatible with Decap CMS.
  • Debugging browser security restrictions during authentication.
  • Designing collections that remained intuitive for non-technical editors.
  • Managing media uploads within a GitHub Pages environment.
  • Creating a maintainable project structure while remaining entirely static.

Outcome

The completed website provides a fully responsive, content-managed solution that demonstrates how modern static hosting platforms can support dynamic editorial workflows. Beyond the website itself, the project also established reusable infrastructure and deployment knowledge that can be applied to future systems built under Sysmake.