Add CloudFormation setup guide and create expandable-image

Author: Andrew Cai

content/latest/deploy/public-clouds/aws.md

@@ -13,7 +13,13 @@ menu:
 
 <ul class="nav nav-tabs nav-tabs-yb">
   <li>
-    <a href="#terraform" class="nav-link active" id="terraform-tab" data-toggle="tab" role="tab" aria-controls="terraform" aria-selected="true">
+    <a href="#cloudformation" class="nav-link active" id="cloudformation-tab" data-toggle="tab" role="tab" aria-controls="cloudformation" aria-selected="true">
+      <i class="icon-shell"></i>
+      CloudFormation
+    </a>
+  </li>
+  <li>
+    <a href="#terraform" class="nav-link" id="terraform-tab" data-toggle="tab" role="tab" aria-controls="terraform" aria-selected="true">
       <i class="icon-shell"></i>
       Terraform
     </a>
@@ -27,7 +33,10 @@ menu:
 </ul>
 
 <div class="tab-content">
-  <div id="terraform" class="tab-pane fade show active" role="tabpanel" aria-labelledby="terraform-tab">
+  <div id="cloudformation" class="tab-pane fade show active" role="tabpanel" aria-labelledby="cloudformation-tab">
+    {{% includeMarkdown "aws/cloudformation.md" /%}}
+  </div>
+  <div id="terraform" class="tab-pane fade" role="tabpanel" aria-labelledby="terraform-tab">
     {{% includeMarkdown "aws/terraform.md" /%}}
   </div>
    <div id="manual-deployment" class="tab-pane fade" role="tabpanel" aria-labelledby="manual-deployment-tab">

content/latest/deploy/public-clouds/aws/cloudformation.md

@@ -0,0 +1,43 @@
+## Prerequisites
+
+Download the template file 
+```sh
+$ wget https://raw.githubusercontent.com/yugabyte/aws-cloudformation/master/yugabyte_cloudformation.yaml
+```
+
+## AWS Command Line
+
+Create CloudFormation template:
+
+```sh
+$ aws cloudformation create-stack --stack-name <stack-name> --template-body yugabyte_cloudformation.yaml --parameters DBVersion=1.2.8.0, KeyName=<ssh-key-name>
+```
+Once resource creation completes, check that stack was created:
+
+```sh
+$ aws cloudformation describe-stacks --stack-name <stack-name>
+```
+From this output, you will be able to get the VPC id and YugaByte DB admin URL.
+
+## AWS Console
+
+1. Navigate to your AWS console and open the CloudFormation dashboard. Click `Create Stack`
+<img title="Cloud Formation dashboard" class="expandable-image" src="/images/deploy/aws/aws-cf-initial-dashboard.png" />
+<br>
+2. Prepare template using the downloaded template
+<img title="Prepare template" class="expandable-image" src="/images/deploy/aws/aws-cf-prepare-template.png" />
+<br>
+3. Specify the template file downloaded in Prerequisites: `yugabyte_cloudformation.yaml`
+<img title="Upload template" class="expandable-image" src="/images/deploy/aws/aws-cf-upload-template.png" />
+<br>
+4. Provide the required parameters. Each of these fields are prefilled with information from the configuration yaml file that was uploaded. `LatestAmiId` refers to the id of the machine image to use, see [more](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/finding-an-ami.html).
+<img title="Provide Parameters" class="expandable-image" src="/images/deploy/aws/aws-cf-provide-parameters.png" />
+<br>
+5. Configure Stack options. For more information about these options click [here](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-console-add-tags.html).
+<img title="Configure options" class="expandable-image" src="/images/deploy/aws/aws-cf-configure-options.png" />
+<br>
+6. Finalize changes before creation
+<img title="Review stack" class="expandable-image" src="/images/deploy/aws/aws-cf-review-stack.png" />
+<br>
+7. Check stack output in dashboard
+<img title="Check output" class="expandable-image" src="/images/deploy/aws/aws-cf-check-output.png" />

layouts/_default/single.html

@@ -63,7 +63,14 @@ <h1>{{ .Description }} {{ if .IsDraft }} (Draft){{ end }}{{ if .Page.Params.beta
 				{{ partial "footer_links" . }}
 				<!--{{ partial "feedback" . }}-->
 		</article>
-
+		<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
+			<div class="modal-dialog" role="document">
+				<div class="modal-content">
+				<div class="modal-body">
+				</div>
+				</div>
+			</div>
+		</div>
 		<div class="results" role="status" aria-live="polite">
 			<div class="scrollable">
 				<div class="wrapper">

src/index.js

@@ -128,6 +128,16 @@ $(document).ready(() => {
     },
   }).show();
 
+  $('.expandable-image').click(function () {
+    $('#imageModal').modal('show');
+    $('#imageModal .modal-body').html($(this).clone());
+  });
+
+  $('#imageModal').on('hide.bs.modal', () => {
+    $('#imageModal .modal-body').html('');
+    $('#imageModal').hide();
+  });
+
   ((document, Clipboard) => {
     const $codes = document.querySelectorAll('pre');
     // Check if there's a language class (mark of to-be-copied content)