Back to Home

How I built my first website from scratch

December 18, 2024

Getting started

I began with Gemini (Google) and ChatGPT (OpenAI) accounts. James advised me to ask them questions at every step, so I did. I asked questions like: “I’m a beginner developer and I want to make my own website. I have a MacBook with no coding software. Where do I start? List the steps to build a website, including software and accounts needed.” I followed up with questions like: “Go into more detail on step 3,” or “How does Vercel fit into the steps?”

Getting the basic understanding

I’m the kind of person who wants to understand how everything works and I’m quite impatient about it. I’ve really had to try and let that go during this process! Understanding how it all fits together required piecing information from ChatGPT, Google, and YouTube. As a visual learner, I’m a big fan of YouTube. This is the gist of how everything I’m using for my website fits together. I saw a house analogy somewhere and thought that was helpful:

GitHub: Think of it as the architect’s office, where blueprints and designs (code versions) are stored and managed. It also allows collaboration with other 'architects' (coders).

Next.js: This represents the house’s structure and wiring. It provides the essential framework and layout to build upon, ensuring the house’s foundation is solid.

Cursor: This is like the decorator’s toolkit, offering tools to customize and style the house, from painting walls (styling code) to hanging up curtains (adding features).

Vercel: Think of it as the estate agent who makes your house (website) accessible to others, ensuring everything is polished and ready for public viewing.

Setup steps

  1. Bought my domain name - annabelhammond.com through AWS Route 53
  2. Created a github account
  3. Created a Vercel account
  4. Downloaded Cursor to be my editor
  5. Downloaded Next.js onto my macbook terminal
  6. Linked the DNS records in Route 53 (annabel.hammond.com) to Vercel
  7. Created a Next.js project as a folder in my macbook directory
  8. Opened the folder/directory in the ‘terminal’ (basically the behind the scenes bit of a computer) with my Next.js project in inside Cursor
  9. Added instructions for my Cursor that I copied from this YouTube video by Mckay Wrigley

Note: All of these are free with upgrade options

Creating the content and putting it live

  • Cloned the repository - The “Code” button in Github has the URL to copy and add the terminal directory for my website. There’s a process for ‘cloning your repo’ (Git repository) on your computer to work on it locally/ offline. I like this because I can mess around in my local space and not have everything logged and ‘public’ on Git
  • Then I spent most of the overall time on this project tinkering with different structures and formatting. This helped me to understand what Cursor was able to do as well as helped me to better understand how folders and files within my project interact together e.g. to change font styles, to add an image, headers etc. Eventually, I deleted most experiments and stripped my site back to basics.
  • I kept a ‘tips/ shortcuts’ google doc for myself as I went along, to help remind me of common commands and locations of things e.g. adding ‘npm run dev” in the terminal

Things that went wrong

  1. Setup Issues: For example, missing full stops in my email during Vercel/GitHub login caused avoidable problems
  2. Attention to Detail: Small typos, capitalisation errors and misplaced characters led to time-consuming debugging
  3. AI Partnering: Forgetting to ask AI for help—or blindly trusting its solutions without cross-checking and then spending more time trying to work out what it had done
  4. Trying to Understand: Getting stuck trying to understand everything instead of focusing on progress.
  5. Perfectionism: Delaying progress by obsessing over minor details before publishing.

What have I learned overall?

  • It’s Not as Easy as It Looks: Even with help and time, this process was harder than I expected
  • Use AI More—But Wisely: AI tools are invaluable but not infallible. A foundational understanding of what you’re trying to do is essential to catch errors. I know we have tools at Baringa and I need to better familiarize myself with those.
  • I don’t know if this is game-changing yet: Tools like Cursor’s AI could revolutionize workflows (imagine a similar tool for Excel or PowerPoint), but they’re not replacements for human input yet. I can see how we will soon have ‘AI analysts’ as mini team members to create and edit slides, analyse and present data etc. and that is exciting!
  • Change Takes Time: Employees need time, training, and support to leverage new tools—it won’t happen overnight.
  • Learn in Public: The coding world’s “open source” principle is a great mindset for sharing and collaboration within industries.

Huge caveat here that these are my personal and non-technical opinions based on a brief experience. Please share your own thoughts and experiences!

Next steps:

  • Getting the ‘blog section’ to work
  • Expanding my website over time
  • Starting a Python basics course in December