Notes Placing Website on AWS

Personal notes when adding websites to AWS Cloud

New Website Steps

Videos: TODO Link to Youtube Videos

The training I’ve Created: AWS Introduction for Websites

Registered domain name

TPP - for customer domains

  • As this has a whitelabel service, allowing customers to manage their own domains.

Synergy

  • Cheaper domains for wholesale use.
  • Whitelabel service is extremely limited.

AWS

  • Only real benefit it that everything is in one place and can be managed by API. Risk is that everything is in one place if there is an outage. (which I admit is rare).

DNS

Using wholesale DNS provider - this is for safety more than anything. Should the website service go down, I can quickly redirect to another provider.

Route 53

Automated!! Use domainadd.sh domainname Then delegate on Registry to NS entries displayed.

Hosts the DNS Records

  • Create hosted zone
  • Domain Name: same as rego
  • Key:
  • Create Hosted Zone
  • Delegate on DNS Wholesaler to NS Records
  • Create www CNAME to rego.

CodeCommit

AUTOMATED! use codecommitadd.sh domainname

Stores the Website master files https://ap-southeast-2.console.aws.amazon.com/codesuite/codecommit/repositories?region=ap-southeast-2

  • Create repository
    • Repository name
    • Key - add website
    • Create
  • Create repository (again)
    • Repository name: Same as above with “website” ie blahblab_website
    • Description - Public website files
    • Key - Add website name
    • Create

Need to create a branch on Laptop with GIT in the next step before moving to CodePipeline

S3

AUTOMATED Part of the codecommitadd script. Hosts the files https://s3.console.aws.amazon.com/s3/buckets?region=ap-southeast-2

  • Create a bucket and allow it to be public
  • Tag bucket with website

Lambda

This is used to copy the index.html to the bucket folder root, removing the need for redirects when a folder root is requested.

  • open createFolderIndexObject
  • Add Trigger
  • Add S3
  • PUT Object create Event
  • Select Bucket
  • Add .html as prefix (or htm if needed)
  • I acknowledge that using the same S3 bucket for both input and output is not recommended and that this configuration can cause recursive invocations, increased Lambda usage, and increased costs.
  • Add

Install GIT

Install xCode then Command line tools OR brew install git then: git config –global credential.helper store

Laptop GIT

https://ap-southeast-2.console.aws.amazon.com/codesuite/codecommit/repositories?region=ap-southeast-2

  • Click on the HTTPS for the repository. This will save it to clipboard
  • Terminal:
    • git clone paste_clipboard

Laptop HUGO

AUTOMATED! createhugo.sh domainname make sure to be in the workspace folder.

Create base framework in GIT

  • Terminal
    • brew upgrade if needed.
      • hugo 0.104.3 -> 0.111.3
    • brew install hugo
    • cd workspace folder - one below website git cloned folder
    • hugo new site git_website –force
      • Use –force as I’ve already created the folder. hugo likes to create its own folder.
    • cd git_website
    • rmdir public
    • rm hugo.toml (otherwise it will default to this instead of config.toml)
    • echo .DS_Store » .gitignore
    • git add -A
    • git commit -m “HUGO Fresh”
    • git push

Laptop GIT Part 2

AUTOMATED as part of createhugo.sh https://ap-southeast-2.console.aws.amazon.com/codesuite/codecommit/repositories?region=ap-southeast-2

  • Click on the HTTPS for the website public files repository ie blahblah_website .This will save it to clipboard
  • Terminal:
    • cd into hugo base git folder. The cloned folder.
    • git submodule add paste_clipboard public
      • Make sure to add the “public” at the end of above, so that it creates the folder public as the submodule
      • It will warn/error re checkout. This is normal as there are no files in it.
    • hugo
      • With no arguments it will create the website files in public/
    • cd public
    • git status
    • git add -A
    • git commit -m “Empty website”
    • git push Now we have mainline branch in the public website GIT repository. This allows us to move on to the Codepipeline step.

or git clone https://git-codecommit.ap-southeast-2.amazonaws.com/v1/repos/xx public

Download Obsidian

And open ‘content’ folder as a vault.

CodePipeline

Copies the GIT files to S3 https://ap-southeast-2.console.aws.amazon.com/codesuite/codepipeline/pipelines?region=ap-southeast-2

  • Create new pipeline
  • Source AWS CodeCommit
  • Repository name: blahblah_website (one created in CodeCommit with the public website)
  • Branch name: Mainline
  • default and recommended
  • Skip build stage
  • Deploy:
    • Amazon S3
    • Bucket - Public Website Bucket
    • deployment path - blank
    • Extract file before deploy ticked
    • Next
  • Create Pipeline
  • If source fails due to permission error - wait 10 seconds and click retry

Certificate Manager

Cloudfront will auto ask to do this: https://us-east-1.console.aws.amazon.com/acm/home?region=us-east-1#/certificates/list Must be US-EAST-1 due to Cloudfront requirements.

  • Make sure to add Additional Names of any website aliases
  • Add www. for each alias.
  • Create
  • Then refresh until certificate appears in Pending validation state.
  • Click on new certificate
  • Click Create records in Route53
  • new records to be added to route 53 will appear.
  • Click Create Records
  • Refresh until it says “Issued”

Cloudfront

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home?region=us-east-1#/distributions

  • Create Distribution
  • Origin domain: S3 Bucket
  • Create control setting
    • keep defaults
    • Creat
  • Redirect HTTP to HTTPS
  • Alternate domain name (CNAME) - optional
    • Add all the names from the SSL Certificate
  • Default root object: index.html (Lambda code next can’t update bucket root)
  • Create Distribution
  • The S3 bucket policy needs to be updated
    • Click Copy Policy
    • Click Go to S3 bucket permissions to update policy
    • Edit Policy
    • Paste Policy
    • Update

Route 53 Connect to Cloudfront

Point the DNS Records to the new Web URL

  • Click on Hosted Zone
  • Create Record
  • A Record
  • Alias
  • Alisa to Cloudfront distribution
  • Select the correct one
  • Create records Do for each domain in the SSL Cert/Cloudfront Also add CNAME for WWW

HUGO Modules setup

https://geeksocket.in/posts/hugo-modules/

  • cd into the website hugo dir
  • hugo mod init website.au (or if using github, the public repo name)
  • Update title and URL with HTTPS in config.toml
  • Create basic content ie _index.md

HUGO THEME

Release to Google

https://search.google.com/search-console

  • Make sure to submit sitemap.xml

Release to Bing

https://www.bing.com/webmasters/searchperf?siteUrl=https://davidrobinson.au/ Login with microsoft account

  • Make sure to submit sitemap.xml

Issues - JS / CSS not loading

Found a weird issue with integrity errors on the console. HASH was no longer working. Not sure if a caching issue with initial playing and different versions in the CloudFront cache. As a quick fix, I disabled it in the theme layouts


Last modified December 7, 2024: Page Update (fbc9a8b)