GitHub Pages vs. Netlify vs. Heroku

ยท

0 min read

Hi today i'm going to compare GitHub pages, Netlify and Heroku and see who comes out on top as the best solution for front-end developers to host. This is entirely my opinion from extensive use of the three options in the past few months.
I'll be comparing them on four criteria:

  • Pricing
  • Ease of setup
  • Ease of deployment
  • Continuous integration/deployment
  • Custom domain names

Pricing

GitHub Pages: GitHub pages is free, absolutely free. There is nothing like pro, no features that are only available to premium members. It's the same experience across board.

Netlify: Netlify is also free, no premium, no pro.The same experience for all developers.

Heroku: Heroku has a free option but also has premium options. While the free option is great for hobbyists, it really is inferior to paid options. Heroku uses something called dynos and I won't go into it but when you are on the free plan your website(dynos) falls asleep when your website is inactive and that doesn't sound that bad but it can be a bit annoying waiting for your site to wake up. I have a MERN stack application all hosted with the heroku free plan and it's painful watching both applications wake up.

Winner: Netlify and GitHub Pages have this round

Ease of setup

GitHub Pages: Setting up GitHub pages is relatively easy but still a bit of a drag compared to the rest. You'll need to run npm init if your project doesn't already have a package.json file. Next you need to install the package via npm or yarn or whatever you happen use by running npm i gh-pages --save in the root folder.

Netlify: Setting up Netlify is super easy. You sign up with GitHub or a provider like that, let Netlify have access to your GitHub and voila you're all set up.

Heroku: It is more or less the same as Netlify, you sign in/up with a social provider most likely GitHub and you grant access and voila.

Winner: I'd say Netlify and Heroku take this round.

Ease of deployment

GitHub Pages: Deployment with Gh Pages is simple enough. You have to ensure all your files are in a folder usually named dist if the project is not say a React project that was bootstrapped. In the package.json file you specify a deploy script gh-pages -d (name of folder to deploy e.g dist) and in the homepage you have to specify the URL you want typically following the format https://yourusername.github.io/nameyouwant.git and finally in the terminal run the command you specified in the deploy script which deploys the project to GitHub.

Netlify: Deploying to Netlify is even simpler, you just specify the repository you want to deploy on GitHub(or whatever you connected to Netlify with) and deploy. It'll build the project first which you can actually view and then Netlify tells you if you're successful or not.

Heroku: Heroku is (and you absolutely guessed it) the almost exact same process, only slight difference is you HAVE to give your app a name before you begin. After that pick the repository you want to deploy and deploy.

Winner: Netlify and Heroku take the cake here because it is way easier deploying.

Continuous deployment

GitHub Pages: GitHub pages offers no continuous deployment options unfortunately which really is a real bummer. You have to run the deploy script every time you push changes to GitHub and it is possible to run into errors.

Netlify: It comes with continuous deployment out of the box, whenever you push changes the site is automatically built again and deployed. It can be turned off though if you are not a fan of it.

Heroku: It does not come with continuous integration out of the box but in the dashboard there is an option to turn it on and frankly I really do understand that. The developer has the power to choose depending on the project needs.

Winner: Heroku wins this round simply because it offers the developer the choice, it doesn't make assumptions and because the option to turn it on is in your face, with Netlify you do not have a choice and you have to navigate to turn it off.

Custom domain names

GitHub Pages: As I said earlier before to deploy to Gh Pages you have to specify a homepage and since you have some level of control the url where your project lives looks a little bit nicer, has a better aesthetic feel to it.

Netlify: Netlify gives this randomly generated domain name and personally I find them a bit of an eyesore plus it's difficult trying to recall a domain name like flowerymedansky-1234334.netlify.com.

Heroku: Right before you start anything you have to give your app a name the custom domain then reads nameyougave.herokuapp.com which to me looks really really nice and is easy to recall.

Winner: Heroku takes this round. It just offers the option in this regard.

Personally I prefer Netlify or Heroku, I think Netlify edges it in my book based on things I didn't cover in this blog post. Honestly they are all pretty great options for front-end developers, all have their own pros and cons and ultimately the choice is yours I just hope I was able to aid that choice.