Website Field Guide

No experience required · about 60–90 minutes

Build a website.
Publish it for real.

Follow one practical route from your first idea to a live website. Every stage includes exact settings, a visual example, and a clear finish line.

Start at step one See the whole route

The big picture

Four tools, one simple hand-off.

1CodexCreates and edits
2GitHubStores the source
3CloudflarePublishes the site
4Your addressPeople visit it
Step 015 minutes

Get your accounts ready

You need Codex, GitHub, and Cloudflare. A domain is optional and can wait until the website is working.

  • Confirm you can access Codex.
  • Sign in to GitHub in the browser.
  • Sign in to Cloudflare in the browser.
  • Keep passwords and security codes private.
Screenshot 01Accounts and tools readyWe will capture this together when the browser session is ready.
The three services used throughout the guide.
Step 0210 minutes

Describe the website you want

Give Codex a clear name, purpose, audience, sections, style, privacy choice, and preferred web address.

Starter request
Use $reusable-website-workflow to build a website for [purpose]. Project details: [add your name, audience, sections, style, privacy choice, and preferred web address].
Screenshot 02A complete project requestThe finished screenshot will show the prompt and the first response.
A specific request produces a much better first version.
Step 0310 minutes

Create the project files

Codex creates a small, understandable structure. Website files live in public; project instructions stay outside it.

project-name/ ├── PROJECT.md ├── README.md ├── WORKFLOW.md └── public/ ├── index.html ├── styles.css ├── script.js ├── images/ └── pages/
Why this is useful

Cloudflare publishes only the public folder, while planning and operating notes remain out of the public website.

Screenshot 03The finished folder structureCaptured directly from the project when all files exist.
A small structure is easier to maintain.
Step 045 minutes

Open the first local preview

Preview the website before publishing. Check that it looks like the project you requested, rather than an untouched template.

  1. Start the local preview.
  2. Open the address Codex provides.
  3. Keep the preview open while the site is refined.
Desktop preview of the Website Field Guide showing its headline, introductory text, action buttons, and four-stage route card
The local preview lets you review changes before publishing.
Step 0510 minutes

Check the important details

Review the site at desktop and mobile sizes before any files are published.

  • Headings are clear
  • Text is readable
  • Navigation works
  • Buttons work
  • Mobile layout fits
  • Keyboard focus is visible
  • Images have descriptions
  • No private information appears
Desktop layout of the Website Field Guide Desktop
Mobile layout of the Website Field Guide with a compact menu button Mobile
Responsive design should work without zooming or sideways scrolling.
Step 0610 minutes

Create a private GitHub repository

The repository becomes the source of truth for the website.

  1. Choose New repository in GitHub.
  2. Use lowercase words separated by hyphens.
  3. Select Private unless the source should be public.
  4. Create the empty repository.
GitHub repository form showing the website-building-guide name, private visibility, no template, and no automatically added starter files
Use the same project name locally, on GitHub, and in Cloudflare.
Step 075 minutes

Review and publish the source

Review every changed file first. Commit only after approval, then separately approve pushing the commit to GitHub.

Branchmain
First commitInitial website
VisibilityPrivate
Two deliberate approvals

Approval to commit is not approval to push. This keeps you in control of what is recorded and what leaves the computer.

GitHub file list on the main branch showing the public folder and the website project documentation files
GitHub now stores the reviewed source.
Step 0810 minutes

Connect GitHub to Cloudflare Pages

In Cloudflare, create a Pages application, connect GitHub, and select only the repository for this website.

  1. Open Workers & Pages.
  2. Create an application and choose Pages.
  3. Import an existing Git repository.
  4. Select the project repository.
Cloudflare Pages repository selection showing website-building-guide selected and the Begin setup button
Cloudflare watches the selected repository for approved updates.
Step 095 minutes

Use the correct deployment settings

This project has no framework and no build step. Enter these values exactly.

Production branchmain
Framework presetNone
Build commandLeave blank
Build output directorypublic
Root directoryDefault
Cloudflare Pages settings showing project name website-building-guide, production branch main, framework preset None, blank build command, and public output directory
The output directory is public for this project structure.
Step 1010 minutes

Prove automatic publishing works

Make one small, visible change and follow it all the way to the live website.

Request change→Review→Commit→Push→Deploy
Cloudflare Pages success screen showing the website-building-guide project deployed to the global network
Future approved pushes to main follow this same route.
Step 11Optional · 10 minutes

Add your own web address

Once the temporary pages.dev address works, add a memorable custom hostname.

Live addresswebsite-howto.eversden.com
  1. Open the Pages project's custom-domain settings.
  2. Enter the hostname.
  3. Use the exact DNS record Cloudflare requests.
  4. Wait for verification, then test HTTPS.
Cloudflare Pages custom domains screen showing website-howto.eversden.com active with SSL enabled
Never guess DNS values; use the exact target Cloudflare displays.
Step 12Optional · 15 minutes

Protect a private website

Cloudflare Access can require an approved email identity before the custom hostname opens.

  1. Open Cloudflare Zero Trust and Access controls.
  2. Add a self-hosted application.
  3. Enter the custom hostname.
  4. Create an Allow policy for approved people.
  5. Test in a private browser window.
Protect the custom hostname

Do not rely only on the public pages.dev address when the information must remain private.

Cloudflare Access sign-in page for the Website How-To Guide with a blank email field and Send login code button
A private window confirms the policy works for a new visitor.
Step 1310 minutes

Use the workflow from anywhere

Keep one private online master copy in GitHub, install the Codex skill on each computer, and create a private ChatGPT version for browser and mobile access.

Start your next website
Use $reusable-website-workflow to build a website for [purpose].

1. Keep the master copy online

  1. Open the private personal-codex-skills repository in GitHub.
  2. Use the reusable-website-workflow folder as the authoritative copy.
  3. Make future skill changes there first so every computer can receive the same version.
Repositorypersonal-codex-skills
VisibilityPrivate
Master branchmain

2. Install it on another computer

  1. Clone or download the private GitHub repository.
  2. On Windows, copy the complete skill folder into %USERPROFILE%\.codex\skills\.
  3. On macOS or Linux, copy it into ~/.codex/skills/.
  4. Open a new Codex task and use the copyable request above.

3. Use it in ChatGPT on the web or mobile

  1. Open Reusable Website Workflow in ChatGPT.
  2. Sign in with the same ChatGPT account that owns the private GPT.
  3. Start with the conversation button or describe the website you want.
  4. If recreating it in another account, copy chatgpt/INSTRUCTIONS.md into the Instructions field and upload reusable-website-workflow/references/workflow.md as knowledge.
  5. Keep sharing set to Only me.

What the skill remembers

  • Plain HTML, CSS, and JavaScript by default
  • Desktop and mobile testing
  • Browser-captured screenshots
  • Private GitHub repository workflow
  • Separate commit and push approvals
  • Cloudflare Pages deployment
  • Optional custom domain
  • Optional email-code Access
  • Privacy and sensitive-data safeguards
  • GitHub remains the source of truth
Three useful copies

GitHub is the online source of truth; %USERPROFILE%\.codex\skills\reusable-website-workflow\SKILL.md is this computer's installed Codex copy; the private ChatGPT version provides account-accessible use on the web and mobile.

Before you finish

One last calm check.

Open the live site on a computer and phone. Test navigation, links, images, your custom address, and private access if enabled.

When every stage is complete, you have more than a website—you have a repeatable publishing system.

Review from the top ↑