GitHub Pages are public webpages hosted for free through GitHub. GitHub users can create and host both personal websites (one allowed per user) and websites related to specific GitHub projects. Pages lets you do the same things as GitHub, but if the repository is named a certain way and files inside it are HTML or Markdown, you can view the file like any other website. GitHub Pages is the self-aware version of GitHub. Pages also comes with a powerful static site generator called Jekyll, which we'll learn more about later on.
Getting Started with GitHub Pages Don't worry if some of these concepts are still a little fuzzy to you. The best way to learn this stuff is to just start doing the work, so let's not waste anymore time and dive right in.
Create your project's repository. Login to your GitHub account and go to https://github.com/new or click the New repository icon from your account homepage.
Name your repository username.github.io, replacing username with your GitHub username. Be sure it is public and go ahead and tell GitHub to create a README file upon generating the repo.
Create an index.html page by clicking the plus icon next to your repository name and typing the file name directly in the input box that appears. On the resulting page, put this markup inside of the GitHub text editor:
Commit index.html. At the bottom of the page, there is a text input area to add a description of your changes and a button to commit the file. Congrats! You just built your first GitHub Pages site. View it at http://username.github.io. Usually the first time your GitHub Pages site is created it takes 5-10 minutes to go live, so while we wait for that to happen, let's style your otherwise plain HTML site.
To style the content go back to your repository home and create a new file named css/main.css. The css/ before the filename will automatically create a subdirectory called css. Pretty neat. Place the following inside main.css:
Don't forget to commit the new CSS file!
- Link to your CSS file inside your HTML document's . Go back to index.html and select the "Edit" button. Add a link to main.css (new markup is in bold)
We learned how to Set up a Personal GitHub Pages
Log in or sign up for Devpost to join the conversation.