Run Ghost on Heroku with S3

Run Ghost on Heroku with S3

So Ghost has quickly become a very cool blogging platform that not only looks great but is also very quick and lean, not to mention the fact that is supports the AMP project right out of the box. On top of all of that, you can run it for FREE cheap on Heroku.

Heroku is a really remarkable hosting platform that transforms the way that you think about traditional web-hosting options. There is no "shell" access to speak of (well there is, but you never need to use it) and all of the deployments of code to the platform happen over GIT.

Who is this for?

If you are reading this, then you are probably like me and just like to play with new tech and occasionally like to try and write something meaningful down. This is likely for you. If you are looking for a simple and fast blogging platform that doesn't have a whole lot of frills, I got you covered. If you want a cheap way to host a blog for yourself or someone you know, check. If you want a blogging platform connected to every social network under the sun and has tons of custom-made themes that include mountains of plugins... Well, you want WordPress.


Prerequisites

The methods and tools that I am going to use rely heavily on Mac/Linux tech and terminology, so using one of those would be best. You can likely convert this to windows, but you should probably know what you are doing in advance.

  • Download and install Git.
  • Download and install NOM and Node.js.
  • You also need to download and unpack a current copy of the Ghost CMS.
  • Next you will need an account on Heroku (no credit card needed!)
  • The next piece of the puzzle is AWS, of which you will need an account as well. This service IS NOT free but can be the only cost to this whole project.
  • If you want SSL, you will need the Let's Encrypt cert-bot (Free SSL!). You can get that from here.

Note: You can use the Heroku Free-Tier to host this project, however if you want to use SSL certs, you are required to upgrade to, at minimum, the "Hobby Dev" plan from Heroku (currently $7/mo).

  • You will also need a template downloaded if you don't want to use the bundled "Casper" theme. Just Google "ghost cms themes" or click here and you should be off and running.

Let's Begin

  1. Download and install the [Heroku Toolbelt](https://toolbelt.heroku.com/)
  2. Open up your command prompt and type the following:
    heroku login
  3. Log into the Heroku account that you created above.
  4. Unpack the Ghost CMS archive to a folder and navigate to that folder in the command prompt.
  5. Next configuration step is to tell Heroku how to start Ghost. You can do this with a Procfile. In your local Ghost directory create a text file named Procfile:
    sudo vi Procfile
    and insert:
    web: npm start --production
    save and exit.
  6. Next we need to initialize the git repo, which is what you will use to push your site to heroku.
    git init
  7. Now we need to create the Heroku application:
    heroku create

    The heroku create command creates a new Heroku app where you can see and configure your site in the Heroku web interface. It also creates a new git remote which tells git where to send your files. You can verify your git remote was setup correctly by running:

    git remote -v
    Mine looks like this:

    heroku    git@heroku.com:stormy-brushlands-10247.git (fetch)
    heroku    git@heroku.com:stormy-brushlands-10247.git (push)
  8. Enter the database... Ghost has a number of options for DB's that you can use pretty easily, but for this case we are going to use Postgres as it works without much configuration. To initialize one on Heroku, type the following:
    heroku addons:add heroku-postgresql:hobby-dev
  9. Now that we have a DB, we need to know how to connect to it. You can find this information in the Heroku control panel (under databases), but it's easier to just grab it from the command line:
    DATABASE_URL: postgres://bghtsohebgsyrf:_5tDer2gvb_gdbGDnGnyIps6@ec6-19-43-25-89.compute-1.amazonaws.com:5432/gbdjhs56sdg32j
    The output you see contains all of the database connection information. Here is mine extrapolated:
    • Database URL: ec6-19-43-25-89.compute-1.amazonaws.com
    • Database Port: 5432
    • Database Name: gbdjhs56sdg32j
    • Database Username: bghtsohebgsyrf
    • Database Password: 5tDer2gvb_gdbGDnGnyIps6
  10. In your `config.js` file, find the database section under the production group and replace it with the following information: *(be sure to add in the information you got from the command in the previous step)*
    database: {
        client: 'postgres',
        connection: {
              host: 'database address',
              user: 'username',
              password: 'password',
              database: 'databasename',
              port: '5432'
        },
    
  11. Next we need to edit the Ghost configurations, in the config.js file. Heroku assigns a port for your Node app dynamically every time it starts. The Ghost `config.js` assumes that the port will be constant but this setup will not work in the Heroku environment. To get past this we can use the heroku environment variable `process.env.PORT`. Heroku assigns the port number Ghost needs to listen on to that variable.
    Configure this by editing the `config.js` file and replace:
    host: '127.0.0.1',
    port: '2368'
    with:
    host: '0.0.0.0',
    port: process.env.PORT
  12. The last big step here is configuring the image storage to use Amazon S3. The bad part about this is that this is the part that costs money.

    You CAN use other static asset hosting services as detailed on other sites, however at the time of writing, I was unable to get the others working successfully. In a perfect world, I would have been able to use DropBox for free or use my existing Digital Ocean sub to work there, but alas, S3 it is.

    This was probably the hardest part of this setup as there was a bunch of trial and error that ultimately worked. Here's the steps:

    1. Go to https://aws.amazon.com and sign up for an account.
    2. Log in and click on the S3 link and create your first bucket. Give it a unique name that means something to you and put it in your desired region.
    3. Click on the "Properties" button at the top-right and open the permissions section.
    4. Click on "Edit bucket policy" and paste in the following:
      {
          "Version": "2008-10-17",
          "Statement": [
              {
                  "Sid": "AllowPublicRead",
                  "Effect": "Allow",
                  "Principal": {
                      "AWS": "*"
                  },
                  "Action": [
                      "s3:GetObject"
                  ],
                  "Resource": [
                      "arn:aws:s3:::my-awesome-ghost-site/*"
                  ]
              }
          ]
      }
      

      Remember to change the name of your bucket in the last line to the name of the bucket you made above.

    5. Next, you need to create a user so Ghost can access and upload to the bucket. Head over to the Amazon IAM console and click the "Users" section on the left sidebar.
    6. Click the blue Create New Users button at the top of the page, then enter a name for the user.
    7. When you click Create to make the user, you'll be brought to a page that asks you to download credentials. Click Download Credentials to download a .csv file with important information for this user, then dismiss the window and get back to the users list.
    8. Next, we need to grant permissions for our new user. Select the user from the list, then scroll down and expand the "Permissions" category and the "Managed Policies" subcategory. Click Attach Policy then type "AmazonS3FullAccess" into the search and select the result with that title. Click Attach Policy in the bottom right to confirm and set the permissions.
    9. The last step is to add the connector for S3. I followed the instructions at the plugin's GitHub page here: https://github.com/colinmeinke/ghost-storage-adapter-s3

  13. The next step is to commit all the files to your local repo:
    git add .
    git commit -m "first commit of the new site!"
  14. You are now ready to push the files to Heroku for the first time:
    git push master heroku
    Lots of stuff will start scrolling across the screen. Watch for errors to help if you have any problems, but the deploy will take a couple of minutes to finish completely (even after the command prompt says it's finished) so be patient. If you need to look at the logs from the Heroku instance, type the following:
    heroku logs

    Next Items:

    • Add in SSL discussion for Let's Encrypt
    • Add in Discus for comments

Related Article