Setup Repo & Create Blog

Learning Competencies

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

Create a new repository
Understand what GitHub pages are
Have a skeletal framework to build your blog

Summary

Today you'll begin a blog that you'll work on throughout Foundations, and you'll do so using a service called GitHub Pages. You'll create a repo, clone a repo, add some files and push it up to GitHub Pages.

Time Box

Application	Time
Create a website 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.

Create a new Repo

Create a new repository
Use the syntax your-github-username.github.io for your repository name (example Figure 1). Make sure you use your exact GitHub username when naming this repo, otherwise GitHub Pages won't work correctly when we set it up. It really means EXACTLY. Like, same capitalization and everything. If your github username is drbicepticus47 and you name the repository Drbicepticus47.github.io it will not work.
Select the options shown in Figure 1

Create new repo — **Figure 1:** Preference setting for New GitHub repo

Clone Repo

Important! 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/jamanius.github.io

Example: Incorrect
User/Kiri/Dev-Academy/ko-wai-koe/jamanius.github.io

Navigate to the directory where you want to clone your github.io repo
Clone it

Add a temporary index.html file

Navigate INTO the github.io repo using cd.
Create a file called index.html (in your terminal, touch index.html)
Open index.html with VS. (code .)
Add this text to the index.html file, and save it

<html>
  <head>
    <title>My blog</title>
  <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 GitHub
Navigate to your [USERNAME].github.io repo on GitHub
Enter the settings menu for that repo and click on the Pages tab in the left sidebar
Under the Source option, select the main branch
You can check out your live repo by visiting http://[USERNAME].github.io*

image of website blog — **Figure 3:** Example of Blog online.

Note: After pushing to GitHub pages, there might be a delay - it can sometimes take 15 minutes for your site to rebuild on GitHub, so don't be surprised if you can't see changes immediately

Reflect

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

Add, commit and push!

Filename basics

Human Skills