Blog #0: A Beginner's Guide to Using GitHub Pages

Date: Sep 19, 2023

Tag: GitHub

Introduction:

GitHub Pages is a free hosting service provided by GitHub that allows you to showcase your web development projects, personal blogs, or documentation directly from your GitHub repository

Step 1: Create a GitHub Account

If you don't already have a GitHub account, you'll need to create one. Go to GitHub's website and sign up for a free account. Once you're logged in, you're ready to start using GitHub Pages.

Step 2: Create a Repository

A repository is where your project's files are stored. To create a repository for your GitHub Pages site, follow these steps:

1. Click on the "+" icon in the upper right corner of your GitHub homepage.
2. Select "New Repository."
3. Give your repository a name. For GitHub Pages, it's important to name it in the format <your-username>.github.io. For example, if your username is "john," the repository should be named "john.github.io."
4. Choose the repository's visibility. You can make it public (visible to everyone) or private (restricted to collaborators).

Step 3: Add Content

Now that you have a repository, you need to add content to it. You can create a simple HTML file for a basic webpage or upload an entire web project. Here's how you can create a simple HTML file:

1. In your repository, click on the "Add file" button, then choose "Create new file."
2. Name the file "index.html" (this is the default file that GitHub Pages will look for).
3. Write or paste your HTML code into the file.
4. Commit your changes by providing a commit message and clicking the "Commit new file" button.

Step 4: Enable GitHub Pages

To enable GitHub Pages for your repository, follow these steps:

1. In your repository, click on the "Settings" tab.
2. Scroll down to the "GitHub Pages" section.
3. Under "Source," select "main" or "master" branch as the source for GitHub Pages.
4. Click "Save."

GitHub Pages will then build and deploy your site. You'll see a green checkmark indicating that your site is published, along with the URL where your site is hosted (usually https://<your-username>.github.io).

Step 5: Customize Your Site

GitHub Pages allows you to customize your site further. You can:

• Choose a theme: In the repository settings, go to the "GitHub Pages" section, and click on "Choose a theme" to select from a variety of themes.
• Add a custom domain: If you have a custom domain, you can configure it to point to your GitHub Pages site.
• Customize the CSS: Modify the CSS files to personalize the appearance of your site.
• You can check my portfolio in github for understanding what all the basic css, html and javascript customization can be done.

Step 6: Update and Maintain

As you continue to work on your project or add new content, remember to commit your changes to your repository. GitHub Pages will automatically update your site to reflect the changes in your repository.

Conclusion

GitHub Pages is an excellent platform for sharing your web development projects, blogs, or documentation with the world. It's easy to set up, and with a little customization, you can create a polished and professional-looking website. Whether you're a developer showcasing your portfolio or a writer sharing your thoughts, GitHub Pages has you covered. So, get started today and share your work with the world!