/danielhollcraft.com

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

Primary LanguageCSSMIT LicenseMIT

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 api/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:

To Deploy:

  1. Install pre-requisites

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

  3. Go to api/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 api/serverless.yml to see the deployment configuration for the API.