person holding a small paper
|

How to use GitHub Pages for free website: Complete Guide in 4 steps

Do you want to create your own website without spending a dime? Do you want to showcase your projects, share your ideas, or promote your brand online? If yes, then you might be interested in learning about GitHub Pages, a free and easy way to host your website using GitHub. In this blog post, I will show you how to use GitHub Pages to create and publish your own website in a few simple steps.

But first, what is GitHub Pages? GitHub Pages is a feature of GitHub, a popular platform for hosting and collaborating on code projects. GitHub Pages allows you to create a website from a GitHub repository, which is a collection of files and folders that store your code and other resources. You can use GitHub Pages to host any type of website, such as a personal portfolio, a blog, a documentation site, or a landing page. You can also use custom domains, themes, and plugins to customize your website according to your needs.

GitHub Pages is free for public repositories, which means anyone can see your website and your code. If you want to keep your website or your code private, you will need to upgrade to a paid plan. However, for most purposes, a public repository is enough to create a professional-looking website.

So, how do you use GitHub Pages for free websites? Here are the steps you need to follow:

Step 1: Create a GitHub account to use GitHub Pages for free website

The first step is to create a GitHub account if you don’t have one already. You can sign up for free at https://github.com/join. You will need to provide your username, email address, and password. You will also need to verify your email address and choose a plan. For GitHub Pages, you can choose the free plan.

Step 2: Create a GitHub repository

The next step is to create a GitHub repository for your website. A repository is like a folder that contains all the files and folders related to your project. To create a repository, go to https://github.com/new. You will need to give your repository a name, a description, and choose whether it is public or private. For GitHub Pages, you need to make it public.

You also need to choose a branch name for your repository. A branch is like a version of your project that you can work on separately from the main version. For GitHub Pages, you need to name your branch gh-pages. This tells GitHub that this branch contains the files for your website.

Finally, you need to initialize your repository with some files. You can do this by checking the box that says “Add a README file”. A README file is a text file that explains what your project is about and how to use it. You can also check the box that says “Add .gitignore file”. A .gitignore file is a text file that tells Git (the software that manages your code) which files and folders to ignore when uploading or downloading your project. For example, you might want to ignore temporary files or files that contain sensitive information.

Once you have filled in all the details, click on “Create repository”. You should see something like this:


Your repository "your-username/your-repository-name" was successfully created.
You're now on the code tab for this repository.
You can clone it with HTTPS or SSH.
You can also download it as ZIP or open it in Visual Studio Code.

Congratulations! You have created your GitHub repository for your website.

Step 3: Add files to your repository

The next step is to add files to your repository that will make up your website. You can do this in two ways: using the web interface or using the command line.

Using the web interface

If you are not familiar with the command line or if you prefer a graphical user interface, you can use the web interface to add files to your repository. To do this, go to https://github.com/your-username/your-repository-name/tree/gh-pages. You should see something like this:


your-username / your-repository-name
Code Issues Pull requests Actions Projects Wiki Security Insights
Branch: gh-pages
New pull request
README.md
Add files via upload
Latest commit 1234567 5 minutes ago
History
your-username committed 5 minutes ago
1 parent 2345678 commit 1234567
1 README.md
@@ -0,0 +1 @@
# your-repository-name

This shows you the files and folders in your repository. You can see that there is only one file, README.md, which is the file you created earlier. To add more files, you can click on the “Add file” button on the top right corner. You will see two options: “Create new file” and “Upload files”.

If you choose “Create new file”, you will be able to create a new file directly on the web interface. You will need to give your file a name and type in some content. For example, you can create a file called index.html and type in some HTML code. HTML stands for HyperText Markup Language, and it is the standard language for creating web pages. You can learn more about HTML at https://www.w3schools.com/html/.

If you choose “Upload files”, you will be able to upload files from your computer to your repository. You can drag and drop files or select them from your file explorer. For example, you can upload an image file called logo.png that you want to use on your website.

After you have created or uploaded your files, you need to commit them to your repository. Committing is like saving your changes and adding a message that describes what you did. To commit your files, scroll down to the bottom of the page and fill in the fields under “Commit changes”. You can leave the default message or write your own. Then, click on “Commit changes”. You should see something like this:


your-username / your-repository-name
Code Issues Pull requests Actions Projects Wiki Security Insights
Branch: gh-pages
New pull request
index.html logo.png README.md
Add files via upload
Latest commit 3456789 2 minutes ago
History
your-username committed 2 minutes ago
1 parent 1234567 commit 3456789
3 index.html logo.png README.md
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>My Website</title>
+</head>
+<body>
+<h1>Hello, world!</h1>
+<img src="logo.png" alt="My logo">
+</body>
+</html>

Congratulations! You have added files to your repository using the web interface.

Using the command line

If you are familiar with the command line or if you prefer a text-based interface, you can use the command line to add files to your repository. To do this, you will need to install Git on your computer. Git is a software that helps you manage your code and collaborate with other developers. You can download Git from https://git-scm.com/downloads. After you have installed Git, you will need to open a terminal or a command prompt on your computer.

The first thing you need to do is to clone your repository to your computer. Cloning is like copying your repository from GitHub to your local machine. To clone your repository, type in the following command:


git clone https://github.com/your-username/your-repository-name.git

You will need to replace your-username and your-repository-name with your actual username and repository name. After you run this command, you should see something like this:


Cloning into 'your-repository-name'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.

This means that you have successfully cloned your repository to your computer. You can now navigate to the folder where your repository is located using the cd command. For example, if your repository is located in a folder called Documents, you can type in the following command:


cd Documents/your-repository-name

Once you are in the folder, you can add files to your repository using the git add command. For example, you can create a file called index.html and type in some HTML code. Then, you can add it to your repository by typing in the following command:


git add index.html

You can also add multiple files at once by using a wildcard character. For example, you can add all the files that end with .html by typing in the following command:


git add *.html

After you have added your files, you need to commit them to your repository. To do this, type in the following command:


git commit -m "Add files via command line"

The -m flag allows you to add a message that describes what you did. You can write any message you want, but try to make it clear and concise. After you run this command, you should see something like this:


[gh-pages 4567890] Add files via command line
 1 file changed, 10 insertions(+)
 create mode 100644 index.html

This means that you have successfully committed your files to your repository. The next step is to push your files to GitHub. Pushing is like uploading your changes from your local machine to GitHub. To do this, type in the following command:


git push origin gh-pages

The origin argument refers to the name of the remote repository on GitHub. The gh-pages argument refers to the name of the branch that contains your website files. After you run this command, you should see something like this:


Counting objects: 4, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 1.23 KiB | 1.23 MiB/s, done.
Total 4 (delta 0), reused 0 (delta 0)
To https://github.com/your-username/your-repository-name.git
   3456789..4567890  gh-pages -> gh-pages

This means that you have successfully pushed your files to GitHub.

Congratulations! You have added files to your repository using the command line.

Step 4: View your website

The final step is to view your website online. To do this, go to https://your-username.github.io/your-repository-name/. You will need to replace your-username and your-repository-name with your actual username and repository name. You should see something like this:

How to use GitHub Pages for free website: Complete Guide
Image source:https://dev.to

This is your website hosted by GitHub Pages. You can see that it has the same content as the index.html file that you created or uploaded earlier. You can also see that it has the logo image that you uploaded as well.

You can now share your website with anyone by sending them the link. You can also update your website anytime by adding, modifying, or deleting files in your repository and pushing them to GitHub.

Frequently Asked Questions

In this section, I will answer some common questions that you might have about use of GitHub Pages for free website.

How do I use a custom domain for my website?

If you want to use a custom domain for your website, such as www.mywebsite.com, instead of the default domain provided by GitHub Pages, such as https://your-username.github.io/your-repository-name/, you will need to do two things: register a domain name and configure it with GitHub Pages.

To register a domain name, you will need to use a domain name registrar, such as GoDaddy, Namecheap, or Google Domains. A domain name registrar is a service that allows you to buy and manage domain names. You will need to pay a fee to register a domain name, which varies depending on the registrar and the domain name extension. For example, a .com domain name might cost around $10 per year, while a .io domain name might cost around $30 per year.

To configure your domain name with GitHub Pages, you will need to follow the instructions provided by GitHub at https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site. You will need to create a file called CNAME in your repository that contains your domain name, and update the DNS records of your domain name to point to GitHub’s servers. This might take some time to propagate, so be patient.

Once you have done these steps, you should be able to access your website using your custom domain name.

How do I use a theme for my website?

If you want to use a theme for your website, such as a predefined layout, style, and color scheme, instead of creating your own from scratch, you can use one of the themes provided by GitHub Pages. GitHub Pages supports themes based on Jekyll, a static site generator that allows you to create websites using templates and markdown files. You can learn more about Jekyll at https://jekyllrb.com/.

To use a theme for your website, you will need to follow the instructions provided by GitHub at https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/adding-a-theme-to-your-github-pages-site-with-the-jekyll-theme-chooser. You will need to choose a theme from the theme chooser, and update your repository settings to enable it. You will also need to create some markdown files that contain the content of your website, such as _config.yml, index.md, and about.md. You can use the examples provided by the theme as a guide.

Once you have done these steps, you should be able to see your website with the theme applied.

How do I add plugins to my website?

If you want to add plugins to your website, such as additional features or functionality, you can use one of the plugins supported by GitHub Pages. GitHub Pages supports plugins based on Jekyll, which are Ruby gems that extend the functionality of Jekyll. You can learn more about plugins at https://jekyllrb.com/docs/plugins/.

To add plugins to your website, you will need to follow the instructions provided by GitHub at https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll#plugins. You will need to add the plugin name to the gems section of your _config.yml file, and update your repository settings to enable it. You will also need to use the plugin in your website files according to its documentation.

Once you have done these steps, you should be able to see your website with the plugin enabled.

Conclusion

In this blog post, I have shown you how to use GitHub Pages to create and publish your own website for free or let’s say how to use GitHub Pages for free website. I have covered the following steps:

  • Create a GitHub account
  • Create a GitHub repository
  • Add files to your repository
  • View your website

I have also answered some frequently asked questions about GitHub Pages, such as how to use a custom domain, a theme, or a plugin for your website.

I hope you have found this blog post helpful and informative. If you have any questions or feedback, please feel free to leave a comment below. Thank you for reading!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *