(I'm not affiliated with GitHub)
I just love using GitHub Pages. I've been advocating others to use GitHub Pages pretty much since it's been a feature. Hosting a basic static website is straightforward, but GitHub Pages repositories make deploying changes a breeze.
What Is It?
GitHub Pages may just seem like a free way to host simple websites, but coolest part is how it's integrated with Git (the version control software) and GitHub's other features (notably GitHub Apps). Those two factors are the biggest differentiator between classic shared hosting and services like GitHub Pages. It's a great alternative to rolling your own server, especially in your projects' prototype phases.
(GitLab has a pretty much identical feature called GitLab Pages if its more your cup o' tea. I personally prefers GitHub's experience)
What Should I Use It For?
- Personal website - For many newer software engineers, there was probably a point in the past where you followed the GitHub Pages tutorial to create your very first personal website. It's almost a rite of passage. Whether you're experienced or not, it's a quick and easy way to set up a web presence.
- Repository website - Got a cool open source project? You can use GitHub Pages to set up a demo and/or documentation site. You can use their built-in Jekyll blog setup for a quick and dirty solution or set up something more elaborate.
- Prototyping website - If you're working on something that the frontend can be hosted statically, why not just throw it up on GitHub pages? Update your live site as quickly as you can your source code!
Albeit a little lackluster in features in comparison to even a managed webserver (you won't have
.htaccess either), it offers a great deal of simplicity and ease-of-use.
I've personally use it for some of my projects:
Usage Rules and Limits
GitHub does impose several rules on what you can do with GitHub Pages, and you can find them here. In short, you have some restriction in size and bandwidth which makes sense since it is a free service.
Oh, and you can't run a commercial business off of it, but hopefully you should be able to afford a small $5 instance at that point.
Quick Feature Recap for GitHub Pages
So, GitHub Pages has a couple ways to host a website.
Preconfigured Jekyll with a few (rather lame) themes
- I can see how this can be useful for a team/individual who just wants to dump a bunch of Markdown and see a website magically work. In terms of design and technical flexibility, this scores the worst out of all the other ways to use GitHub Pages. Use this if you're interested in dumping your knowledge in Markdown and moving on to other things.
- If you want to put these Markdown files in the same directory as your code, you can actually drop these in a
/docs folder and select it as your source in the Source configuration.
Serve a website from the
master or arbitrary branch
Serve a website from the
- This is like #2, except this allows you to keep your source code and public site separate. It's actually kind of hidden from the settings because it won't show up as a selection in the Source configuration dropdown unless a
gh-pages branch exists in your repository. This is great because you can write source files, then push the build output in this branch. This GitHub help page here talks about it in detail.
- Unfortunately managing a website with this manually is actually a little bit of a pain. However, combined with a continuous deploy tool (which I'll talk about in a later article), you can have source files, set up configurations, use build tools, and deploy your website within just one project repository.
What Kind of Technologies Can I Use?
GitHub Pages sure has its limitations, but with a little creativity you can get a lot of cool stuff hosted on there.
- Statically Generated Websites - You can set up a fully customizable Jekyll, Metalsmith, or Gatsby process and keep your source pages DRY.
- Single Page Applications - Similar to statically generated websites, you can set up build tools like Webpack, Gulp, or Parcel. With that, you can build basically any of those cool SPAs with fancy frameworks like React or Vue! You may have heard of a server architecture called JAMstack, and you can host your frontend for that on GitHub Pages.
I've encountered two reasons to not use GitHub Pages so far:
No Server-Side Rendering - Yeah, you have a dumb static server so you're going to be able to set up any of the niceties from server-side rendering.
- I think there are other optimizations that can improve performance, like bundle splitting, file optimizations, and lazy loading, before implementing server-side rendering.
- However, if you're worried about SEO, search engines can crawl HTML5 history API routes, hash routes, and (unrelated) even query strings!
Authentication - Again, because you don't have a server, you can't set up authentication thru cookies. However, you can set up a token-based authentication via an internal REST API for your frontend. I haven't found a library that made this easier yet, so it is a little involved to set up.
I want elaborate on JAMstack and why I think it's a great way to build frontend-heavy projects. I also found that using the
gh-pages branch feature entirely with Git is pretty involved and is best used with a continuous deployment tool.
I'll leave these two points for a later post, but I hope you learned more about GitHub Pages and will think about taking advantage of it in the future if it makes sense!