{"componentChunkName":"component---src-templates-post-js","path":"/i-built-this-website","result":{"pageContext":{"content":{"raw":"{\"nodeType\":\"document\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I built this site. Let me tell you about it.\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"heading-2\",\"content\":[{\"nodeType\":\"text\",\"value\":\"The Motivation\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"My motivations to build this website are two fold:\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"ordered-list\",\"content\":[{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I wanted to have a place to show people some of the things I've built.\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"list-item\",\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I wanted to build a functional example of a \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"static website\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://en.wikipedia.org/wiki/Static_web_page\"}},{\"nodeType\":\"text\",\"value\":\" populated with content from a \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"headless CMS\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://jamstack.org/headless-cms/\"}},{\"nodeType\":\"text\",\"value\":\".\",\"marks\":[],\"data\":{}}],\"data\":{}}],\"data\":{}}],\"data\":{}},{\"nodeType\":\"heading-2\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Technologies\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"This static site was built with \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Gatsby \",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.gatsbyjs.com/\"}},{\"nodeType\":\"text\",\"value\":\"and \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Contentful\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.contentful.com/\"}},{\"nodeType\":\"text\",\"value\":\". \",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"embedded-asset-block\",\"content\":[],\"data\":{\"target\":{\"sys\":{\"id\":\"8qlqJaHjRlaGnDFME4Wqg\",\"type\":\"Link\",\"linkType\":\"Asset\"}}}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I write these posts in Contentful and I use Gatsby to present the content with \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"React\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://reactjs.org/\"}},{\"nodeType\":\"text\",\"value\":\" components. I use \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Jest\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://jestjs.io/\"}},{\"nodeType\":\"text\",\"value\":\" to test my React components. I chose Gatsby because I had already tinkered a bit with \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Next.js\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://nextjs.org/\"}},{\"nodeType\":\"text\",\"value\":\" and I wanted to try my hand at another React framework for this project. I chose Contentful because there is already \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"a nice Gatsby plugin\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful\"}},{\"nodeType\":\"text\",\"value\":\" that pulls Contentful data into a Gatsby project, and \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Contentful offers a free plan\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.contentful.com/pricing/\"}},{\"nodeType\":\"text\",\"value\":\".\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"heading-2\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Deployments & Hosting\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"embedded-asset-block\",\"content\":[],\"data\":{\"target\":{\"sys\":{\"id\":\"2qIPJxhHEoHGeYKdOKmu0r\",\"type\":\"Link\",\"linkType\":\"Asset\"}}}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"I write code with \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"VS Code\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://code.visualstudio.com/\"}},{\"nodeType\":\"text\",\"value\":\". When I am ready to commit my changes, I push the updated code to \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Github\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://github.com/\"}},{\"nodeType\":\"text\",\"value\":\" where \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Github Actions\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://github.com/features/actions\"}},{\"nodeType\":\"text\",\"value\":\" execute my tests, build the static website using the \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"gatsby-source-contentful\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://www.gatsbyjs.com/plugins/gatsby-source-contentful/\"}},{\"nodeType\":\"text\",\"value\":\" plugin, and uploads the build artifacts to \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"AWS S3\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://aws.amazon.com/s3/\"}},{\"nodeType\":\"text\",\"value\":\". I use \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Amazon Route 53\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://aws.amazon.com/route53/\"}},{\"nodeType\":\"text\",\"value\":\" to point my domain to an \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"AWS CloudFront\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://aws.amazon.com/cloudfront/\"}},{\"nodeType\":\"text\",\"value\":\" distribution which delivers this website to your browser which your eyeballs or screen reader are now reading. If you want to know more, the website code is available here: \",\"marks\":[],\"data\":{}},{\"nodeType\":\"hyperlink\",\"content\":[{\"nodeType\":\"text\",\"value\":\"https://github.com/hatertron3000/patrickbuildscoolstuff-gatsby-site\",\"marks\":[],\"data\":{}}],\"data\":{\"uri\":\"https://github.com/hatertron3000/patrickbuildscoolstuff-gatsby-site\"}},{\"nodeType\":\"text\",\"value\":\".\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}],\"data\":{}}]}","references":[{"id":"1e88c5fa-42c6-5ed1-9895-f82c3184c3ee","contentful_id":"8qlqJaHjRlaGnDFME4Wqg","gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=400&h=150&q=50&fm=webp 400w,\n//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=800&h=300&q=50&fm=webp 800w,\n//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=1600&h=600&q=50&fm=webp 1600w","sizes":"(min-width: 1600px) 1600px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=1600&h=600&q=50&fm=png","srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=400&h=150&q=50&fm=png 400w,\n//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=800&h=300&q=50&fm=png 800w,\n//images.ctfassets.net/fp1mn1nwu0hx/8qlqJaHjRlaGnDFME4Wqg/9502a5a04e7823267d650317efc94409/Gatsby_Contentful.png?w=1600&h=600&q=50&fm=png 1600w","sizes":"(min-width: 1600px) 1600px, 100vw"}},"layout":"constrained","width":1600,"height":600}},{"id":"a41401ba-f068-5eb0-89e0-d70c8a402f78","contentful_id":"2qIPJxhHEoHGeYKdOKmu0r","gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=334&h=180&q=50&fm=webp 334w,\n//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=667&h=360&q=50&fm=webp 667w,\n//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=1334&h=720&q=50&fm=webp 1334w","sizes":"(min-width: 1334px) 1334px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=1334&h=720&q=50&fm=png","srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=334&h=180&q=50&fm=png 334w,\n//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=667&h=360&q=50&fm=png 667w,\n//images.ctfassets.net/fp1mn1nwu0hx/2qIPJxhHEoHGeYKdOKmu0r/1152ea4da9ec7c8dc35740b8ec9dab41/I_built_this_website__2_.png?w=1334&h=720&q=50&fm=png 1334w","sizes":"(min-width: 1334px) 1334px, 100vw"}},"layout":"constrained","width":1334,"height":720}}]},"headline":"I built this website","summary":{"summary":"From my brain, to Github and AWS, to your eyeballs; Let me tell you all about how I built this website."},"publishedDate":"2021-04-07T00:04-05:00","slug":"i-built-this-website","thumbnail":{"gatsbyImageData":{"images":{"sources":[{"srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=198&h=194&q=50&fm=webp 198w,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=395&h=387&q=50&fm=webp 395w,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=790&h=773&q=50&fm=webp 790w","sizes":"(min-width: 790px) 790px, 100vw","type":"image/webp"}],"fallback":{"src":"//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=790&h=773&q=50&fm=png","srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=198&h=194&q=50&fm=png 198w,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=395&h=387&q=50&fm=png 395w,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=790&h=773&q=50&fm=png 790w","sizes":"(min-width: 790px) 790px, 100vw"}},"layout":"constrained","width":790,"height":773},"title":"Pepper Emoji","fixed":{"src":"//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=250&q=50","srcSet":"//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=250&h=245&q=50 1x,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=375&h=367&q=50 1.5x,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=500&h=489&q=50 2x,\n//images.ctfassets.net/fp1mn1nwu0hx/4btdm3c8lQ3BEzGxdk0OXY/3c61acb55424cb8ccf14a2b596735530/pepper.PNG?w=750&h=734&q=50 3x","width":250,"height":245}}}},"staticQueryHashes":["3159585216"]}