CSE-461 Spring'25
Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode

Project 3 Alternative: Build an End-to-end personal website

Turnin: Online via Gradescope
Teams: None, solo!
Due: June 6, 2025 @ 11PM PT. ** Note:** This project is individual. If you plan to do it, make sure to coordinate with your team members to ensure they have a plan for their own project 3 (either working without you or finding new team members).

Overview

In this project you will setup and build your own personal website complete with a full top-level domain (tld) and valid certificate. This project is an optional replacement for project 3 that does require some money to be spent (cloudflare offers tlds for $5 a year, but other more expensive options may be to your taste) and the course will not be offering any support.

Background

Introduction

In this project we will explore and end-to-end development an deployment of a modern personal website.

Goals

  • Learn first-hand the dynamics of the DNS and Certificate ecosystems.

  • Develop a usable personal website for your future career.

Part 1: Setup a gitlab page or equivalent

The first step of the project is to create a web serving engine for your project. Though many (MANY) solutions exist, including such heavy-weight answers such as running a webserver on cloud like AWS and coding stuff locally, that’s not really the point of the assignment. Instead, we suggest you use a static site generator (e.g, Jkyll) on github pages(instructions available in link). We strongly suggest using github pages as we will best be able to assist in solutions using the platform. Whatever you do, make sure to use modern source control techniques to document your development process. You’re welcome to use templates or AI engines (see below) as long as the choices and outcomes are documented and visible.

Requirements:

An esthetically pleasing website detailing yourself; classes taken, CV perhaps, class projects, something advertising yourself and your work to the world. Given esthetics are highly variable, the TAs will grade this based on their own judgement; feel free to check in with us and your peers. In short, it needs to look like you tried.

Part 2: Set up a Top-level domain (TLD) for your site

Github pages by default uses your username as part of their domain name: something like https://username.github.io. While this is normally fine, we’d like you to get a little fancier. Find a TLD that fits what you’d like and modify your site to use that domain.

For example, my own site https://kurti.sh uses the Saint Helena (.sh) TLD. We suggest the cloudflare registrar which provides a lot of different options. All of these cost a nominal amount of money and depend on your specific choice of TLD (.coms are more than .shoe or whatever).

Again, though there are many different ways to do this, the default path is through github pages. See the documentation here for how to set up a custom domain for your github pages site.

Requirements:

For this section to be correct, you’ll need your website to be hosted via a valid TLD available to us outside of your device. You know, a website.

Notes:

While you make changes to the TLD registry, note how your DNS entry populates across the network. Is it available somewhere (e.g., 8.8.8.8) before it is available locally?

Part 3: Set up a certificate to encrypt your website

Lastly, after setting up the TLD, you may have noticed that it’s not correctly encrypted (little lock icon). Again, while many options are available, we suggest you use Let’s Encrypt, a freely available certificate authority that will provide you the appropriate certs for your website to function encrypted. If you take that path, a walkthrough is available here for github pages.

Requirements:

For this section to be correct, you’ll need a demonstrated encrypted website using a major network CA (nothing local).

Cross-cutting Elements (e.g., use of AI):

We note that this project is particularly open-ended; we do not specify a template, TLD, or other technology for any particular element. While Github pages is highly recommended, any platform that allows for us to have visibility into your web development is sufficient. Similarly, though we suggest you use Let’s Encrypt, other solutions are available. Document your choices if you do anything particularly strange.

Note on AI Tools: Much of modern web development leverages tools such as ChatGPT. You are welcome to use them as well if you document your tools and prompts in the notes submitted with the project.

Deliverables

  • README: A file named README with instructions to access your website (probably just the url) and any notes on its development (e.g., use of AI).

  • Final Code: Add me (@kheimerl) to your source code repository. I’ll be checking it for development to ensure you didn’t just farm this out to an external party.

Submission

Submit the README file on gradescope.