Create a free JAMStack blog using Ghost, Heroku and Netlify

Ghost

Background

Use Case

  1. Free; blog must remain free/low-cost.
  2. 100% availability; blog must always be up.
  3. Zero maintenance; blog must easy to maintain.
  4. Custom Design; blog must be unique and personalised.
  5. Custom Domain name; blog name must be easy to remember.
  6. Multiple contributors; different users can contribute to the blog.
  7. Friendly User Interface; writers must find interface easy to write on.

Why and what is Ghost, Heroku and Netlify?

Ghost

Heroku

Netlify

Prerequisites

  1. Heroku Account
    Create a Heroku Account, here.
  2. GitHub Account
    Create a GitHub Account, here.
  3. Netlify Account
    Create a Netlify Account, here. Connect your GitHub account to access your repositories.
  4. Custom Domain Name
    If you are a student, here is how you can get free custom domain names!
    Sign up for
    GitHub Education. You can get free custom domain names from name.com, namecheap, .TECH domain.

Step 1: Deploy Ghost 3.X server on Heroku

Free dyno and add-ons
  1. You may be prompted for payment info. Do not worry, everything is $0.00!
    Hint: Despite being free, you might want to try using a dummy credit card
Ghost server on Heroku
MySQL Database and Tables
Mailgun Email Service
  • Cloudinary : To store images and video resources;
    You can replace Cloudinary with S3. I will not cover the details.
  • JawsDB MySQL: To store actions, emails, integrations, members, permissions, posts, posts meta, roles, tags, settings, users etc.
    From Heroku app overview page, click on the JawsDB add-on you installed to access your JawsDB database dashboard. You can use the credentials and MySQL Workbench to connect to your JawsDB to access your data.
  • Mailgun: To send, receive and integrate emails.
    Your blog collaborators must be authorised receipents and agree to receive emails before they will receive emails from Mailgun. More info, here
Ghost Admin

Step 2: Deploy a starter frontend on Netlify

Introducing JAMstack!

JAMSTACK

Gatsby Starter Ghost starter project

GitHub project from TryGhost/gatsby-starter-ghost
Netlify Overview — Successful deployed website

Step 3: Integrate Ghost to Gatsby & Netlify

3.1 Gatsby: Populate content from own Ghost server

Gatsby Integration

3.2 Netlify: Updates in Ghost will trigger Netlify frontend re-builds

Netlify’s Ghost build hook
Netlify Integration Webhook

Step 4: Change to custom Domain Name

Netlify DNS
Register your domain

Step 5 : Integrate other webhooks (Optional)

Google Analytics: Track site visits to gain deeper understanding of your readers

gatsby-config.js file

Conclusion

Acknowledgements

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store