-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpath---2018-5-25-gatsby-74ff6805b3873f2e46fe.js
2 lines (2 loc) · 21.2 KB
/
path---2018-5-25-gatsby-74ff6805b3873f2e46fe.js
1
2
webpackJsonp([0xc335cf7bf80a],{419:function(a,s){a.exports={data:{site:{siteMetadata:{title:"Armando Sosa",author:"Armando Sosa"}},markdownRemark:{id:"/Users/soska/dev/personal/soska.github.com/src/posts/2018/5/25/gatsby/index.md absPath of file >>> MarkdownRemark",html:'<p>This site runs on <a href="https://gatsbyjs.com">Gatsby</a>, the open source static website generator\nthat just recently <a href="https://www.gatsbyjs.org/blog/2018-05-24-launching-new-gatsby-company/">became a venture backed company</a> and I’m liking it a lot. Look, this is just the third CMS I have used in my <em>whole life</em> so it’s kinda big deal. My first blog, around 2003, was done in <a href="https://www.movabletype.org/">Movable Type</a> 2 and I only switched to WordPress in 2006.</p>\n<p>WordPress was not only my CMS of choice, it also became a good chunk of my livelihood so the decision of switching to something else did not come easy. But all my research indicates that static web builders are the future and Gatsby seems to be the best choice for my needs.</p>\n<p>Still, it wasn’t exactly easy to get this site to a point where I’m satisfied with the end-product. My guess is that other people may be in the same position I was, so, here are some things I learned in my journey to Gatsby that may be helpful to others.</p>\n<p>\n <a\n class="gatsby-resp-image-link"\n href="/static/gatsby-ss-4957c24e50345a12bf6e3640247b47df-be672.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n \n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 49.826187717265356%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAABrklEQVQoz42S2y47URTG+0Jc8CJceAEJj0DE6RIPIMTpyilu3SBohaJB80dQotVQZYZ2Zjp79qEznc/ee+JQSv472Vlrdmb/1vq+vWKcCpSeXdiWDUopgiDQ2/f9hlHt91ULajqWDYL5kT1M9W0hRioU+SsDd7k8DNMA5wyiKkAIgRBCFvHkGYfrumCM6fwrzDIj2GTvJmYG4xGwYhFw6iOU/4S1EFUeyAshAr+m8zBE3WoEm5Ww6f5txDwJPNq8we7qBU73crhI3eN8P4+bf0VcHt0jtX4N4jANCCU5+AU2MxDtGCUMp8kc0jtZHK5ncLCWwVkyj+OtW2TSBZzEs6Cu0JC/YLNDCQy0L0vJDkU6cas7TG1cwy650gIPgvmRZCHlSxuUBY1lxjGnYG1L6Gwejzx0ygQvRVtHRjk82bXg1S+e/R+su3VSeugylIwKzKIF89HC65OjO1SF1Eip7iKY90Pmd9gH0ChYeMiaKOReYMq8UvZ0l67t6flTc7YwWv+aKn6HdbVMRJLVwyipzOM6V0X0ufx+fXawOJbERM8nbG44geGOFXQ21cNUfAPpXbArBvd7YwAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n >\n <img\n class="gatsby-resp-image-image"\n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n alt="gatsby ss"\n title=""\n src="/static/gatsby-ss-4957c24e50345a12bf6e3640247b47df-fb8a0.png"\n srcset="/static/gatsby-ss-4957c24e50345a12bf6e3640247b47df-1a291.png 148w,\n/static/gatsby-ss-4957c24e50345a12bf6e3640247b47df-2bc4a.png 295w,\n/static/gatsby-ss-4957c24e50345a12bf6e3640247b47df-fb8a0.png 590w,\n/static/gatsby-ss-4957c24e50345a12bf6e3640247b47df-be672.png 863w"\n sizes="(max-width: 590px) 100vw, 590px"\n />\n </span>\n </span>\n \n </a>\n </p>\n<h2>Don’t start from scratch</h2>\n<p>Gatsby is written in JavaScript and it works thanks using a combination of a many cutting-edge technologies. The stack is so hip that it sounds like somebody’s making a parody of the modern web stack: Node, React, Webpack, Babel, ES6, GraphQL, plus Markdown and CSS-in-js for a blog like the one you’re reading. I think these technologies are great —I even work with most of them on a daily basis!—, but I think it can get very overwhelming very fast.</p>\n<p>So, if you want to build a blog, your first instinct may be to <a href="https://medium.freecodecamp.org/how-to-build-a-react-and-gatsby-powered-blog-in-about-10-minutes-625c35c06481">follow a tutorial like this</a>. Don’t bother. Instead, use <a href="https://github.com/gatsbyjs/gatsby-starter-blog">Gatsby’s official starter blog</a>.</p>\n<p>Now, both the design and structure of the starter blog are very opinionated and it can be hard to find how to customize it. Don’t panic. I will teach you how.</p>\n<h2>Get a base style to your liking.</h2>\n<p>If you’re from the old school, like me, the first thing you’ll want to do is find the master CSS file to <code class="language-text">cmd+a</code> and <code class="language-text">delete</code> everything and start your design from scratch. Spoiler alert: You’ll not find a single CSS file in your Gatsby installation.</p>\n<p>The styles you see on screen will come from two places: either from a package called <a href="https://kyleamathews.github.io/typography.js/">typography.js</a> or from inline style definitions. I know. Breath. Don’t get angry. This is 2018 and kids these days like to put their CSS in their JS. Stay with me and I’ll show you that it ain’t so bad.</p>\n<p>So, first things first, open the <code class="language-text">src/utils/typography.js</code> file and see that it’s importing something called <code class="language-text">Wordpress2016</code> (don’t tell Matt about that lowercase p) from a package called <code class="language-text">typography-theme-wordpress-2016</code>. If you <a href="https://github.com/KyleAMathews/typography.js/blob/master/packages/typography-theme-wordpress-2016/src/index.js">look at that package contents</a> you’ll see that it’s a configuration object for the typography.js plugin. What that means is that this file <strong>determines the global styles for your site</strong>.</p>\n<p>If you just don’t like this theme, there’s a number of oficially maintained <a href="https://github.com/KyleAMathews/typography.js/tree/master/packages">ones you can chose from</a>. For example, if you’re feeling retro you can just install a theme inspired in the old <a href="http://binarybonsai.com/kubrick/">Kubrick WP theme</a>.</p>\n<p>Install it using npm:</p>\n<div class="gatsby-highlight">\n <pre class="language-text"><code class="language-text">npm install --save typography-theme-wordpress-kubrick</code></pre>\n </div>\n<p>Then import that package from the <code class="language-text">src/utils/typography.js</code> instead.</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> Typography <span class="token keyword">from</span> <span class="token string">\'typography\'</span><span class="token punctuation">;</span>\n<span class="token comment">// import Wordpress2016 from \'typography-theme-wordpress-2016\'</span>\n<span class="token keyword">import</span> Wordpress2016 <span class="token keyword">from</span> <span class="token string">\'typography-theme-wordpress-kubrick\'</span><span class="token punctuation">;</span></code></pre>\n </div>\n<p>Restart your server and voila, you’re in 2006.</p>\n<p>\n <a\n class="gatsby-resp-image-link"\n href="/static/kubrick-50f17b0a082432a8394309ba3589b005-78313.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n \n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 64.1955835962145%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABeklEQVQ4y6VS226DMAzt///R1ofuobx0e5xapk2j3AIttwIJgVA4M2k79d5JO9KRHZMY+9gjEPq+1xzAeQkhBIqi0PbYr6oKZVkiTVI0TfP75vj96DxgmiaMqYHJZALDmGKxMDEej8k3MJu9Yj6f4/npWVNU8nrCQ3BAEkcoOD+5ePh2jG2rhgsnb08q7LpOB96mLzDn74iiGIHPsLSWsCwLjDEEwQosTOCHKdkMScZvV3j8JykVvr0UqziHoGrLkpMVpG8FLlsUQmnyqj3R8Sxhv+/gsr1HuNryIehEEl9M4JP44QtkpbrQ81zbuwmzTYl1vEHOG4i6Q9N2f6ru5tqswhCObcNzXaIDz/N2pLPjuHo4Pg3LcWwdV0rdT5hvaHrRGqqW6LcKLa1HXTd6kTX3vpRS24ctr/MWdtzAJVoriQ3f/q/ldZLDDVKkuUQuWshmqxd42NN+oPYvB3I7IWkY+D5pGcAn3ULm00KTTzHGdnY4D5qe6zfgB7Iw8PiPvWl9AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n >\n <img\n class="gatsby-resp-image-image"\n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n alt="kubrick"\n title=""\n src="/static/kubrick-50f17b0a082432a8394309ba3589b005-fb8a0.png"\n srcset="/static/kubrick-50f17b0a082432a8394309ba3589b005-1a291.png 148w,\n/static/kubrick-50f17b0a082432a8394309ba3589b005-2bc4a.png 295w,\n/static/kubrick-50f17b0a082432a8394309ba3589b005-fb8a0.png 590w,\n/static/kubrick-50f17b0a082432a8394309ba3589b005-78313.png 634w"\n sizes="(max-width: 590px) 100vw, 590px"\n />\n </span>\n </span>\n \n </a>\n </p>\n<p>Of course, you can write your own theme and just import from inside your project. That’s what I did.</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">import</span> Typography <span class="token keyword">from</span> <span class="token string">\'typography\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Wordpress2016 <span class="token keyword">from</span> <span class="token string">\'../theme\'</span><span class="token punctuation">;</span></code></pre>\n </div>\n<p>And <a href="https://github.com/soska/soska.github.com/blob/develop/src/utils/theme.js">here’s my theme’s source</a>, in case somebody wants it.</p>\n<p>Remember, customizing this file will only affect your global base styles.</p>\n<h2>Take control of your fonts.</h2>\n<p>If you like Google’s webfonts, Typography.js has this very nice feature were you can tell it which fonts you’ll like to use and it will do all the <code class="language-text">@font-face</code> enchanments for you. Just declare a googleFonts property in your theme with the name of the font you want and the variants you need.</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"> <span class="token comment">// ...rest of theme object</span>\n googleFonts<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'Noto Serif\'</span><span class="token punctuation">,</span>\n styles<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'400\'</span><span class="token punctuation">,</span> <span class="token string">\'400i\'</span><span class="token punctuation">,</span> <span class="token string">\'700\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token comment">// ...more object configs</span></code></pre>\n </div>\n<p>One more thing: for some reason, the <code class="language-text">blog-starter</code> author didn’t want to use this feature, but you can go against his will and comment or delete this line in <code class="language-text">src/utils/typography.js</code>.</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token keyword">delete</span> Wordpress2016<span class="token punctuation">.</span>googleFonts<span class="token punctuation">;</span></code></pre>\n </div>\n<p>Restart your server and you’ll be able to use the google fonts in your theme or in your component styles.</p>\n<h2>Embrace CSS-in-JS</h2>\n<p>At first, I tried to go against the current and just use a stylesheet like the good old times when we were young and The Big Bang Theory was still funny. And you know what? Not worth it.</p>\n<p>The funny thing is that I’ve used almost every CSS-in-JS library for react (<a href="https://github.com/cssinjs/jss">JSS</a>,<a href="https://formidable.com/open-source/radium/">Radium</a>, <a href="https://github.com/styled-components/styled-components">StyledComponents</a>, <a href="https://github.com/paypal/glamorous">Glamourous</a>) in one way or another for apps in the past, but somehow it felt wrong within a content site. That’s old man nonsense.</p>\n<p>By default, your Gatsby installation will be using React’s <code class="language-text">style</code> property to customize components. For example, take a look into the header component defined in <code class="language-text">src/layouts/index.js</code>:</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token operator"><</span>h1\n style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token operator">...</span><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n marginBottom<span class="token punctuation">:</span> <span class="token function">rhythm</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n marginTop<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span>\n<span class="token operator">></span>\n <span class="token operator"><</span>Link\n style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n boxShadow<span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">,</span>\n textDecoration<span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">,</span>\n color<span class="token punctuation">:</span> <span class="token string">\'inherit\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span>\n to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">\'/\'</span><span class="token punctuation">}</span>\n <span class="token operator">></span>\n Gatsby Starter Blog\n <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span>\n<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span></code></pre>\n </div>\n<p>The problem with this approach is that when the components are rendered in the browser, those style objects will become inline styles and that’s not only disgusting it’s also very limiting. For example, you can’t define a <code class="language-text">:hover</code> state for that link using inline styles.</p>\n<p>There are Gatsby plugins to use almost any one of the css-in-js libraries I listed above, but I would recommend you to go with <a href="https://github.com/threepointone/glamor">Glamor</a>. The way Glamor works is that it replaces the default <code class="language-text">JSX</code> pragma with it’s own and that allows it to provide a <code class="language-text">css</code> property to every component.</p>\n<p>On the surface, this <code class="language-text">css</code> property looks just like <code class="language-text">style</code>, but behind the scenes Glamor uses some magic to generate actual stylesheets that are injected dynamically into your code. So that file above can become like this:</p>\n<div class="gatsby-highlight">\n <pre class="language-javascript"><code class="language-javascript"><span class="token operator"><</span>h1\n css<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token operator">...</span><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n marginBottom<span class="token punctuation">:</span> <span class="token function">rhythm</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n marginTop<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span>\n<span class="token operator">></span>\n <span class="token operator"><</span>Link\n css<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n boxShadow<span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">,</span>\n textDecoration<span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">,</span>\n color<span class="token punctuation">:</span> <span class="token string">\'inherit\'</span><span class="token punctuation">,</span>\n <span class="token string">\'&:hover\'</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>\n color<span class="token punctuation">:</span> <span class="token string">\'rebeccapurple\'</span><span class="token punctuation">,</span>\n textDecoration<span class="token punctuation">:</span> <span class="token string">\'underline\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span>\n to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">\'/\'</span><span class="token punctuation">}</span>\n <span class="token operator">></span>\n Gatsby Starter Blog\n <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span>\n<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span></code></pre>\n </div>\n<p>As you can see, it’s pretty much the same as before, except that now I can add the <code class="language-text">:hover</code> pseudo-class using a syntax that is very familiar to users of css pre-processors like <a href="https://sass-lang.com/">Sass</a> or <a href="http://lesscss.org/">Less</a>.</p>\n<p>To use Glamor in your Gatsby installation <a href="https://www.gatsbyjs.org/docs/glamor/">follow the official instructions here</a>.</p>\n<h2>(Ab)Use React</h2>\n<p>I must confess that when I first heard about Gatsby and how it used React to generate static websites I rolled my eyes like a teenager being asked by his dad to explain Snapchat. But, it’s not that weird if you think of React as the succesor of PHP.</p>\n<p>One of the great things about WordPress is that underneath the slick blogging UI it is kind of a PHP framework and if you know a) how to write PHP and b) how to plug into WordPress hooks, you could do almost anything you can imagine.</p>\n<p>Same with Gatsby and React. Except that, in Gatsby-land, the line that divides content from code is a blurred one.</p>\n<p>I am, for example, very proud of <a href="/projects">my projects page</a> which, since I already know React, was very fun to make and it can be unique and special, not just a glorified blog post.</p>\n<h2>The bad.</h2>\n<p>Not to end with a negative note, but to be honest, I think that the big problem with Gatsby is that it’s not beginner-friendly at all and that the barrier to entry is rather high.</p>\n<p>Myself, I have ~10 years of experience as a web developer, I do React and Node for a living and yet much of Gatsby feels like a mystic black-box.</p>\n<p>Still, I like the result it produces and the recent investment makes me confident that this is something I want to keep learning. I don’t know, maybe I’ll get to know it as intimately as I used to know WordPress.</p>\n<hr>\n<p>I hope this tips are useful, and if you have any comments or found a typo (English is not my first language)you can <a href="https://twitter.com/soska">find me on Twitter</a> or drop me a line to arm.sosa[at]gmail.com.</p>',frontmatter:{title:"So you want to build a blog with Gatsby?",subtitle:"Here's what I learned doing just that.",blurb:null,date:"May 25, 2018"}}},pathContext:{slug:"/2018/5/25/gatsby/",previous:{fields:{slug:"/2018/5/23/hello-world/"},frontmatter:{title:"Hello World. Again.",subtitle:"a declaration of intentions",blurb:"The idea of writting again is terrifying."}},next:{fields:{slug:"/2018/5/29/git-hub-pages-three-ways/"},frontmatter:{title:"GitHub Pages Three Ways",subtitle:"Why you may not need a hosting company",blurb:"Is it weird that GitHub is quickly becoming my favorite hosting platform?"}}}}}});
//# sourceMappingURL=path---2018-5-25-gatsby-74ff6805b3873f2e46fe.js.map