Lab 1A · Building this website

Objective#

Create a blog where lecture homework and practical work can be read online, including explanations of the process.

Approach#

The website was prepared with AI assistance. It began as a small HCI course blog, then expanded into a personal website for Mingyu Zhang, with About, Projects and Coursework as the main sections. The HCI course keeps its own HW1–HW4 and Labs navigation.

Content and design decisions#

The site is in English. Assignments are organised by homework number rather than by a separate list of concepts. HW1 contains six illustrated cases, each connected to the relevant task, with sources and proposed improvements. Reference material is distinguished from personal observations.

The personal site has its own project folder. Its publishable files are separated from the original lecture documents and local editing instructions, so the website can grow to include other courses without turning the HCI material folder into the public site.

Editing approach#

The first static prototype included a local editor that downloaded a modified HTML file. The redesigned version separates the article text into Markdown files and uses the open-source Fuwari theme to generate the website. This keeps the content independent of the visual layout. A visitor can switch between Showcase and Reading views without changing the article.

For revisions, a passage can be selected in Codex’s built-in browser and annotated with a specific request. Codex can then update the corresponding local source. An annotation alone does not publish the change: the website must still be built and the generated files uploaded.

Publishing record#

The original site was published with GitHub Pages at icey000.github.io, using the Icey000.github.io repository. The homepage, stylesheet, HW1 page and an example image were checked online successfully. New revisions are built locally and prepared in the publishing repository. A local copy is not evidence that a particular revision has been pushed or deployed.

Reproducible setup and editing workflow#

The following describes the workflow used for this site with AI assistance. It does not claim I wrote the theme or performed every command independently.

1. Create the publishing repository. My GitHub account is Icey000; the personal-site repository is named Icey000.github.io. Its repository page shows files and history. The GitHub Pages address shows the resulting website.
2. Prepare the theme locally. The site uses the Fuwari source, retaining its MIT license. The source folder contains package.json, source components and content files. Node.js and pnpm provide the build environment, and dependencies are installed with pnpm install.
3. Configure the site. Update the profile, links and navigation. Add About, Projects and Coursework, with numbered homework and a separate Labs index. Keep private lecture materials outside the public site.
4. Write the articles. Edit Markdown files in src/content/pages. The header fields define the title, route and status. For example, lab-blog.md contains this journal. Public illustrations and other assets live under public.
5. Preview changes. A source development preview can be started with pnpm dev. In this workflow, the built site is also served locally for review. Localhost addresses work on the local computer and are not the address to give the instructor.
6. Generate the website. Run pnpm build. This produces the publishable HTML, styles, scripts, images and search index in dist. Successful builds have been checked along with navigation and image loading.
7. Prepare the upload. Copy the contents of dist into the local Icey000.github.io repository, with index.html at the publishing root. The existing repository is backed up before synchronisation. Preserve its Git metadata. Uploading only an HTML file would omit the assets it needs.
8. Publish and verify each revision. Review changes in GitHub Desktop, commit them, then push to GitHub. GitHub Pages must use the intended publishing branch and folder. After deployment, open the public URL and check the changed article and images. This final check must be repeated after publishing a new revision.

What I needed to understand#

At first I confused the GitHub repository page with the published homepage, and the source project with the files to upload. The useful distinction is now: Markdown and theme files are edited locally; the build produces dist; the publishing repository holds that generated output; GitHub Pages serves it to visitors.

This also explains why uploading a ZIP archive alone does not publish the website, and why keeping a source backup matters: editing generated HTML would lose changes the next time the source is rebuilt.

Remaining checks#

• Review draft content and add the required personal observations.
• Review the redesigned layout and practise editing a Markdown article.
• Publish the reviewed redesign and open it in a signed-out browser.
• Check navigation, images and the direct HCI course link.