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

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

Testing out https://themes.gohugo.io/themes/paige/ and following install of brew modules.
- brew install sass/sass/dart-sass-embedded
- hugo mod get github.com/willfaught/paige
- Might not be mod supported.
Testing out https://github.com/devcows/hugo-universal-theme
- Too much configuration for the single page I need
Testing out https://github.com/zjedi/hugo-scroll
- hugo mod get github.com/zjedi/hugo-scroll
- Added this to mockinterviewcoaching.au
Testing out https://themes.gohugo.io/themes/hugo-universal-theme/
- git clone https://github.com/devcows/hugo-universal-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 19, 2023: Page Update (f22a9b4)