basics of cloudflare / AWS / firebase deployment instructions (#335)

* basics of cloudflare deployment instructions * fix typo * add github actions information * update doc for working github action for auto cloudflare deployment * remove unneded comments form guide code example * remove unneded comment * add guide for S3 hosting, CloudFront CDN with GitHub actions for automatic deployment * firebase deployment with GitHub auto deploy Actions guide * add github actions information to guide * remove unneeded npm install results * move files over to guides, add frontmatter to md files * add index to frontmatter to do initial order in sidebar * no extra space Co-authored-by: Owen Buckley <[email protected]>
ProjectEvergreen · May 1, 2020 · d6eef76 · d6eef76
1 parent 6f09f8d
commit d6eef76
Show file tree

Hide file tree

Showing 4 changed files with 337 additions and 1 deletion.
diff --git a/www/pages/guides/cloudflare-workers-deployment.md b/www/pages/guides/cloudflare-workers-deployment.md
@@ -0,0 +1,118 @@
+---
+title: 'Cloudflare Workers Deployment'
+menu: side
+linkheadings: 3
+index: 2
+---
+
+## Cloudflare Workers Deployment
+
+[Cloudflare Workers](https://workers.cloudflare.com/) is an excellent option as a CDN for deploying your Greenwood site, though if you are new to using this service consider deploying with [Netlify](https://www.netlify.com) as it is a simpler process.
+
+This will require a paid account with Cloudflare (currently $5 per month) with a linked domain for custom domain and subdomains.
+
+### Setup
+
+You will need to globally install Cloudflare's CLI tool _Wrangler_
+
+```render bash
+yarn add global @cloudflare/wrangler
+```
+
+In the root of your project directory initialize _Wrangler_
+
+```render bash
+wrangler init
+```
+
+Authenticate your cloudflare account with:
+
+```render bash
+wrangler config
+```
+
+A _wrangler.toml_ file was generated at the root of your project directory, update it like this...
+
+```render toml
+name = "demo" //workers.dev subdomain name automatically named for the directory
+type = "webpack"
+account_id = "abcd12345...." //your account id
+
+[env.production]
+workers_dev = true
+
+[site]
+bucket = "./public" //where greenwood generated the compiled code
+entry-point = "workers-site"
+```
+
+Compile your code
+
+```render bash
+greenwood build
+```
+
+Then push your code to Cloudflare workers
+
+```render bash
+wrangler publish
+```
+
+When completed a url for workers subdomain will be printed in your terminal.
+
+To have automatic deployments whenever you push updates to your repo, you will need to configure GitHub actions to accomplish this, otherwise you can push updated manually but running the _build_ and _publish_ commands each time you wish to update the site.
+
+### Automatic Deployments with GitHub Actions
+
+Add the email address associated with your account and your global api key from Cloudflare to the repositories GitHub secrets.
+
+At the root of your project add '.github/workflows/main.yml'
+
+```render yml
+name: Deploy production site
+
+on:
+  push:
+      branches:
+        - master
+jobs:
+ build:
+   runs-on: ubuntu-latest
+   steps:
+      - uses: actions/checkout@v1
+      - name: Navigate to repo
+        run: cd $GITHUB_WORKSPACE
+      - name: Install Chromium Library Dependencies
+        run: |
+         sh ./.github/workflows/chromium-lib-install.sh
+      - uses: actions/setup-node@v1
+        with:
+           node-version: "10.x"
+      - name: Install deps
+        run: npm install
+      - name: Build docs
+        run: npm run build
+      - name: Publish
+        uses: cloudflare/[email protected]
+        with:
+           apiKey: \$\{\{ secrets\.\CF_WORKERS_KEY \}\}
+           email: \$\{\{ secrets\.\CF_WORKERS_EMAIL \}\}
+           environment: "production"
+```
+
+In the same directory as main.yml create a file 'chromium-lib-install.sh'
+
+```render sh
+#!/usr/bin/bash
+
+sudo apt-get update \\
+  && sudo apt-get install -yq libgconf-2-4 \\
+  && sudo apt-get install -y wget --no-install-recommends \\
+  && sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - \\
+  && sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \\
+  && sudo apt-get update \\
+  && sudo apt-get install -y google-chrome-unstable --no-install-recommends \\
+  && sudo rm -rf /var/lib/apt/lists/*
+```
+
+Push your updates to your repo and the action will begin automatically. This will create a new worker with the name from the toml file -production (IE demo-production), make sure custom url is attached to this worker.
diff --git a/www/pages/guides/firebase.md b/www/pages/guides/firebase.md
@@ -0,0 +1,112 @@
+---
+title: 'Firebase Deployment'
+menu: side
+linkheadings: 3
+index: 3
+---
+
+### Deploy on Firebase
+
+You will need an account, go to [https://firebase.google.com/](https://firebase.google.com/) get everything setup.
+
+Install the Firebase CLI tool:
+
+```render bash
+npm i -g firebase-tools
+```
+
+In your browser go to your firebase console
+  - then click 'Add a Project'
+  - create a name for your Project
+  - choose if you want analytics added to your project (optional)
+  - click 'Create Project' and wait for it to get setup
+
+In your Terminal, log into your firebase account
+
+```render bash
+firebase login
+```
+
+Initialize your project
+
+```render bash
+firebase init
+```
+
+Use the arrows to highlight 'Hosting: Configure and deploy Firebase Hosting sites' use the space select this option and then enter to confirm.
+
+Compile your code:
+
+```render bash
+yarn build
+```
+
+then
+
+```render bash
+firebase use --add
+```
+
+select the targeted project, add an alias (referenced in the .firebaserc file at the root of your project, you can just use 'default') for the deployment, then
+
+ ```render bash
+firebase deploy
+```
+
+Your application will be accessible now at the domain <YOUR-FIREBASE-APP>.firebaseapp.com
+
+### Auto Deployment with GitHub Actions
+
+Add your firebase token to GitHub Secrets as 'FIREBASE_TOKEN'; to get this run:
+
+```render bash
+firebase login:ci
+```
+
+
+At the root of your project add '.github/workflows/main.yml'
+
+```render yml
+name: Firebase Deployment
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Install Chromium Library Dependencies
+      run: |
+       sh ./.github/workflows/chromium-lib-install.sh
+    - name: Build
+      run: |
+        npm install
+        npm run build
+    - name: Firebase Deploy
+      run: |
+        sudo npm install -g firebase-tools
+        firebase deploy --token \$\{\{ secrets.FIREBASE_TOKEN \}\} -P your-firebase-project-name
+```
+
+In the same directory as main.yml create a file 'chromium-lib-install.sh'
+
+```render sh
+#!/usr/bin/bash
+
+sudo apt-get update \\
+  && sudo apt-get install -yq libgconf-2-4 \\
+  && sudo apt-get install -y wget --no-install-recommends \\
+  && sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - \\
+  && sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \\
+  && sudo apt-get update \\
+  && sudo apt-get install -y google-chrome-unstable --no-install-recommends \\
+  && sudo rm -rf /var/lib/apt/lists/*
+```
+
+Now every change to the master branch will compile and push your code to firebase.
diff --git a/www/pages/guides/netlify-cms.md b/www/pages/guides/netlify-cms.md
@@ -2,6 +2,7 @@
 title: 'Netlify CMS'
 menu: side
 linkheadings: 3
+index: 4
 ---
 
 ## Using a CMS
@@ -187,4 +188,4 @@ From the top of the page select **Publish** and then from the drop-down select *
 
 Your pull request will now be merged to the master branch. The entire site will be recompiled on netlify. In a few moments your new page will be live at your netlify domain `https://yourgeneratedurl-ads6387.netlify.com/blog/example`.
 
-More information about Netlify CMS can be found on the [Netlify CMS project website](https://www.netlifycms.org/).
+More information about Netlify CMS can be found on the [Netlify CMS project website](https://www.netlifycms.org/).
diff --git a/www/pages/guides/s3-cloudfront.md b/www/pages/guides/s3-cloudfront.md
@@ -0,0 +1,105 @@
+---
+title: 'AWS S3 & CloudFront Deployment'
+menu: side
+linkheadings: 3
+index: 1
+---
+
+## Deployment from AWS S3 & CloudFront
+
+This requires an [AWS](https://aws.amazon.com/) account and compiled code for your project from running `greenwood build`.
+
+### Setup S3 for Hosting
+
+Create a new bucket in S3, change the permissions to be open to all.
+
+Upload the contents of your 'public' directory (drag and drop all the files and folders, using the interface only grabs files).
+
+Within your bucket, click the "Properties" tab, select "Static website hosting" and check "Use this bucket to host a website
+" enter `index.html` to the "index document" input and save.
+
+If you did not set your permissions to open when you created the bucket, go to "Permissions" tab, edit "Block Public Access" to turn those off and save.
+
+Still in (or click on) the "Permissions" tab, click "Bucket Policy" and add the following snippet (putting in your buckets name)
+
+```render json
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "PublicReadGetObject",
+            "Effect": "Allow",
+            "Principal": "*",
+            "Action": "s3:GetObject",
+            "Resource": "arn:aws:s3:::your-bucket-name-here/*"
+        }
+    ]
+}
+```
+
+...and save. Your site will now be at the address visible in the "Static website hosting" card.
+
+### AWS CloudFront for CDN
+
+Navigate to CloudFront in your AWS account. Click "get started" in the web section. In the "Origin Domain Name" input, select the bucket you are setting up. Further down that form find "Default Root Object" and enter `index.html`, click "Create Distribution", then just wait for the Status to update to "deployed".
+
+Your site is now hosted on S3 with a CloudFront CDN.
+
+### GitHub Actions for Automatic Deployment
+
+Add your AWS Secret KEY and KEY ID to the repositories GitHub secrets.
+
+At the root of your project add '.github/workflows/main.yml'
+
+```render yml
+name: Upload Website to S3
+
+on:
+  push:
+    branches:
+    - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Navigate to repo
+        run: cd $GITHUB_WORKSPACE
+      - name: Install Chromium Library Dependencies
+        run: |
+         sh ./.github/workflows/chromium-lib-install.sh
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "10.x"
+      - name: Install deps
+        run: npm install
+      - name: Build docs
+        run: npm run build
+      - name: Publish to AWS S3
+        uses: opspresso/action-s3-sync@master
+        env:
+          AWS_ACCESS_KEY_ID: \$\{\{ secrets\.AWS_SECRET_ACCESS_KEY_ID \}\}
+          AWS_SECRET_ACCESS_KEY: \$\{\{ secrets\.AWS_SECRET_ACCESS_KEY \}\}
+          AWS_REGION: "us-east-2"
+          FROM_PATH: "./public"
+          DEST_PATH: "s3://your-s3-bucket-name" #your target s3 bucket name goes here
+          OPTIONS: "--acl public-read"
+```
+
+In the same directory as main.yml create a file 'chromium-lib-install.sh'
+
+```render sh
+#!/usr/bin/bash
+
+sudo apt-get update \\
+  && sudo apt-get install -yq libgconf-2-4 \\
+  && sudo apt-get install -y wget --no-install-recommends \\
+  && sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - \\
+  && sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \\
+  && sudo apt-get update \\
+  && sudo apt-get install -y google-chrome-unstable --no-install-recommends \\
+  && sudo rm -rf /var/lib/apt/lists/*
+```
+
+Push your updates to your repo and the action will begin automatically.