Setup Repo & Create Blog

Learning Competencies

By the end of this, you should be able to:

Fork the blog repository and work in your own copy
Have a skeletal framework to build your blog

Summary

Today you'll begin a blog that you'll work on throughout Foundations. You'll fork and clone a repository, add some files, and push your code to GitHub. Optionally, you’ll be able to use a service called GitHub Pages to deploy your blog and make it publicly accessible online. You’ll learn more about GitHub Pages in Sprint 2.

Time Box

Application	Time
Set up your blog repository	20 minutes
Reflect	15 minutes

Introduction

The purpose of the blog is triple fold:

To continue honing your skills in GitHub workflow
To provide a home for assignments and reflections
To practice HTML, CSS and JS.

It can be tempting to tinker for hours with the visual elements of your blog, but there is no award for best design. The goal of this site ultimately is to have something that is functional, it should work as a website. That means all the links actually link somewhere and if you look at it on a cellphone it shouldn't shatter into 10,000 little pieces.

Try to stay focused and remember you're here to learn breadth, not depth. It's okay to move on from a topic even when you don't totally understand it.

As always, keep your learning objectives in mind and hone your practice. Follow the timebox suggestions and reach out to the community if you feel blocked.

Fork the blog repo

Fork the blog repository into your own personal GitHub.

Origin: https://github.com/dev-academy-foundations/blog

Destination: https://github.com/YOUR-GITHUB-USERNAME/blog

Fork GitHub Repo — **Figure 1:** Fork Repo from origin

View Forked GitHub Repo — **Figure 2:** View of Forked repo in destination

Clone Repo

Important! On your computer, do not clone into an existing repo (e.g. reflections).

Cloning to the same parent directory is fine, for example:

Example: Good
User/Kiri/Dev-Academy/reflections
User/Kiri/Dev-Academy/ko-wai-koe
User/Kiri/Dev-Academy/blog

Example: Incorrect
User/Kiri/Dev-Academy/ko-wai-koe/blog

Navigate to the directory where you want to clone your blog repo
Clone it

Open the file to work on it

Navigate INTO the blog repo using cd.
Open the whole folder with VS. (code .)
In your terminal use npx vite to start the website and view it in your browser at http://localhost:5173

Explore the code

Right now, there is only one file in the repository, called index.html. Feel free to update it however you like. For now, it is just the initial setup for your blog.

<html>
  <head>
    <title>My blog</title>
  </head>
  <body>
    <h1>Kia ora Taiao! (Hello World!)</h1>
    <p>This is the beginning of my website home page.</p>
    <p>It will eventually contain a list of links to all my blogs.</p>
  </body>
</html>

Commit and Push

Commit and Push the changes to your GitHub

Getting Debugging Help

🛠️ Ask an LLM: "I expect this code to [describe expected behavior] but it's [describe actual behavior]. Help me debug by asking clarifying questions about my code."

🎯 Why this works: Forces you to articulate the problem clearly, often revealing the issue.

⚠️Beware of: Over-relying on AI for hypothesis generation instead of developing your own debugging intuition.

Reflect

Open my-reflections-sprint-1 and answer the questions following Setup Repo & Create Blog.

Add, commit and push!

Filename basics

Human Skills