Host Static Website using GitHub, GitLab or BitBucket pages

Want to host your website but you do have budget for hosting? If you only need to static page, you don’t have to worry anymore. You can use GitHub, GitLab or BitBucket pages to create and host your own website or blog using these git repository hosting sites. To be honest, I also use this to host my blog since its free, Haha.

So lets get started. Assuming that you have at-least basic knowledge on how to use git and GitHub, or BitBucket. If none, you may refer to this https://git-scm.com/ First is to create a repository username.github.io in GitHub where username is you own username. For GitLab, it should be username.gitlab.io And for BitBucket, the repository name must be username.bibucket.org Once it’s created, you will have a clone URL that we can use to push our static contents.

* Please be reminded that it will only render HTML and static files
* Server-side scripts like php, python or ruby will be rendered as plain text.

Next is we clone the repository using to our local machine. This can be done by executing git clone command in your terminal (or clone it using Git GUI applications) assuming that you have git installed in your machine.

git clone [email protected]:user/repo.git

Then we will be adding our static contents to our local repository. You can just copy paste your files on your repository’s root directory. For the sake of this post, I will just add index.html file for my repository, add the file to staging, commit the changes and push it to the server.

echo "<h1>It works!</h1>" > index.html
git add index.html
git commit -m "Added index.html"
git push -u origin master

* Make sure that you push it to master branch or your pages will not be rendered

Then if we look into our repository page account and refresh or reload it, we can now view our uploaded files. And when we access the corresponding page URL, we can now see our page displays It works! which is our index.html.
http://username.github.io/
http://username.gitlab.io/
http://username.bitbucket.org/

All you have to do now is layout and design you webpage, add and commit the files, then push it to the git hosting and boom! you just had deployed your own static webpage. If you already owned a domain name, you can just create a CNAME record and point it to your URL.

* Pages will be accessible to the public even if your repository is private.

GitHub vs GitLab vs BitBucket

As of today, GitHub is the most trusted web git service. Its pages also supports HTTPS and uses Jekyll as their static page generator. For beginners, I would recommend this than other services. But there are still some limitations using their pages. If you use Jekyll to generate your page, they build your repository using --safe option. This means that plugins will not be used upon building your page. And they also support limited versions of ruby gems (refer to https://pages.github.com/versions/). And if you don’t want others to view your source code, you have to pay for at-least $7 per month for their private repositories.

BitBucket comes with free unlimited public and private repositories for you if you sign-up to this service. But its limited to only 5 users in a team. So if you just have a small team composed of not more than 5 members, this service is the best fit for you. Unlike GitHub, BitBucket doesn’t have default static page rendering tool. So if you plan to hosting your site here, you have to commit your actual source codes. They also don’t support pages using HTTPS protocol, meaning that your page will be served as plain text. But since its just a static page, that won’t be a big issue.

And lastly is GitLab. It is now one of the most used web git service hosting in the internet. Why? because they also offer unlimited free private repositories with no limitations on your team members. Yes! you read it right. And I think, one their best feature is their own CI (Continuous Integration) System unlike GitHub and BitBucket that uses third-party applications. Using this, you can generate your static web pages with your favorite generation tool. You can use Jekyll, Hugo, Wintersmith or any other tools you want. Isn’t it great? You can also upload your own SSL Certificate if you want to serve your page with HTTPS. This is one of their biggest advantage than the 2 services mentioned above.

Conclusion

This post is just the basic implementation of hosting your static website using web git pages and their differences in terms of their service. Even if they are all using git as their VCS (Version Control System), they still have differences on how their pages are generated or used. For a web developer like me, its a great experience learning these kind of technology and roll out my own personal web page for free.

For advanced usage of this free static page hosting or how to create your own blog, Checkout Jekyll, Hugo or Wintermisth. These are static page generators that you can use to build your own blog.

References:

https://pages.github.com/
https://pages.gitlab.io/
http://pages.bitbucket.org/