Why I Moved My Website From Github Pages to Heroku — with a Cost

Why I Moved My Website From Github Pages to Heroku — with a Cost

Jan 27 ·3min read

The Problem

As you may or may not know, I built my personal website as a Single Page Application (SPA) with the Angular framework and hosted on Github Pages. Everything works great until I integrated a Blog feature on my personal website. Things were getting ugly for search engine optimization (SEO) and social media preview.

My post couldn’t be indexed or previewed because there is nothing on the Html except for the <app-root></app-root> tag. The content and meta tags just weren’t ready yet.

The Solution

Server-Side Rendering (SSR) comes to rescue. This is how it works:

  1. Client sends a request to the server
  2. Server generates HTML dynamically
  3. Client gets a static HTML page with meta tags and the content

The catch is that I need a server to handle the request which Github Pages cannot support at this moment. So I have to find another provider. There are few options for a Nodejs hosting like Firebase, Heroku, OpenShift Online, Digital Ocean…

Heroku is a good option for me at the moment.

The Cost

  • My app will go to sleep after 30 minutes of inactivity.
  • I only have 1000 free hours/month (verified account)
  • I don’t have SSL unless paying $7/month (Hobby package)

The Implementation

Notice: If you are using yarn, you should switch to npm.

For Angular, there is a package that supports SSR named Angular Universal .

ng add @nguniversal/express-engine --clientProject your-project-name

For updating SEO meta tags, I used Meta and Title service from @angular/platform-browser. You can check the implementation from my Github .

After you get it working, it’s time for deploying to Heroku platform.

Create a new Heroku app

Login to Heroku

╰─ heroku loginheroku: Press any key to open up the browser to login or q to exit:Opening browser to https://cli-auth.heroku.com/...Logging in... doneLogged in as xxx@dalenguyen.me

Add project to Heroku

╰─ heroku git:remote -a dalenguyen-meset git remote heroku to https://git.heroku.com/dalenguyen-me.git

I push the project from dev to Heroku. Because my master branch is for Github pages.

╰─ git push heroku dev:masterEnumerating objects: 704, done.Counting objects: 100% (704/704), done.Delta compression using up to 8 threadsCompressing objects: 100% (550/550), done.…

Check for SEO tags on the Heroku app

The reference

Here are links to check your website’s SEO tags: