lprsd / danielhollcraft.com

Personal website, powered by gatsbyjs and serverless www.danielhollcraft.com

danielhollcraft.com powered by gatsbyjs and serverless

Purpose

This the repo for danielhollcraft.com. It could also be used as a template for a freelancer/consultant personal blog. It includes an "about me" as the main page, a portfolio page, services page, blog, and contact form. It uses gatsby.js for the user interface. For the back-end API it uses serverless. The deployment of the UI and API are both managed by Serverless and the aws-cli.

Pre-requistes

1. An Amazon Web Services (AWS) account
2. aws-cli installed
3. AWS user created with programmatic access
4. aws-cli authenticated
5. Node.js installed
6. serverless installed
7. gatbsy.js installed
8. Mailgun account with a verified domain (recommended)

Top level commands

All commands must be used in the root file directory.

• setup: Install UI and API dependencies.
• static:deploy:prod: Deploy local UI build to production.
• static:destroy:prod: Destroy deployed UI production build.
• static:destroy:local: Destroy local UI production build.
• static:build: Build UI locally.
• static:build:deploy: Build and deploy UI.
• ui:local: Start UI server locally.
• ui:deploy:prod: Deploy UI production infrastructure.
• api:deploy:prod: Deploy back-end production infrastructure.
• api:local: Run local back-end API server.

Web UI

To create the front-end I used the library gatsby.js for static content generation. The reason I prefer gatsby.js as a static generation lib is because it uses React.js and I love to React! I use gatsby.js instead of vanilla React because it simplifies development in many ways. Very notably it generates routes through the filesystem. For example if I wanted a top level React component to be the main template for /blog, I create a folder in ui/pages/blog and then /blog will route to that top level component. It's the best part of PHP WITHOUT PHP!

The website uses SCSS as a CSS pre-processor.

It is deployed using serverless. While you can use Amazon Web Services (AWS), Azure, IBM Open Wisk, or Google Cloud for serverless deployments, I used AWS since it is the most mature and best IMHO. Please see ui/serverless.yml to see the deployment configuration for the UI. If you are confused about how to create, read, and use serverless.yml files, here are a few resources:

• acloud.guru where I received most of my education about serverless.
• serverless docs

To Deploy:

1. Install pre-requisites

2. You must have a registered domain name that points to AWS name servers.

3. Go to ui/serverless.yml and change the following to match the attributes for your project

   • custom.rootDomain
   • custom.devDomains
   • custom.prodDomains
   • provider.region

   As for everything else in the file I recommend that only advanced users modify it.

4. Deploy UI infrastructure with ui:deploy:prod

5. Build the UI with static:build

6. Deploy static build to S3 static:deploy:prod

API

The API is deployed with serverless. The API only contains one function that is an AWS Lambda function. The function serves as a submit function for the contact form. It takes the submitted form data and sends it to AWS Lambda which then sends the message via Mailgun to a specified environmentally configured variable e-mail address. Please see ui/serverless.yml to see the deployment configuration for the API.