{"id":342,"date":"2021-10-29T20:36:04","date_gmt":"2021-10-29T20:36:04","guid":{"rendered":"https:\/\/cms.enriquechavez.co\/?p=342"},"modified":"2021-10-30T00:42:24","modified_gmt":"2021-10-30T00:42:24","slug":"a-new-site-new-look-new-stack","status":"publish","type":"post","link":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/","title":{"rendered":"A new site, new look, new stack."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">One of my goals for the last quarter of the year was to get some time to work on my personal site. The previous version was released five years ago, and the site has been virtually untouched since then.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Stack<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I wanted to try a new stack keeping WordPress as my primary CMS but build the frontend wholly decoupled for this version. The first decision was going the headless way, and there are several options to develop a headless site these days, <a href=\"https:\/\/nuxtjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">NuxtJs<\/a>, <a href=\"https:\/\/nextjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">NextJs<\/a>, <a href=\"https:\/\/gridsome.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Gridsome<\/a>, <a href=\"https:\/\/www.gatsbyjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Gatsby<\/a>, etc. The second point was the use of <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ReactJS<\/a>. The decision was easy considering these two variables, Gatsby.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gatsby allows you to create static sites taking the content from external sources. These sources can be markdown files, APIs, and in my case, WordPress along with <a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GraphQL<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We need a couple of plugins on our WordPress site to expose the site&#8217;s information via GraphQL, <a href=\"https:\/\/www.wpgraphql.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP GraphQL<\/a>, and <a href=\"https:\/\/wordpress.org\/plugins\/wp-gatsby\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP Gatsby<\/a>; after you activate the plugins, you don&#8217;t need to configure anything else.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you don&#8217;t know what GraphQL is, let me tell you that it is an API where you can make queries directly from the client to obtain only the desired information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As I said before, I&#8217;m using Gatsby as the site generator, but for the frontend, I use RactJS, <a href=\"https:\/\/www.framer.com\/motion\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Motion<\/a> for some visual effects, and <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TailwindCSS<\/a> for all the styling, and that&#8217;s it, nothing fancy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I really enjoyed making this new version, and I&#8217;ll post more about what I learned in the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For now, that&#8217;s it, and if you want to learn more about Headless sites or chat, below, you can find my Twitter.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of my goals for the last quarter of the year was to get some time to work on my personal site. The previous version was released five years ago, and the site has been virtually untouched since then.<\/p>\n","protected":false},"author":1,"featured_media":346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[227],"tags":[],"class_list":["post-342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A new site, new look, new stack. - Enrique Ch\u00e1vez Fullstack Developer<\/title>\n<meta name=\"description\" content=\"Enrique Chavez 2021 version, running under GatsbyJS, WordPress and Tailwind CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A new site, new look, new stack. - Enrique Ch\u00e1vez Fullstack Developer\" \/>\n<meta property=\"og:description\" content=\"Enrique Chavez 2021 version, running under GatsbyJS, WordPress and Tailwind CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\" \/>\n<meta property=\"og:site_name\" content=\"Enrique Ch\u00e1vez Fullstack Developer\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-29T20:36:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-30T00:42:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"618\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tmeister\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tmeister\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\"},\"author\":{\"name\":\"Tmeister\",\"@id\":\"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8\"},\"headline\":\"A new site, new look, new stack.\",\"datePublished\":\"2021-10-29T20:36:04+00:00\",\"dateModified\":\"2021-10-30T00:42:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\"},\"wordCount\":286,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8\"},\"image\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg\",\"articleSection\":[\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\",\"url\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\",\"name\":\"A new site, new look, new stack. - Enrique Ch\u00e1vez Fullstack Developer\",\"isPartOf\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg\",\"datePublished\":\"2021-10-29T20:36:04+00:00\",\"dateModified\":\"2021-10-30T00:42:24+00:00\",\"description\":\"Enrique Chavez 2021 version, running under GatsbyJS, WordPress and Tailwind CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage\",\"url\":\"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg\",\"contentUrl\":\"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg\",\"width\":1200,\"height\":618},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cms.enriquechavez.co\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A new site, new look, new stack.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cms.enriquechavez.co\/#website\",\"url\":\"https:\/\/cms.enriquechavez.co\/\",\"name\":\"Enrique Ch\u00e1vez Fullstack Developer\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cms.enriquechavez.co\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8\",\"name\":\"Tmeister\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/093cb2781a999a54a8c7bf7202c241adc5b45a3a36a9cf7d01807d724f2164d9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/093cb2781a999a54a8c7bf7202c241adc5b45a3a36a9cf7d01807d724f2164d9?s=96&d=mm&r=g\",\"caption\":\"Tmeister\"},\"logo\":{\"@id\":\"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/image\/\"},\"description\":\"Enrique Chavez is a full-stack developer with almost 20 years of experience in the industry. he is an extremely versatile developer working on a plethora of projects, from startups to established companies.\",\"sameAs\":[\"https:\/\/enriquechavez.co\"],\"url\":\"https:\/\/cms.enriquechavez.co\/author\/echavez\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A new site, new look, new stack. - Enrique Ch\u00e1vez Fullstack Developer","description":"Enrique Chavez 2021 version, running under GatsbyJS, WordPress and Tailwind CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/","og_locale":"en_US","og_type":"article","og_title":"A new site, new look, new stack. - Enrique Ch\u00e1vez Fullstack Developer","og_description":"Enrique Chavez 2021 version, running under GatsbyJS, WordPress and Tailwind CSS.","og_url":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/","og_site_name":"Enrique Ch\u00e1vez Fullstack Developer","article_published_time":"2021-10-29T20:36:04+00:00","article_modified_time":"2021-10-30T00:42:24+00:00","og_image":[{"width":1200,"height":618,"url":"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg","type":"image\/jpeg"}],"author":"Tmeister","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tmeister","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#article","isPartOf":{"@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/"},"author":{"name":"Tmeister","@id":"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8"},"headline":"A new site, new look, new stack.","datePublished":"2021-10-29T20:36:04+00:00","dateModified":"2021-10-30T00:42:24+00:00","mainEntityOfPage":{"@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/"},"wordCount":286,"commentCount":0,"publisher":{"@id":"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8"},"image":{"@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage"},"thumbnailUrl":"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg","articleSection":["Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/","url":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/","name":"A new site, new look, new stack. - Enrique Ch\u00e1vez Fullstack Developer","isPartOf":{"@id":"https:\/\/cms.enriquechavez.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage"},"image":{"@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage"},"thumbnailUrl":"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg","datePublished":"2021-10-29T20:36:04+00:00","dateModified":"2021-10-30T00:42:24+00:00","description":"Enrique Chavez 2021 version, running under GatsbyJS, WordPress and Tailwind CSS.","breadcrumb":{"@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#primaryimage","url":"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg","contentUrl":"https:\/\/cms.enriquechavez.co\/wp-content\/uploads\/2021\/10\/ec-screnshoot-optimized.jpg","width":1200,"height":618},{"@type":"BreadcrumbList","@id":"https:\/\/cms.enriquechavez.co\/a-new-site-new-look-new-stack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cms.enriquechavez.co\/"},{"@type":"ListItem","position":2,"name":"A new site, new look, new stack."}]},{"@type":"WebSite","@id":"https:\/\/cms.enriquechavez.co\/#website","url":"https:\/\/cms.enriquechavez.co\/","name":"Enrique Ch\u00e1vez Fullstack Developer","description":"","publisher":{"@id":"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cms.enriquechavez.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/52f69f25d6b54a137e9bb885dd20cdf8","name":"Tmeister","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/093cb2781a999a54a8c7bf7202c241adc5b45a3a36a9cf7d01807d724f2164d9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/093cb2781a999a54a8c7bf7202c241adc5b45a3a36a9cf7d01807d724f2164d9?s=96&d=mm&r=g","caption":"Tmeister"},"logo":{"@id":"https:\/\/cms.enriquechavez.co\/#\/schema\/person\/image\/"},"description":"Enrique Chavez is a full-stack developer with almost 20 years of experience in the industry. he is an extremely versatile developer working on a plethora of projects, from startups to established companies.","sameAs":["https:\/\/enriquechavez.co"],"url":"https:\/\/cms.enriquechavez.co\/author\/echavez\/"}]}},"_links":{"self":[{"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/posts\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":2,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/posts\/342\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/posts\/342\/revisions\/345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/media\/346"}],"wp:attachment":[{"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/media?parent=342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/categories?post=342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cms.enriquechavez.co\/wp-json\/wp\/v2\/tags?post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}