GitHub Pages
You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a GitHub repository. It is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. You can see examples of GitHub Pages sites in the GitHub Pages examples collection.
You can host your site on GitHub's github.io
domain or your own custom domain. We'll talk about hosting with a custom domain in later parts of this series.
To publish a user site, you must create a repository owned by your user account that's named <username>.github.io
. To publish an organization site, you must create a repository owned by an organization that's named <organization>.github.io
. Unless you're using a custom domain, user and organization sites are available at
http(s)://<username>.github.io
or http(s)://<organization>.github.io
.
The source files for a project site are stored in the same repository as their project. Unless you're using a custom domain, project sites are available at
http(s)://<username>.github.io/<repository>
or http(s)://<organization>.github.io/<repository>
.
Deploy Your Project
Okay, so much theory. Let's publish our project now.
Create a repository
Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.
Clone the repository
git clone https://github.com/username/username.github.io
Hello World
Enter the project folder and add an index.html file:
cd username.github.io
echo "Hello World" > index.html
Push it
Add, commit and push your changes:
git add .
git commit -m "Initial Commit"
git push -u origin master
Done
Fire up a browser and go to https://username.github.io.
Hosted directly from your GitHub repository. Just edit, push and your changes are live.
Whats Next?
How cool is this? A complete web hosting just in seconds and for completely free. 💵🙌💸
In the next part of the series, I'll show you how to deploy VueJs apps with Github Pages. Till then, Have fun. Cheers 🥳
Top comments (0)