How to create your first GitHub Repo and your GitHub Bio

Programming and Developement Web development
, ,
1

Create your first GitHub Repository and your GitHub Bio

This guide will walk you through the essential steps to create a GitHub account and set up your very first public repository to host your basic HTML website. This is the foundational step before you can deploy it using GitHub Pages.

Part 1: Creating Your GitHub Account

GitHub is a platform for version control and collaboration, essential for managing your code.

  1. Go to GitHub: Open your web browser and navigate to https://github.com/.

  2. Sign Up:

    • Look for the “Sign up” button, usually prominent on the homepage.
    • You’ll be prompted to enter your email address. Use an email you actively check.
    • Create a username. This will be part of your GitHub profile URL and will be how others identify you. Choose something professional or representative of your projects.
    • Create a strong password.
    • You’ll likely need to solve a puzzle to verify you’re not a robot.
    • Check your inbox for a verification email from GitHub and follow the instructions to verify your account.

Part 2: Creating Your First Public Repository

A repository (or “repo”) is like a folder for your project, containing all your code, files, and their revision history. For GitHub Pages, you’ll need a public repository.

  1. Navigate to Your Profile: After signing in, you’ll usually land on your GitHub dashboard. Click your profile picture (or the GitHub logo) in the top-right corner to go to your profile page.

  2. Create a New Repository:

    • On your profile page, you should see a “Repositories” tab. Click on it.
    • Look for a green button that says “New” (or a similar icon like + followed by “New repository”). Click it.

  3. Configure Your Repository:

    • Owner: This should be your username.
    • Repository name: This is crucial for GitHub Pages. For a personal website, it’s often recommended to name it your-github-username.github.io. If you plan to deploy a project website, you can name it anything descriptive (e.g., my-awesome-project). For this guide, let’s assume you’re making a personal website, so use your-github-username.github.io.
    • Description (Optional): Briefly describe your project (e.g., “My personal portfolio website”).
    • Public / Private: Crucially, select “Public”. This is required for GitHub Pages to work for free.
    • Initialize this repository with a README: Check this box. This creates a basic README.md file, which is good practice.
    • Add .gitignore: You can skip this for now, or select a generic template like “Node” if you’re unsure.
    • Add a license: You can skip this for now.

  4. Click “Create repository”: This will create your new, empty repository.

Part 3: Adding Basic HTML to Your Repository

Now, let’s add a simple HTML file to your new repository.

  1. Access Your Repository: You should automatically be taken to your newly created repository’s page. If not, navigate to it via your profile.

  2. Create a New File:

    • On your repository’s main page, look for a button that says “Add file” and click the dropdown arrow next to it.
    • Select “Create new file”.

  3. Name Your File:

    • In the “Name your file…” field, type index.html. This is the default file name that web servers look for when someone visits a directory.

  4. Add Your HTML Code:

    • In the large text area below, paste the following basic HTML code (or write your own!)
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First GitHub Website</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>Hello, GitHub Pages!</h1>
    <p>This is my very first website deployed on GitHub.</p>
    <p>Welcome aboard!</p>
</body>
</html>

  5. Commit Your Changes:

    • Scroll down to the “Commit new file” section.
    • Commit message: Leave the default message (e.g., “Add index.html”) or write a more descriptive one like “Initial commit with basic HTML structure”.
    • Commit options: Select “Commit new file” (this will commit directly to the main branch, which is usually the default).

To deploy this website to GitHub Pages See How to Deploy a website on GitHub Pages for FREE

This is for you @kosherboy

If you have any suggestions or edits, please reply below.

And if you found this helpful, a :heart: would be much appreciated!

6 Likes