Ghost gatsby post

gatsby-config.js

@@ -53,6 +53,12 @@ module.exports = {
         icon: `src/images/favicon.png`, // This path is relative to the root of the site.
       },
     },
+    {
+      resolve: `gatsby-remark-images`,
+      options: {
+        maxWidth: 500,
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

package.json

@@ -15,6 +15,7 @@
     "gatsby-plugin-sharp": "^2.6.14",
     "gatsby-plugin-sitemap": "^2.4.11",
     "gatsby-plugin-styled-components": "^3.3.10",
+    "gatsby-remark-images": "^3.3.21",
     "gatsby-source-filesystem": "^2.3.14",
     "gatsby-transformer-remark": "^2.8.25",
     "gatsby-transformer-sharp": "^2.5.7",

src/posts/ghost-gatsby-part-1-setting-up-the-s3-bucket-to-host-the-project.md

@@ -0,0 +1,121 @@
+---
+slug: '/blog/ghost-gatsby-part-1-setting-up-the-s3-bucket-to-host-the-project'
+date: '2019-02-04'
+title: 'Ghost & Gatsby Part 1 - Setting up AWS S3, CloudFront and Route53 to host the project'
+---
+
+This is the first part of the [series of posts](https://nishantdania.com/blog/guide-to-setup-ghost-gatsby-website) to setup your personal website using GatsbyJS and Ghost deployed on AWS.
+
+Here's what you will end up with after following this post:
+
+- An public S3 (Simple Storage Service) bucket on AWS where all the files generated by Gatsby will be stored
+- A CloudFront CDN instance that serves your content and provides an SSL layer for your website
+- A couple of DNS records needed to make it all work with your domain
+  If you don't have an AWS account, create one now [here](https://aws.amazon.com/).
+
+# Create a public S3 bucket
+
+Open the [S3 console](https://s3.console.aws.amazon.com/s3/home).
+
+Click on `Create Bucket`.
+
+Enter your domain name ( `aotd.co` in my case ) in the bucket name field.
+
+Click `Next`. You don't need to edit anything in the second screen. Click `Next` again.
+
+Grant public access by removing all the restrictions as shown:
+
+Click `Next` and then `Create Bucket`.
+
+Click on the bucket you just created to enter its settings.
+
+Click on the `Properties` tab on the top and then click on `Static website hosting`.
+
+Choose the `Use this bucket to host a website` option, type `index.html` in the Index Document field, note down the endpoint for later and click `Save`:
+
+Click on the `Permissions` tab and then on `Bucket Policy` and type the following policy (Replace the `aotd.co` with your domain name):
+
+```
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "PublicReadForGetBucketObjects",
+            "Effect": "Allow",
+            "Principal": "*",
+            "Action": "s3:GetObject",
+            "Resource": "arn:aws:s3:::aotd.co/*"
+        }
+    ]
+}
+```
+
+Click `Save`:
+
+That's it. You now have an S3 bucket setup to serve public files. Lets add SSL to this domain with CloudFront and Certificate Manager.
+
+# Create an SSL certificate for https
+
+Open the [Certificate Manager](https://console.aws.amazon.com/acm/home).
+
+Click `Request a certificate`.
+
+Choose `Request a public certificate`.
+
+Click `Request a certificate`.
+
+Enter your domain name and click `Add another name to this certificate`.
+
+Enter ASTERISK.YOUR_DOMAIN (e.g \*.aotd.co).
+
+Click `Next`
+
+Choose `DNS Validation` as the validation method and click `Review`.
+
+Click `Confirm and request`.
+
+In the Validation screen, click the domain name to option the dropdown menu and click `Create Record in Route53`. Click `Create` in the modal that pops up. Do this for both the domains (with and without asterisk). Click `Continue`. Wait a while for the certificates to get validated. This will take a few minutes.
+
+You now have the SSL certificates for your domain name.
+
+Take a deep breath and give yourself a pat. You've done a good job till now. We'll now create a CloudFront instance to serve your S3 bucket with this certificate.
+
+# Create a CloudFront instance to serve the S3 bucket via the SSL layer
+
+Open the [CloudFront console](https://console.aws.amazon.com/cloudfront/home).
+
+Click `Create Distribution`.
+
+Click `Get Started` under the `Web` section.
+
+Put the Endpoint of your S3 bucket (the full endpoint, not just the bucket name) in the `Origin Domain Name`.
+
+Find the `Alternate Domain Names (CNAMEs)` field and enter the name of your domain. E.g. `aotd.co`
+
+Choose the `Custom SSL Certificate` option under the `SSL Certificate field` and select the newly created certificate from the dropdown.
+
+Leave everything as is and click `Create Distribution` button at the bottom of the page. This will take about 15 mins to get provisioned and you'll then see the status field saying `Deployed`. Wait for this to happen before proceeding further.
+
+# Create DNS records for your domain
+
+Open the [Route53 console](https://console.aws.amazon.com/route53/home).
+
+Click on `Hosted Zones` in the sidebar.
+
+Click on `Create Hosted Zone`.
+
+Enter your domain name in the `Domain Name` field.
+
+Click `Create`.
+
+You also need to update the `NS` records in your Domain Registrar's website. In my case, I use GoDaddy. Click on the NS record that AWS provided for your hosted zone and update the TTL to 300. Note down the values of the NS records and click `Save record set`. Go to your domain registrar website and update the nameservers for your domain with the AWS ones. This step will be different based on your Registrar. Please google if you can't setup this. Or ask in the [Ghost Gatsby Spectrum channel](https://spectrum.chat/ghost-gatsby).
+
+Click `Create Record Set` to create an A record.
+
+Leave the `Name` field empty. Choose `Alias Yes` option and choose the `Alias Target` as the CloudFront instance you just created. Click `Create`.
+
+That's it. Now your domain points to this CloudFront instance and will serve the files from the S3 bucket.
+
+In the [next part](https://nishantdania.com/blog/ghost-gatsby-part-2-setting-up-a-ghost-blog-on-aws-ec2), you will setup a Ghost Blog on an EC2 instance.
+
+For any questions/doubts/issues, head over to the [Ghost Gatsby Spectrum channel](https://spectrum.chat/ghost-gatsby).

src/posts/ghost-gatsby-part-2-setting-up-a-ghost-blog-on-aws-ec2.md

@@ -0,0 +1,132 @@
+---
+slug: '/blog/ghost-gatsby-part-2-setting-up-a-ghost-blog-on-aws-ec2'
+date: '2019-02-04'
+title: 'Ghost & Gatsby Part 2 - Setting up a Ghost blog on AWS EC2'
+---
+
+This is the second part of the [series of posts](https://nishantdania.com/blog/guide-to-setup-ghost-gatsby-website) to setup your personal website using GatsbyJS and Ghost deployed on AWS.
+
+# Setup an EC2 instance to host Ghost
+
+Open the [EC2 console](https://console.aws.amazon.com/ec2/v2/home).
+
+Click `Launch Instance`.
+
+Choose the `Ubuntu Server 18.04 LTS (HVM), SSD Volume Type, 64 bit x86` option and click `Select`.
+
+Choose the `t2.micro` as the instance type.
+
+Click `Configure Security Group` tab on the top.
+
+Choose `Create a new security group` in the `Assign a security group` section. You can use the defaults provided.
+
+Click `Add Rule` and select `Http`.
+
+Click `Add Rule` again and select `Https`.
+
+Keep the `SSH` rule as is.
+
+Click `Review and Launch`.
+
+Click `Launch` on the next screen.
+
+Choose `Create a new key pair` option in the modal and give it a name.
+
+Click `Download Key Pair` and save the private key in a secure place. You'll need this to connect to the EC2 instance via SSH. Also, change the permissions of this file using this command in the terminal of your computer `chmod 400 /path-to/my-key-pair.pem`. This is needed since AWS wont allow you to connect to this instance otherwise.
+
+Click `Launch Instances`.
+
+It'll take a few minutes for your instance to get deployed.
+
+Visit the EC2 Home page and click on `Instances` in the sidebar.
+
+Click on the instance that you just created to view its settings.
+
+Copy the `IPv4 public IP`. We'll host the ghost blog on this address.
+
+# Setup the DNS record for the ghost blog
+
+Open the [Route53 console](https://console.aws.amazon.com/route53/home).
+
+Click on `Hosted Zones` in the sidebar.
+
+Click on your domain name to enter the settings for that domain.
+
+Click `Create Record Set`.
+
+In the `Name` field, you'll set the name to be where you want your Ghost admin to be installed. In my case, it'll be `ghost.aotd.co`. This is where you'll access your ghost editor later. Type in `ghost` in the `Name` field, or whatever you feel like.
+
+In the `value` field, enter the IP address of your EC2 instance that you just created.
+
+Click `Create`.
+
+# Setup Ghost on the EC2 instance
+
+Open your terminal and connect to your instance using this command:
+
+`ssh -i /path/my-key-pair.pem ubuntu@EC2_IP_THAT_YOU_COPIED`
+
+Type `yes` for the RSA fingerprint message.
+
+You are now connected to your instance. You'll now install Ghost on this instance.
+
+Run the following commands one by one in the EC2 terminal, enter `Yes` whenever asked in the process:
+
+```
+sudo apt-get update
+sudo apt-get upgrade (A modal might appear, press Enter to use the default value)
+sudo apt-get install nginx
+sudo ufw allow 'Nginx Full'
+sudo apt-get install mysql-server
+```
+
+If you are running Ubuntu 18.x, the following additional steps are required:
+
+```
+sudo mysql
+ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
+quit
+```
+
+Install NodeJS:
+
+```
+curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash
+sudo apt-get install -y nodejs
+```
+
+Install Ghost CLI:
+
+```
+sudo npm install ghost-cli@latest -g
+```
+
+Install Ghost admin:
+
+```
+sudo mkdir -p /var/www/ghost
+sudo chown ubuntu:ubuntu /var/www/ghost
+sudo chmod 775 /var/www/ghost
+cd /var/www/ghost
+ghost install
+```
+
+For this question: `Enter your blog URL`, enter the full https url you created earlier. In my case, it is `https://ghost.aotd.co`
+
+Enter the value for `Enter your MySQL hostname` as `localhost`
+
+Enter `ubuntu` as the `username`. Enter a password for the same.
+
+For the question `Do you wish to set up "ghost" mysql user?` type `n`.
+
+Type `Y` for the next steps.
+
+Enter your email address when asked for the SSL setup.
+
+Generating the SSH keys will take a few minutes. Type `Yes` for setting up systemmd and starting Ghost when asked.
+
+Thats it. You'll now have a Ghost Blog running on your domain e.g. `ghost.aotd.co`. Go to that URL and setup our blog.
+
+Head over to the [next part](https://nishantdania.com/blog/ghost-gatsby-part-3-setting-up-a-gatsby-site-with-gatsby-source-ghost-plugin) to connect this blog to a Gatsby site.
+
+For any questions/doubts/issues, head over to the [Ghost Gatsby Spectrum channel](https://spectrum.chat/ghost-gatsby).

src/posts/ghost-gatsby-part-3-setting-up-a-gatsby-site-with-gatsby-source-ghost-plugin.md

@@ -0,0 +1,59 @@
+---
+slug: '/blog/ghost-gatsby-part-3-setting-up-a-gatsby-site-with-gatsby-source-ghost-plugin'
+date: '2019-02-04'
+title: 'Ghost & Gatsby Part 3 - Setting up a Gatsby site with gatsby-source-ghost plugin'
+---
+
+This is the third part of the [series of posts](https://nishantdania.com/blog/guide-to-setup-ghost-gatsby-website) to setup your personal website using GatsbyJS and Ghost deployed on AWS.
+
+I'll go into some details of how the Ghost plugin for Gatsby works in a later post. For now, we'll just use a basic starter project to connect it your Ghost blog.
+
+# Generated an API key from Ghost
+
+Visit the admin page of your blog. It it the `/ghost` route of your blog. E.g. `ghost.aotd.co/ghost`.
+
+Click `Integrations` in the sidebar.
+
+Scroll down and click `Add custom integration`.
+
+Give it any name.
+
+Click `Create`
+
+Copy the API key that gets generated.
+
+# Using the starter project
+
+We will use the [ghost-gatsby-starter-mini](https://github.com/nishantdania/ghost-gatsby-starter-mini) project which is just a trimmed down version of the official [starter project](https://github.com/TryGhost/gatsby-starter-ghost). Feel free to use any of these, the trimmed version just removes any components or CSS that Ghost created by default to give you a cleaner start.
+
+Open your terminal and install Gatsby cli
+
+`npm install --global gatsby-cli`
+
+Install the starter project (Replace `personal blog` with the name of your blog):
+
+`gatsby new personal-blog https://github.com/nishantdania/ghost-gatsby-starter-mini`
+
+Enter the project directory:
+
+`cd personal-blog`
+
+There is a `.ghost.json` file inside this folder. We will now edit this file to set the API key of your project.
+
+Open that file and change the `apiUrl` value to your Ghost blog url for both production and development environments E.g. `ghost.aotd.co`
+
+Set the `contentApiKey` to the API key you generated in the Ghost Integrations.
+
+Thats it. Your Gatsby site will now pull data from your Ghost blog.
+
+To run this project, use the following command:
+
+`gatsby develop`
+
+This will pull the data from your blog and create static files from it.
+
+If you used the mini-starter project, you'll see a basic index page and the corresponding post pages at `http://localhost:8000/`.
+
+In the [last part](https://nishantdania.com/blog/ghost-gatsby-part-4-setting-up-aws-codebuild-for-auto-deploying-the-site) of this series, we'll deploy this site to your AWS S3 bucket using AWS CodeBuild which allows an auto deploy of your code from Github.
+
+For any questions/doubts/issues, head over to the [Ghost Gatsby Spectrum channel](https://spectrum.chat/ghost-gatsby).