Your starter files

.forgejo/workflows/deploy.yml

@@ -0,0 +1,60 @@
+# Publishes this site when you push to main.
+#
+# You do not need to change anything in here. It runs on the class server,
+# copies your files to the web, and your page is live in about a minute.
+name: Deploy my site
+
+on:
+  push:
+    branches: [main]
+  # Lets you re-run a deploy from the web UI without making a commit —
+  # useful when a deploy failed for a reason that wasn't your code.
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: docker
+    steps:
+      - name: Get my files
+        uses: actions/checkout@v4
+
+      - name: Install the AWS tool
+        run: |
+          apt-get update -qq
+          apt-get install -y -qq awscli
+
+      - name: Check there is a home page
+        run: |
+          if [ ! -f index.html ]; then
+            echo "::error::No index.html in the top folder — the site would 404."
+            echo "Your home page must be called exactly index.html (all lowercase)."
+            exit 1
+          fi
+
+      - name: Copy my site to the web
+        env:
+          # These come from this repo's own secrets and are yours alone. They
+          # can only write to your folder — if you point them somewhere else
+          # the copy is refused, by design.
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_DEFAULT_REGION: us-east-1
+          STUDENT: ${{ github.repository_owner }}
+        run: |
+          if [ -z "$AWS_ACCESS_KEY_ID" ]; then
+            echo "::error::This repo has no deploy key. Ask Mr. W to run provision-deploy-keys.sh."
+            exit 1
+          fi
+          aws s3 sync . "s3://classproject-dev-student-sites/${STUDENT}/" \
+            --delete \
+            --exclude ".git/*" \
+            --exclude ".forgejo/*" \
+            --exclude ".vscode/*" \
+            --exclude "README.md" \
+            --cache-control "public, max-age=60" \
+            --no-progress
+
+      - name: Show my address
+        run: |
+          echo "Live at https://${{ github.repository_owner }}.classproject.dev"
+          echo "(give it up to a minute)"

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.linkedEditing": true,
+  "css.lint.boxModel": "warning",
+  "css.lint.duplicateProperties": "warning",
+  "css.lint.important": "warning",
+  "css.lint.propertyIgnoredDueToDisplay": "warning",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true
+}

README.md

@@ -0,0 +1,42 @@
+# My website
+
+Live at **https://__STUDENT__.classproject.dev**
+
+## Working on it in class
+
+```bash
+git clone https://git.classproject.dev/__STUDENT__/site.git
+cd site
+```
+
+Then every time you change something:
+
+```bash
+git add .
+git commit -m "say what you changed"
+git push
+```
+
+About a minute after you push, your live page updates. You can watch it
+happen under **Actions** on the repo page.
+
+## Working on it at home
+
+You don't need your class laptop. Go to
+**https://git.classproject.dev/__STUDENT__/site**, sign in, click a file,
+and click the pencil to edit it. Commit at the bottom of the page. That
+counts as a push, so your site updates the same way.
+
+## Files
+
+| File | What it is |
+|---|---|
+| `index.html` | Your home page. Must keep this exact name. |
+| `style.css` | How the page looks. |
+| `images/` | Put pictures here. |
+
+## If something breaks
+
+Your page has to be called `index.html`, all lowercase, in the top folder.
+File names should be lowercase with hyphens: `my-cat.jpg`, not `My Cat.JPG`.
+The web is fussy about capital letters in a way your laptop is not.

index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Change this to your page title</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <header>
+    <!-- Your big heading goes here. Use an <h1> tag. -->
+    <h1>This page is a starting point</h1>
+  </header>
+
+  <main>
+    <!-- Your writing goes here. Use <p> tags for paragraphs. -->
+    <p>
+      Everything on this page is text in a file. Change the text, save the
+      file, and it changes. That is the whole trick.
+    </p>
+
+    <!-- A list goes here. Use <ul> and <li>. -->
+
+    <!-- A picture goes here. Use <img src="images/something.jpg" alt="...">
+         and put the picture in a folder called images. -->
+  </main>
+
+  <footer>
+    <!-- Your name, or whatever you want at the bottom. -->
+    <p>Built from scratch.</p>
+  </footer>
+
+</body>
+</html>

style.css

@@ -0,0 +1,42 @@
+/* ---------------------------------------------------------------------------
+   This top block is set up for you. Leave it alone and everything below it
+   will behave sensibly.
+
+   box-sizing: border-box makes padding and borders count INSIDE an element's
+   width instead of getting added on top. The default does the opposite, which
+   means the arithmetic never works out and you spend an hour wondering why
+   your boxes are too wide.
+--------------------------------------------------------------------------- */
+html { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: inherit; }
+
+img { max-width: 100%; height: auto; }
+
+
+/* ---------------------------------------------------------------------------
+   Your styles start here. Change anything.
+
+   One habit worth keeping: use max-width, not width. A page is responsive by
+   default — a fixed width is what breaks it on a phone.
+--------------------------------------------------------------------------- */
+
+body {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.6;
+  max-width: 40rem;      /* not width */
+  margin: 0 auto;
+  padding: 2rem 1.25rem;
+  color: #1a1a1a;
+  background: #fdfdfb;
+}
+
+h1 {
+  font-size: 2rem;
+  line-height: 1.2;
+}
+
+a {
+  color: #2b5eaa;
+}
+
+/* Try changing a colour and pushing. Watch your live page change. */