Wondering how to create your first website on GitHub page ? Codemagnet is here to help you out with this. First of all let us understand what is the difference between a GitHub and a GitHub page is.
Before that,
GitHub Pages, are a tool provided by GitHub, lets you easily create and deploy a website online. GitHub allows you to store all the files and code for your website in a repository. You can then use GitHub Pages to generate a personal URL and share your site with friends, family, and the world!
GitHub Vs GitHub Page?
In GitHub, your code is kept in a special folder called a repository, or repo, which is stored online. This means you can access it from anywhere.
For us, our repository will have code that creates a website using HTML and CSS. However, you can’t view the website directly on GitHub. GitHub Pages helps by connecting your repository to a unique URL, like username.github.io. When you open this URL in your browser, you’ll see your website.
Let’s get started!
If you notice properly, we have the option here to use a template, add a description, make your repository private, and initialize some additional files. These items make it easy for other developers to learn about your repository: what it’s about, who can access it, who can use the code, etc.
As of now, For simplicity, we’re going to skip those items for now. Your site will work without them.
Next step is
Click “Create Repository”.
Once you have clicked on create repository. You will get a screen like below
Now,
It’s time to add a file! On this page, click the “creating a new file” link.
<html>
<body>
<h1>CODEMAGNET</h1>
<p>Welcome to my website!</p>
<img src="codemagnet/myweb.png" />
</body>
</html>add above code just to create your first web page. You can change the code according to your need.
How can you add image to your GitHub page ?
click on your repository name and you will get an option t upload file
Now, once you are done, add a file name and click on commit changes.
Changes to your repository are called commits. You can imagine each commit as a snapshot of your repository at different times.
Time to create our first commit! In the first textbox, name your commit “Create index.html”. Commits usually start with a verb describing changes made to the repository.
Press the “Commit new file” button.
Woo hooo ! Congratulations!
Your website is now accessible at https://username.github.io/repo name! (Remember to replace username with your GitHub username.)
Mine is below
code9289.github.io/codemagnet/
Note: If you are not able to see your webpage, you must have missed to set the branch in which your repo is
Troubleshooting
If your site isn’t appearing after 10 minutes, try these additional steps:
Within your username.github.io repo, go to Settings and scroll down to GitHub Pages. Under Source, make sure that your repo is linked to your web page. If you see None, then select the main branch.
Within the same GitHub Pages section, go to Theme Chooser and select any theme.
In this tutorial, we learned how to create a website using HTML and CSS, store the code on GitHub, and make the website accessible online using GitHub Pages. By following these steps, you can easily share your website with others and showcase your work to the world.
Leave a Reply