Tutorial 1 — Choosing an Architecture

Where This Approach Came From

This learning path has its origins on a sun lounger in Kefalonia in the summer of 2024.

The challenge was straightforward: could someone with photographs, an iPhone and very little contemporary web-development experience build and publish their own photography website?

Two existing technologies quickly became central to the answer. The first was Bootstrap.

Bootstrap had been brought to the conversation because of an affection for Twitter in its earlier days and an awareness of the open-source framework that had emerged from the company. Rather than creating every element of a website from scratch, why not build on a mature framework that thousands of developers had already contributed to?

The second was GitHub.

GitHub was initially a less obvious choice. It is widely associated with software developers and source code, but GitHub Pages provides something particularly interesting for a project like this:

That combination gave the project its basic architecture. Two years later, despite considerable changes to the website and enormous changes in AI tooling, that original architectural decision still stands.

Let's build it from first principles.

1Start with the Simplest Thing That Can Work

Before choosing technologies, define what the website actually needs to do.

Those requirements would change the architectural decision. But if the browser simply needs to display pages, text and photographs, a static website is worth considering.

2What Is a Static Website?

At its simplest, a web page is an HTML file. For example:

index.html

contains the structure and content of the homepage. A small website might consist of:

index.html
gallery.html
blog.html
about.html
contact.html

images/
css/
scripts/

When somebody visits the website, their browser requests one of those files and displays it. There is no database generating the page behind the scenes and no content-management system assembling it before it reaches the visitor. The files are the website.

Why is that useful?

Static websites can be fast, cheap to host, relatively secure, easy to back up, easy to understand and highly portable. They also give you direct ownership of the files that make up the site.

What is the trade-off?

Static HTML is not ideal for every website. As a site becomes larger, changing something repeated across dozens or hundreds of pages can become cumbersome. More sophisticated websites may benefit from templates, content-management systems or frameworks that generate pages automatically.

For a small photography website, static HTML gives us an excellent starting point.

3Use Bootstrap Rather Than Reinventing the Web

Static HTML gives us pages, but it doesn't automatically give us an attractive, responsive website. This is where Bootstrap comes in.

Bootstrap began as an internal project at Twitter and was released publicly as an open-source project in 2011. It provides reusable CSS and JavaScript components for common website requirements, including navigation bars, buttons, cards, grids, forms, responsive layouts and collapsible mobile menus.

Instead of designing all of these components from scratch, we can use established Bootstrap patterns.

Why use an open-source framework?

A great deal of modern software development involves assembling and adapting reliable components created by others. Open source allows developers to share those components, inspect them, improve them and build upon them.

For someone learning web development with AI assistance, this is particularly useful. Rather than asking an AI:

That gives both the human and the AI a common language.

4How Will We Use Bootstrap?

You do not need to download Bootstrap or install development tools to begin. Bootstrap can be referenced from a Content Delivery Network (CDN).

In practice, this means adding references to Bootstrap's CSS and JavaScript to the HTML page. Conceptually, the page becomes:

HTML page
   │
   ├── Bootstrap CSS
   ├── Your content
   └── Bootstrap JavaScript

The Bootstrap documentation provides the current CDN references and starter templates. In Tutorial 2 — Bootstrap Fundamentals, we'll do this properly and build our first Bootstrap structure.

5Store the Website in GitHub

We now need somewhere to keep the website files. This is where GitHub enters the architecture.

GitHub stores software projects in repositories. For our purposes, a repository can simply be thought of as the home for all the files that make up the website.

Photography Website Repository
│
├── index.html
├── gallery.html
├── blog.html
├── about.html
├── contact.html
│
├── images/
├── css/
└── scripts/

But GitHub does considerably more than store files. It keeps a history of changes. That means if something goes wrong, you can see what changed and potentially return to an earlier version.

Later in this learning path, GitHub will also allow us to use branches, pull requests, change reviews and Codex. This becomes increasingly valuable as the website grows.

6Publish the Website with GitHub Pages

Storing a website and publishing a website are normally two different things. This is where GitHub Pages makes our architecture unusually simple.

GitHub Repository
       │
       ▼
  GitHub Pages
       │
       ▼
   Live Website

For a suitable public repository, this can be done without paying for conventional web hosting. That was one of the most surprising discoveries at the beginning of this project in 2024: the same platform storing the website's source files could also publish those files to the web.

For a personal photography site, that removes an entire layer of infrastructure. You can also connect your own domain later, so visitors do not need to know that GitHub Pages is involved at all.

We'll configure this step by step in Tutorial 3 — Setting Up GitHub Pages.

7Where Does ChatGPT Fit?

So far, everything described could be done without AI. That's important.

ChatGPT can act as a combination of tutor, design partner, code generator, troubleshooter and reviewer. Instead of learning HTML, CSS and Bootstrap completely before starting, we can learn them when they become relevant.

For example, rather than spending weeks studying Bootstrap before creating anything, we might ask:

Then review the result. Ask questions. Change one thing. See what happens.

This is the approach we'll use in Tutorial 4 — Working with ChatGPT.

8Where Does Codex Fit?

ChatGPT is particularly useful for learning, discussing ideas and refining what you want to build. Codex takes the next step: it works with an authorised GitHub repository as a codebase.

Codex works on a copy of that repository in an isolated environment. There it can inspect the project structure, understand relationships between files, edit several files, and run validation commands or tests. It can then commit the proposed changes so they can be opened as a GitHub pull request.

A pull request is not automatic approval. It gives the human owner a clear place to inspect the changes, see validation results, request revisions, or reject the work before deciding whether to merge it.

A Small DevOps Loop

This workflow introduces several fundamental DevOps practices:

• Source control — GitHub is the source of truth.
• Small changes — work is divided into focused changes rather than large releases.
• Pull requests — proposed changes are visible and reviewable before merge.
• Automated validation — scripts and tests can run before publication.
• Human approval — automation assists delivery without removing governance.
• Continuous delivery — after approved changes are merged, GitHub Pages can publish the updated static site.

DevOps is not simply a deployment tool or automation platform. It is a way of shortening the feedback loop between an idea and what you learn after releasing it.

We'll explore the Codex workflow properly in Tutorial 5 — Working with Codex.

9Put the Architecture Together

We can now see the complete picture.

Each component has a clear responsibility.

HTML

provides the page structure and content.

Bootstrap

provides responsive layouts and reusable components.

GitHub Repository

provides source control and remains the source of truth.

ChatGPT

supports learning, planning, explanation and iterative design.

Codex

provides repository-aware implementation, validation and pull-request changes.

Pull Request

provides the review and governance checkpoint before merge.

GitHub Pages

publishes and hosts the merged static site.

Human

defines the intent, reviews the proposal and approves or rejects changes.

10Why This Architecture?

Before moving on, let's test the architecture against our original requirements.

It is deliberately uncomplicated. That is a feature, not a deficiency.