Clone repository:
git clone https://github.com/joeplaa-com/joeplaa.com.gitInstall packages:
yarn installOpen and update package.json:
"name": "joeplaa.com",
"version": "1.0.0",
"description": "joeplaa.com homepage",
"repository": "git@github.com:joeplaa/joeplaa.com.git",
"author": "Joep van de Laarschot <joep@joeplaa.com>",
"license": "MIT","browserslist": [
">0.25%",
"last 4 versions",
"not dead",
"not ie <=11",
"not op_mini all"
],Run development:
yarn devOpen browser and browse to localhost:3000.
To check for ESlint errors and warnings in your codebase run:
yarn lintTo check for TypeScript errors and warnings in your codebase run:
yarn typesRun all tests run:
yarn testBuild your site to be sure there are no hidden errors left:
yarn buildDeployment is pretty straight-forward if you know what to do. But figuring out how to deploy a site to a specific platform is always a hassle. I host a test version on a private server in Nginx. My production site is hosted in AWS CloudFront. These are the basic steps to take.
These steps are probably not enough to get it all running. I will undoubtly forget to mention some crucial steps, so for now this is for those people who know how to work with a shell in Ubuntu and are familiar with the AWS environment.
Install Nginx:
nginx=stable
sudo add-apt-repository ppa:nginx/$nginx
sudo apt update && sudo apt install Nginxhttps://www.nginx.com/resources/wiki/start/topics/tutorials/install/
Create a folder for your website and make sure the "upload user" owns the folder and is part of the nginx group (www-data):
sudo mkdir /var/www/test-www-joeplaa-com
sudo chown jodibooks:jodibooks /var/www/test-www-joeplaa-com
sudo usermod -a -G www-data jodibookshttps://askubuntu.com/questions/79565/how-to-add-existing-user-to-an-existing-group
Create Nginx config:
sudo nano /etc/nginx/sites-available/www.joeplaa.com.confCopy and paste from server/nginx/test.www.joeplaa.com.conf (the certbot lines will be automatically added in a next step)
server {
root /var/www/test-www-joeplaa-com;
index index.html;
server_name test.www.joeplaa.com;
location / {
try_files $uri $uri/ $uri.html =404;
}
location ~* .(html|js|css|png|webp|jpg|jpeg|ico|svg|json|pdf|woff2)$ {
expires max;
log_not_found off;
access_log off;
}
access_log /var/log/nginx/test-www-joeplaa_access.log;
error_log /var/log/nginx/test-www-joeplaa_error.log;
}
server {
listen 80;
listen [::]:80;
server_name test.www.joeplaa.com;
}Enable site:
sudo ln -s /etc/nginx/sites-available/test.www.joeplaa.com.conf /etc/nginx/sites-enabled/Configure DNS routing
Add SSL certificate
sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --nginxFollow the steps and certbot will create a certificate and configure Nginx for you.
Build the website and copy files to the server (or run script ./release-test.sh):
# Set correct environment variables
mv .env.production .env.production.backup
cp .env.test .env.production
# Install dependencies
yarn install
# Build website
yarn deploy
# Publish website to Nginx
# TEST (test.www.joeplaa.com):
scp -r public/* jodibooks@192.168.178.156:/var/www/test-www-joeplaa-com
# Restore environment variables
mv .env.production.backup .env.productionMake sure your user account has appropriate credentials:
Configure your profile:
View => Command Palette... => AWS: Create Credentials Profileserver/lambda/contact-form-api and follow the Readme there.Creat SSL certificate
us-east-1www.joeplaa.com and joeplaa.com ("Add another name to this certificate") and click "Next"website: www.joeplaa.com and click "Review"Create an S3 bucket to store your files:
aws s3 mb s3://www.joeplaa.com --region eu-central-1Create a CloudFront distribution
S3-www.joeplaa.comwww.joepla.com, joeplaa.comindex.html/404.htmlLambda@edge functions
Go to AWS Lambda
Change the region to us-east-1
Click "Functions" and "Create function"
Function name: LambdaUpdateHeaders
Runtime: Node.js 12.x
Change default execution role:
LambdaUpdateHeadersClick "Create function"
Copy the code from /server/lambda/LambdaUpdateHeaders/handler.js into the "Function code" index.js and click "Deploy"
Click "Add trigger" => Select "CloudFront" and click "Deploy to Lambda@Edge"
Click "Functions" and "Create function"
Function name: LambdaWebserverAndRedirects
Runtime: Node.js 12.x
Change default execution role:
LambdaWebserverAndRedirectsClick "Create function"
Copy the code from /server/lambda/LambdaWebserverAndRedirects/handler.js into the "Function code" index.js and click "Deploy"
Click "Add trigger" => Select "CloudFront" and click "Deploy to Lambda@Edge"
https://www.bayphillips.com/blog/gatsbyjs-using-amazon-s3-and-cloudfront/
DNS routing
wwwjoeplaa.comBuild the website and copy files to S3 (or run script ./release-prod.sh):
# Install dependencies
yarn install
# Build website
yarn deploy
# Upload to S3
aws s3 sync public/ s3://www.joeplaa.com --delete --profile joeplaa.com
# Invalidate CloudFront cache
#aws cloudfront create-invalidation --distribution-id <ID> --paths "/*" --profile joeplaa.comThe last line is a nuclear option. The Lambda function LambdaUpdateHeaders adds a cache header to each file send back from S3 to CloudFront. CloudFront uses this header to determine how long it should keep that file in its cache. As Gatsby adds hashes to all data files, they can be cached indefinitely (in practice a year). Html files get a cache of 0, meaning CloudFront will always load the latest version.
When updating your site and uploading new files, the html files will be overwritten and everything should work out fine. Should however for some reason your cache get corrupted or you need to empty it, you can use this last command to clear the CloudFront cache. Make sure you add your distribution id.