As Single page applications are in high Demand. And on the new Frameworks allow you to create single page applications, so what are the ways to host single page applications (SPA) and static site for free.
These days the front end and the backend of any application are completely separate. Front-end being Single page application and back-end being completely API centric.
This allows front-end to be Completely Static and API being just Data.
So where to host this static Front End? Here are some ways:
#1 GitHub/Bitbucket/Gitlab Pages
Hosting on the pages features of GitHub or Bitbucket Cloud or Gitlab is very simple. Just create a repository on these respective sites and generally the master branch is ready to be published as the site with domains ending with
The main benefit of having hosting Static Site or SPA on these Pages like service is the highest availability; 99.99% uptime.
And in few cases, you can configure to use custom domains.
For github pages, you can go multiple ways.
If your master branch has a
docs directory, you can go to the repository settings and build the pages on the
In other case you can push your SPA or Static Site related code to the
gh-pages branch and that will be published to the
In case of publishing
master branch, the site structure is plain; you need to have has
index.html on the root level of your branch.
Simple guide to setup the pages on the Bitbucket Cloud is available here: https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html
The way to publish the site on Bitbucket cloud is similar to the 3rd case of GitHub pages.
Benefit of choosing Bitbucket is that your repository can be private white site being public and accessible to the internet.
Gitlab pages is a whole new level of having static sites. You can host and tweak your site generation process just like you might do in local machine with jakyll.
Complete ways to harness full potential of Gitlab pages can be seen here: https://docs.gitlab.com/ee/user/project/pages/
#2 Firebase Hosting
Firebase has proved itself to be very versatile platform and it has hosting too. All you need to do is to create-account/signup at Firebase and create a project.
Now download the Firebase CLI on your machine.
npm i -g firebase-tools
Initialize the project
init will create firebase.json file for your project which will have necessary config like public directory, routes, 404s etc. More info at https://firebase.google.com/docs/hosting/url-redirects-rewrites.
Once done, publish the project on firebase; and it will be available as
When you run Firebase CLI tool for first time on your system, you will be asked to login; as that process finishes, you can choose the project on which you wanna publish the project and you are done.
You can also connect your custom domain for your firebase hosting project. Read about it here: https://firebase.google.com/docs/hosting/custom-domain
Surge is the easiest and simplest tool to host your site for free, without leaving your CLI.
Just install surge globally
npm i -g surge
And from your project directory, just run
surge to deploy. Rest of the details are part of this command which you enter interactively.
surge also works with
Grunt pipeline, so you can leave the build process to surge itself.
It comes with basic SSL for the free account as well.
More info at http://surge.sh/
Heroku is very popular as free PaaS (Platform as a Service) and can be made to host static site or SPA as well.
You can use https://github.com/heroku/heroku-buildpack-static buildpack to create the project in heroku and specifiy configuration related to project in the
static.json and you are done.
More details info can be seen at Getting Started with Single Page Apps on Heroku.
You can also create your static site project add bare minimum server code to make it serve those files as well; for example by using
heroku/php buildpack, you will get apache by default and hence you can serve your static site or SPA very easily.
Well ngrok is not any cloud based hosting but a tunneling service which tunnels traffic between the ngrok provided url and your specified address.
For this, you need to download the ngrok binary.
Now you can create a site, start your local server and launch following command in CLI:
ngrok http 80
The above command create a ngrok subdomain and start tunneling
http from that URL to you system's
So you can easily demonstrate the project for shorter time.
Please provide yor valuable feedback/suggestions in the comments below.
Subscribe to Time to Hack
Get the latest posts delivered right to your inbox