Github pages for your simple web projects

Before you buy a domain or subscribe to a hosting service, you should probably think about if you even need them. Why?, you ask. Then probably you should not skip this post.

Too many steps
What stops most of the people to start their first web project is the hesitation to go through all the steps starting from selecting a hosting service from various choices available, selecting the plan and then go through all the actual hosting steps, which generally never happens smoothly.

Costly
Then comes the money part which is the second most popular hurdle to have your own website. Buying a domain name, could sometimes be expensive especially for students who need to save money more than anybody. Also, most of the hosting services charge some amount to customers to keep running their business.

Security and reliability
For simple projects like personal website, this is important but many would agree that it is essential for business. We are always hearing news about data breaches on hosting services even on some popular services like hostinger etc.

For all the above problems, there is one useful feature of Github yet unknown to many.

Github Pages allows you to host your simple web project/website directly from your Github repository. It means you can make your website live for the world to see without bearing the hosting pain!

Note: Github Pages works only for static websites.

By definition: A static website contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor. These are the most basic type of website and are the easiest to create. Unlike dynamic websites, they do not require any Web programming or database design. A static site can be built by simply creating a few HTML pages and publishing them to a Web server.

The major examples of static websites are as follows:

1. Documentation
2. Developing Cache
3. Website presentation
4. Communication cache-scrapping buffer
5. Forms
6. Newsletter Contents
7. Disaster page
8. Recovery from disaster status
9. Landing page/scales
10. Blogs

If you are wondering what could be achieved with a static website, go through below link, you will be amazed(found this while surfing web randomly).
https://www.covid19india.org/
Github repo: https://github.com/covid19india/covid19india-react

Although, there are a lot of similar/better alternatives to github pages like Netlify, but probably you may never need it.

For more information on github pages: https://pages.github.com/

Although there are a lot of articles already on github actions, I will also be posting an article on how to use it.

Comments

[Michael Currin]

That's a nice motivation for using GH Pages and what you can put on it. It would have been good to mention Jekyll since it is in your cover image.

To make it more practical around tech and deploys flows, here is what I typically use GH Pages for:

• Plain HTML, JS and CSS. No build step. If you like DocsifyJS, then you can set up a docs site like that.
• Jekyll. No need to configure a build step. GH Pages will run Jekyll for you, against a fixed set of gems like themes and plugins.
• React or Vue app with Node (or Deno). I use GitHub Actions to handle dependencies and building the static app output.
• React or Vue without Node or package.json or GitHub Actions. Load the dependencies by URL on the frontend using ES Modules.
• GitHub Actions and some other flow like Jekyll 4, MkDocs, Next (static mode), Nuxt...

Also Netlify is a more advanced competitor to GitHub Pages. But for most projects, GitHub Pages and sometimes GH Actions works great.

[Akash Kumar Sikarwar]

Thanks, Michael. The cover page was a bit misleading, I have updated it to the scope of github actions light intro.