Bring back images

nishantdania · Aug 12, 2020 · d1a420d · d1a420d
1 parent 9764747
commit d1a420d
Show file tree

Hide file tree

Showing 8 changed files with 362 additions and 13 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -37,8 +37,23 @@ module.exports = {
         path: `${__dirname}/src/wiki`,
       },
     },
-    `gatsby-transformer-remark`,
     `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              // It's important to specify the maxWidth (in pixels) of
+              // the content container as this plugin uses this as the
+              // base for generating different widths of each image.
+              maxWidth: 650,
+            },
+          },
+        ],
+      },
+    },
     `gatsby-transformer-yaml`,
     `gatsby-plugin-sharp`,
     {

diff --git a/package.json b/package.json
@@ -15,7 +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-remark-images": "^3.3.25",
     "gatsby-source-filesystem": "^2.3.14",
     "gatsby-transformer-remark": "^2.8.25",
     "gatsby-transformer-sharp": "^2.5.7",

diff --git a/src/images/posts/bucket-policy.png b/src/images/posts/bucket-policy.png
diff --git a/src/images/posts/create-bucket.png b/src/images/posts/create-bucket.png
diff --git a/src/images/posts/request-aws-cert.png b/src/images/posts/request-aws-cert.png
diff --git a/src/images/posts/static-hosting.png b/src/images/posts/static-hosting.png
diff --git a/src/posts/ghost-gatsby-part-1-setting-up-the-s3-bucket-to-host-the-project.md b/src/posts/ghost-gatsby-part-1-setting-up-the-s3-bucket-to-host-the-project.md
@@ -25,6 +25,8 @@ Click `Next`. You don't need to edit anything in the second screen. Click `Next`
 
 Grant public access by removing all the restrictions as shown:
 
+![](../images/posts/create-bucket.png)
+
 Click `Next` and then `Create Bucket`.
 
 Click on the bucket you just created to enter its settings.
@@ -33,6 +35,8 @@ Click on the `Properties` tab on the top and then click on `Static website hosti
 
 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`:
 
+![](../images/posts/static-hosting.png)
+
 Click on the `Permissions` tab and then on `Bucket Policy` and type the following policy (Replace the `aotd.co` with your domain name):
 
 ```
@@ -52,6 +56,8 @@ Click on the `Permissions` tab and then on `Bucket Policy` and type the followin
 
 Click `Save`:
 
+![](../images/posts/bucket-policy.png)
+
 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
@@ -66,6 +72,8 @@ Click `Request a certificate`.
 
 Enter your domain name and click `Add another name to this certificate`.
 
+![](../images/posts/request-aws-cert.png)
+
 Enter ASTERISK.YOUR_DOMAIN (e.g \*.aotd.co).
 
 Click `Next`