Git & GitHub - GitHub Pages

How to create and manage GitHub Pages

GitHub Pages is a feature that allows you to host static websites directly from a GitHub repository. It is commonly used for project documentation, portfolios, and blogs. This guide explains how to create and manage GitHub Pages.

Creating a GitHub Pages Site

Step 1: Create a Repository

Create a new repository or use an existing one to host your GitHub Pages site. The repository name can be anything, but if you name it username.github.io, it will serve as your personal website.

Step 2: Add Your Website Files

Add your HTML, CSS, and JavaScript files to the repository. You can also use Markdown files if you plan to use Jekyll.

# Example file structure
index.html
about.html
styles/
  main.css
scripts/
  main.js
                

Step 3: Enable GitHub Pages

Navigate to the "Settings" tab of your repository, scroll down to the "GitHub Pages" section, and select the source for your Pages site. You can choose the root of the repository or the docs folder.

Click "Save" to enable GitHub Pages for your repository. Your site will be published at https://username.github.io/repository-name or https://username.github.io if it's your personal site.

Using Jekyll for GitHub Pages

Jekyll is a static site generator supported by GitHub Pages. It allows you to use Markdown to write your content and provides themes and templates for easier site building.

# Step 1: Add a Jekyll configuration file (_config.yml)
title: My GitHub Pages Site
theme: minima

# Step 2: Add your Markdown files
index.md
about.md

# Step 3: Add any additional Jekyll files and folders (e.g., _layouts, _includes)
                

Push your changes to the repository, and GitHub Pages will automatically build and deploy your Jekyll site.

Customizing Your GitHub Pages Site

You can customize your GitHub Pages site using themes, custom domains, and additional configurations:

• Themes: Choose a theme from the "Settings" tab under the "GitHub Pages" section or add a theme to your _config.yml file.
• Custom Domains: Set a custom domain in the "GitHub Pages" section of the "Settings" tab and configure your DNS settings accordingly.
• Additional Configurations: Use the _config.yml file to add more configurations for your Jekyll site.

# Example _config.yml with customizations
title: My GitHub Pages Site
theme: minima
url: "https://www.example.com"
baseurl: "/"
                

Managing Your GitHub Pages Site

To manage your GitHub Pages site, you can update content, fix issues, and redeploy by pushing changes to your repository. You can also view the build and deployment status in the "Actions" tab.

Summary

This guide covered how to create and manage GitHub Pages, including creating a repository, adding website files, enabling GitHub Pages, using Jekyll, customizing your site, and managing deployments. GitHub Pages is a powerful tool for hosting static websites directly from your GitHub repository.