Skip to content

Creating your Portfolio Site with Heroku

Bryce Plunkett edited this page Dec 19, 2018 · 3 revisions

Creating your Portfolio Site with Heroku: The Basics

Read this page to learn how to use Heroku to create your portfolio site for free.

  1. Fork the repository and customize it (follow guides on other pages)
  2. Go to Herkou and create an app (you can use any name)
  3. Go to the dashboard of the app and switch the Deploy tab. The URL should look something like: https://dashboard.heroku.com/apps/{{app name}}/deploy/heroku-git where {{app name}} is the name of the app
  4. Under the deployment section, click on Connect to GitHub
  5. Login and select the forked portfolio repository
  6. An Automatic deploys section should appear. Choose the branch you want to build the project off of (probably master). Then click Enable Automatic Deploys. Now every time you commit to the branch you selected, the Heroku app will rebuild using the updated source.
  7. Click deploy branch. Wait for the build complete (might take around 10 minutes)]
  8. Access your app at https://{{app name}}.herokuapp.com/ where {{app name}} is the name of the app

Creating your Portfolio Site with Heroku: Keep your Portfolio Loading Fast

The Basic Heroku product is a free service, so to save money, the site will uncache your app if it isn't regularly accessed. In other words, every now and then, it will take a VERY long time for the site to load because Heroku needs to "spin up" the app back onto its servers. Luckily, there's a way to keep your app constantly cached.

  1. Go to the resources tab of the app's dashboard. The URL should look something like: https://dashboard.heroku.com/apps/{{app name}}/resources where {{app name}} is the name of the app
  2. Click on the Quickly add add-ons from Elements search bar
  3. Add New Relic APM with the free Wayne plan
  4. Click the New Relic APM add-on in the Add-ons section; it will redirect you to the New Relic site
  5. Click the New Relic product on the far right called Synthetics
  6. You prompted to add a monitor; fill out all the settings as needed where the URL points to your portfolio site. Select the location you feel is most relevant to where people will be accessing your site. Set any time <= 5 minutes for the time interval
  7. Hit Create Monitor. You're ready to go

What did you just do? At the specified interval, New Relic will ping your site. The purpose of the service is to regularly monitor the response time of your site, however, an unintended result is it will force Heroku to keep your app constantly cached. Thus, your site will continue to load quickly.

Adding a Custom Domain

Read this Heroku article