How to put an HTML website online (on the Internet)

Introduction

In this tutorial, we will learn how to put an HTML website online using GitHub Pages, a free service that allows you to publish your website easily. We will also cover how to set up a custom domain name, making it simpler for users to access your site. This guide is perfect for beginners familiar with HTML and CSS.

Chapter 1: Put a website on the Internet

Step 1: Create a GitHub Account

• Go to github.com and log in or create a new account.

Step 2: Create a New Repository

• Click on your profile icon in the top right corner.
• Select "Your repositories" and click on "New".
• Name your repository (e.g., "super-simple-website") and ensure it is public.
• Click "Create repository".

Step 3: Prepare Your Website Files

• If you already have a website, you can use that. Otherwise, download a sample website from the video description.
• Unzip the downloaded file to access your HTML and CSS files.

Step 4: Upload Your Code to GitHub

• In your GitHub repository, click on "Upload an existing file" or append /upload to the URL.
• Drag and drop your HTML and CSS files directly into the upload area (do not upload the folder).
• After the upload is complete, scroll down and click "Commit changes".

Step 5: Enable GitHub Pages

• Navigate to the "Settings" tab of your repository.
• Scroll to the "Pages" section.
• In the source dropdown, select main or master (whichever appears) and save.
• Wait a few moments for GitHub to publish your site.

Step 6: Access Your Published Site

• Your site will be available at https://<your-github-username>.github.io/<repository-name>.
• If you see a 404 error, ensure you are accessing the correct HTML file. Use the main HTML file (e.g., YouTube.html).

Practical Tips

• Always rename your main HTML file to index.html to avoid specifying the filename in the URL.
• Use folders to organize your CSS and image files similarly to your local setup.

Chapter 2: Set up a Domain Name

Step 1: Choose a Domain Registrar

• A popular option is Namecheap. You can choose another registrar if desired.

Step 2: Find and Register Your Domain

• Visit the domain registrar’s website and search for your desired domain name.
• If the domain is available, add it to your cart.
• Ensure domain privacy is enabled to avoid spam.
• Create an account and complete the purchase.

Step 3: Link Your Domain to GitHub Pages

• Log in to your domain registrar account.
• Navigate to the DNS settings for your domain.

Step 4: Create DNS Records

• A Record:
  • Add a new record with the following values:
    • Type: A
    • TTL: 300 seconds
    • Host: @ (or leave blank)
    • Value: Use GitHub Pages IP addresses (obtain via DNS lookup).
• CNAME Record (for www):
  • Add another record:
    • Type: CNAME
    • Host: www
    • Value: <your-github-username>.github.io
    • TTL: 300 seconds

Step 5: Update GitHub Pages Settings

• Go back to your GitHub repository.
• In the "Pages" settings, enter your custom domain and save.

Common Pitfalls

• DNS changes can take 24-48 hours to propagate. Be patient if the site doesn't appear immediately.
• Ensure that you have set up both A and CNAME records correctly.

Conclusion

You have successfully learned how to publish an HTML website using GitHub Pages and set up a custom domain name. This process not only makes your website accessible to others but also helps establish your online presence. For further learning, consider exploring additional topics in HTML, CSS, and JavaScript. Happy coding!