danielhollcraft.com powered by gatsbyjs and serverless
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.
- An Amazon Web Services (AWS) account
- aws-cli installed
- AWS user created with programmatic access
- aws-cli authenticated
- Node.js installed
- serverless installed
- gatbsy.js installed
- 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.
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:
You must have a registered domain name that points to AWS name servers.
Go to api/serverless.yml and change the following to match the attributes for your project
As for everything else in the file I recommend that only advanced users modify it.
Deploy UI infrastructure with
Build the UI with
Deploy static build to S3
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.