path---hello-world-c99effe171a706232564.js

webpackJsonp([0x834755aae49e],{502:function(n,a){n.exports={data:{site:{siteMetadata:{title:"Dustin Schau - Blog",author:"Dustin Schau"}},markdownRemark:{id:"/Users/okwen/www/gatsbyblog/content/blog/2017-07-13-hello-world/index.md absPath of file >>> MarkdownRemark",html:'<div>\n<video class="responsive" autoplay="true" loop="true">\n  <source type="video/mp4" src="https://media.giphy.com/media/QQkyLVLAbQRKU/giphy.mp4"></source>\n  <p>Your browser does not support the video element.</p>\n</video>\n</div>\n<p>Hello! My name is Dustin Schau, and I’m a web developer working in Omaha, Nebraska.</p>\n<p>I’ve long wanted to get into blogging, but never found a CMS or system that I quite liked enough, nor that felt natural enough to continually use, so hopefully I’ve stumbled upon a system that I like and that will last.</p>\n<p>I hope to post a variety articles on a variety of topics and not pigeon-hole myself into <em>just</em> technical articles. That said, the vast majority of stuff I’ll post will be technical programming articles, so if that’s not your thing, this blog <em>may</em> not be for you.</p>\n<h2 id="about-me"><a href="#about-me" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>About me</h2>\n<p>I’m a 20s something developer living in Omaha, Nebraska. I graduated from Creighton University (also in Omaha) with a degree in Computer Science that I’ve translated into my current career as a front-end developer. My current employer is <a href="https://objectpartners.com/">Object Partners, Inc.</a>—an incredible IT consulting company headquartered in Minneapolis with smaller offices in Omaha, Milwaukee, and Chicago. I previously worked at <a href="https://up.com">Union Pacific</a>, where I worked on a team who development encapsulated components with AngularJS and Foundation.</p>\n<h3 id="technical-interests"><a href="#technical-interests" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Technical interests</h3>\n<p>I tend to skew quite heavily towards the front-end spectrum of development, and so I enjoy discussing/writing about JavaScript with a particular emphasis on frameworks and new technologies for development. You can regularly find me messing around with some new framework, implementing some new technology, or in general just tinkering and learning.</p>\n<h3 id="non-technical-interests"><a href="#non-technical-interests" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Non-technical interests</h3>\n<p>In my spare time, I enjoy golfing—although I am decidedly not that great with something like a 20+ handicap, going to movies, traveling and exploring the world, and mentoring, among many, many other interests!</p>\n<p>Now that we have that out of the way, I hope you enjoy your time here! Please always feel free to drop me a line at dustinschau [at] gmail [dot] com, or check out my <a href="https://www.dustinschau.com">website</a> for more contact information and detail.</p>',excerpt:"Hello! My name is Dustin Schau, and I’m a web developer working in Omaha, Nebraska. I’ve long wanted to get into blogging, but never found a CMS or system that…",timeToRead:2,frontmatter:{date:"2017年07月13日",rawDate:"2017-07-13T05:00:00.000Z",excerpt:"Who I am, what I do, and why you should care! This post goes into some detail about my general philosophy around blogging, what I hope to accomplish with this blog, and various other details…",tags:["intro","about"],title:"Hello World",image:{childImageSharp:{resize:{src:"/static/ui-and-code-2e2425a623d633d1b1f4d4b156a32d6b-2c40b.png"}}}}}},pathContext:{prev:{excerpt:"Welcome to the second version of my blog, powered by  Gatsby , an incredible static site generator. Inspired by  Daring Fireball , some detail will be provided for the technologies, applications, and techniques that power this site. Mac apps VSCode…",html:'<p>Welcome to the second version of my blog, powered by <a href="https://github.com/gatsbyjs/gatsby">Gatsby</a>, an incredible static site generator.</p>\n<p>Inspired by <a href="https://daringfireball.net/colophon/">Daring Fireball</a>, some detail will be provided for the technologies, applications, and techniques that power this site.</p>\n<h2 id="mac-apps"><a href="#mac-apps" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Mac apps</h2>\n<ul>\n<li><a href="https://code.visualstudio.com/">VSCode</a></li>\n<li><a href="https://hyper.is/">Hyper</a></li>\n</ul>\n<h2 id="backend-software"><a href="#backend-software" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Backend software</h2>\n<p>The site is hosted on <a href="https://mediatemple.net">MediaTemple</a>.</p>\n<p>Articles are written using Markdown, and are translated to HTML using <a href="https://www.npmjs.com/package/remark">remark</a>.</p>\n<p>The content is partially server-side rendered via <a href="https://github.com/gatsbyjs/gatsby">gatsby</a>, which uses react-dom to scaffold out the basis content, and then React running client side takes over for the now-hydrated web application. Theoretically, this will provide for great SEO as well as some dynamism via React/JavaScript run client side once the page is hydrated.</p>\n<p>The following gatsby plugins are each used as the backbone for much of the functionality present in this blog:</p>\n<ul>\n<li><a href="https://www.npmjs.com/package/gatsby-plugin-styled-components">gatsby-plugin-styled-components</a></li>\n<li><a href="https://www.npmjs.com/package/gatsby-source-filesystem">gatsby-source-filesystem</a></li>\n<li><a href="https://www.npmjs.com/package/gatsby-transformer-remark">gatsby-transformer-remark</a></li>\n<li><a href="https://www.npmjs.com/package/gatsby-remark-copy-linked-files">gatsby-remark-copy-linked-files</a></li>\n<li><a href="https://www.npmjs.com/package/gatsby-remark-smartypants">gatsby-remark-smartypants</a></li>\n<li><a href="https://www.npmjs.com/package/gatsby-plugin-react-helmet">gatsby-plugin-react-helmet</a></li>\n</ul>\n<h2 id="web-technologies"><a href="#web-technologies" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Web technologies</h2>\n<p>As much as possible, this site attempts to abide by current web standards with a baseline threshold targeting around or about IE 10. That means that my heavy usage of Flexbox (CSS) will not <em>quite</em> be rendered perfectly in every circumstance, but in general, the goal is to be progressively enhanced so that the site is still readable and usable in a browser that doesn’t have great support for Flexbox.</p>\n<h3 id="styled-components"><a href="#styled-components" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><a href="https://www.styled-components.com/">styled-components</a></h3>\n<p>The incredible CSS library <code>styled-components</code> is used for the majority of the components rendered by the blog, particularly those not parsed via Markdown.</p>\n<h3 id="progressive-enhancement"><a href="#progressive-enhancement" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Progressive enhancement</h3>\n<p>Whenever possible, I attempt to only use JavaScript to <em>enhance</em> the site, rather than serve as the only mechanism for functionality. For instance, the <a href="https://fonts.google.com/">Google fonts</a> Montserrat and Bitter are used, but they are loaded asyncronously with <a href="https://github.com/typekit/webfontloader"><code>webfontloader</code></a> and then persisted in sessionStorage with the following JavaScript snippet. This means that in an environment without JavaScript, the fallback fonts <code>Georgia, serif</code> will be used <em>until</em> the webfonts have been loaded.</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token comment">/*\n * https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/\n */</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">loadWebFonts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> families <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Montserrat:400,700\'</span><span class="token punctuation">,</span> <span class="token string">\'Bitter:400,700\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span>sessionStorage<span class="token punctuation">.</span>fonts <span class="token operator">===</span> families<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">\' \'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">\'wf-active\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span>\n\n  require<span class="token punctuation">.</span><span class="token function">ensure</span><span class="token punctuation">(</span><span class="token string">\'webfontloader\'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> WebFonts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'webfontloader\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n    WebFonts<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      <span class="token function">active</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        sessionStorage<span class="token punctuation">.</span>fonts <span class="token operator">=</span> families<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">\' \'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      google<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n        families\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      timeout<span class="token punctuation">:</span> <span class="token number">2000</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre>\n      </div>',id:"/Users/okwen/www/gatsbyblog/content/blog/2017-07-10-about-me/index.md absPath of file >>> MarkdownRemark",timeToRead:2,fields:{slug:"/about"},frontmatter:{date:"July 10, 2017",draft:null,tags:["tech stack","colophon","about"],title:"About this Site"}},next:{excerpt:"This blog post was originally published at  Object Partners, Inc. , and has since been cross-posted to the  official gatsby blog Gatsby is an incredible static site generator that allows for React to be used as the underlying rendering engine to…",html:'<p><em>This blog post was originally published at <a href="https://objectpartners.com/2017/07/19/creating-a-static-blog-with-gatsby/">Object Partners, Inc.</a>, and has since been cross-posted to the <a href="https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/">official gatsby blog</a></em></p>\n<p>Gatsby is an incredible static site generator that allows for React to be used as the underlying rendering engine to scaffold out a static site that truly has all the benefits expected in a modern web application. It does this by rendering dynamic React components into static HTML content via <a href="https://facebook.github.io/react/docs/react-dom-server.html">server side rendering</a> at build time. This means that your users get all the benefits of a static site such as the ability to work without JavaScript, search engine friendliness, speedy load times, etc. without losing the dynamism and interactivity that is expected of the modern web. Once rendered to static HTML, client-site React/JavaScript <em>can</em> take over (if creating stateful components or logic in <code>componentDidMount</code>) and add dynamism to the statically generated content.</p>\n<p>Gatsby <a href="https://gatsbyjs.org/blog/gatsby-v1/">recently released</a> a v1.0.0 with a bunch of new features, including (but not limited to) the ability to create content queries with GraphQL, integration with various CMSs—including WordPress, Contentful, Drupal, etc., and route based code splitting to keep the end-user experience as snappy as possible. In this post, we’ll take a deep dive into Gatsby and some of these new features by creating a static blog. Let’s get on it!</p>\n<h2 id="getting-started"><a href="#getting-started" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting started</h2>\n<h3 id="installing-the-cli"><a href="#installing-the-cli" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installing the CLI</h3>\n<p><code>npm install -g gatsby</code></p>\n<p>Gatsby ships with a great CLI (command line interface) that contains the functionality of scaffolding out a working site, as well as commands to help develop the site once created.</p>\n<p><code>gatsby new personal-blog &#x26;&#x26; cd $_</code></p>\n<p>This command will create the folder <code>personal-blog</code> and then change into that directory. A working <code>gatsby</code> statically generated application can now be developed upon. The Gatsby CLI includes many common development features such as <code>gatsby build</code> (build a production, statically generated version of the project), <code>gatsby develop</code> (launch a hot-reload enabled web development server), etc.</p>\n<p>We can now begin the exciting task of <em>actually</em> developing on the site, and creating a functional, modern blog. You’ll generally want to use <code>gatsby develop</code> to launch the local development server to validate functionality as we progress through the steps.</p>\n<h2 id="adding-necessary-plugins"><a href="#adding-necessary-plugins" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding necessary plugins</h2>\n<p>Gatsby supports a <a href="https://gatsbyjs.org/docs/plugins/">rich plugin interface</a>, and many incredibly useful plugins have been authored to make accomplishing common tasks a breeze. Plugins can be broken up into three main categories: <strong>functional</strong> plugins, <strong>source</strong> plugins, and <strong>transformer</strong> plugins.</p>\n<h3 id="functional-plugins"><a href="#functional-plugins" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Functional plugins</h3>\n<p>Functional plugins either implement some functionality (e.g. offline support, generating a sitemap, etc.) <em>or</em> they extend Gatsby’s webpack configuration adding support for typescript, sass, etc.</p>\n<p>For this particular blog post, we want a single page app-like feel (without page reloads), as well as the ability to dynamically change the <code>title</code> tag within the <code>head</code> tags. As noted, the Gatsby plugin ecosystem is rich, vibrant, and growing, so oftentimes a plugin already exists that solves the particular problem you’re trying to solve. To address the functionality we want for <em>this</em> blog, we’ll use the following plugins:</p>\n<ul>\n<li>\n<p><a href="https://gatsbyjs.org/packages/gatsby-plugin-catch-links/"><code>gatsby-plugin-catch-links</code></a></p>\n<ul>\n<li>implements the history <code>pushState</code> API, and does not require a page reload on navigating to a different page in the blog</li>\n</ul>\n</li>\n<li>\n<p><a href="https://gatsbyjs.org/packages/gatsby-plugin-react-helmet/"><code>gatsby-plugin-react-helmet</code></a></p>\n<ul>\n<li><a href="https://github.com/nfl/react-helmet">react-helmet</a> is a tool that allows for modification of the <code>head</code> tags; Gatsby statically renders any of these <code>head</code> tag changes</li>\n</ul>\n</li>\n</ul>\n<p>with the following command:</p>\n<div class="gatsby-highlight">\n      <pre class="language-bash"><code>yarn add gatsby-plugin-catch-links gatsby-plugin-react-helmet\n</code></pre>\n      </div>\n<p>We’re using <a href="https://yarnpkg.com/en/">yarn</a>, but npm can just as easily be used with <code>npm i --save [deps]</code>.</p>\n<p>After installing each of these functional plugins, we’ll edit <code>gatsby-config.js</code>, which Gatsby loads at build-time to implement the exposed functionality of the specified plugins.</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  siteMetadata<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n    title<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Your Name - Blog`</span></span><span class="token punctuation">,</span>\n    author<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`Your Name`</span></span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="gatsby-highlight-code-line">  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'gatsby-plugin-catch-links\'</span><span class="token punctuation">,</span> <span class="token string">\'gatsby-plugin-react-helmet\'</span><span class="token punctuation">]</span>\n</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>Without any additional work besides a <code>yarn install</code> and editing a config file, we now have the ability to edit our site’s head tags, as well as implement a single page app feel without reloads. Now let’s enhance the base functionality by implementing a source plugin which can load blog posts from our local file system.</p>\n<h3 id="source-plugins"><a href="#source-plugins" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source plugins</h3>\n<p>Source plugins create <em>nodes</em> which can then be transformed into a usable format (if not already usable) by a transformer plugin. For instance, a typical workflow often involves using <a href="/packages/gatsby-source-filesystem/"><code>gatsby-source-filesystem</code></a>, which loads files off of disk—e.g. Markdown files—and then specifying a Markdown transformer to transform the Markdown into HTML.</p>\n<p>Since the bulk of the blog’s content, and each article, will be authored in Markdown, let’s add that <a href="/packages/gatsby-source-filesystem/"><code>gatsby-source-filesystem</code></a> plugin. Similarly to our previous step, we’ll install the plugin and then inject into our <code>gatsby-config.js</code>, like so:</p>\n<div class="gatsby-highlight">\n      <pre class="language-bash"><code>yarn add gatsby-source-filesystem\n</code></pre>\n      </div>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  <span class="token comment">// previous configuration</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token string">\'gatsby-plugin-catch-links\'</span><span class="token punctuation">,</span>\n    <span class="token string">\'gatsby-plugin-react-helmet\'</span><span class="token punctuation">,</span>\n<span class="gatsby-highlight-code-line">    <span class="token punctuation">{</span>\n</span><span class="gatsby-highlight-code-line">      resolve<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`gatsby-source-filesystem`</span></span><span class="token punctuation">,</span>\n</span><span class="gatsby-highlight-code-line">      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n</span><span class="gatsby-highlight-code-line">        path<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/src/pages`</span></span><span class="token punctuation">,</span>\n</span><span class="gatsby-highlight-code-line">        name<span class="token punctuation">:</span> <span class="token string">\'pages\'</span>\n</span><span class="gatsby-highlight-code-line">      <span class="token punctuation">}</span>\n</span><span class="gatsby-highlight-code-line">    <span class="token punctuation">}</span>\n</span>  <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>Some explanation will be helpful here! An <code>options</code> object can be passed to a plugin, and we’re passing the filesystem <code>path</code> (i.e. where our Markdown files will be located), and then a <code>name</code> for the source files. Now that Gatsby knows about our source files, we can begin applying some useful transformers to convert those files into usable data!</p>\n<h3 id="transformer-plugins"><a href="#transformer-plugins" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Transformer plugins</h3>\n<p>As mentioned, a transformer plugin takes some underlying data format that is not inherently usable in its current form (e.g. Markdown, json, yaml, etc.), and transforms it into a format that Gatsby can understand, and that we can query against with GraphQL. Jointly, the filesystem source plugin will load file nodes (as Markdown) off of our filesystem, and then the Markdown transformer will take over and convert to usable HTML.</p>\n<p>We’ll only be using one transformer plugin (for Markdown), so let’s get that installed.</p>\n<ul>\n<li>\n<p><a href="/packages/gatsby-transformer-remark/">gatsby-transformer-remark</a></p>\n<ul>\n<li>Uses the <a href="https://github.com/wooorm/remark">remark</a> Markdown parser to transform .md files on disk into HTML; additionally this transformer can optionally take plugins to further extend functionality—e.g. add syntax highlighting with <code>gatsby-remark-prismjs</code>, <code>gatsby-remark-copy-linked-files</code> to copy relative files specified in markdown, <code>gatsby-remark-images</code> to compress images and add responsive images with <code>srcset</code>, etc.</li>\n</ul>\n</li>\n</ul>\n<p>The process should be familiar by now, install and then add to config.</p>\n<div class="gatsby-highlight">\n      <pre class="language-bash"><code>yarn add gatsby-transformer-remark\n</code></pre>\n      </div>\n<p>and editing <code>gatsby-config.js</code></p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  <span class="token comment">// previous setup</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token string">\'gatsby-plugin-catch-links\'</span><span class="token punctuation">,</span>\n    <span class="token string">\'gatsby-plugin-react-helmet\'</span><span class="token punctuation">,</span>\n    <span class="token punctuation">{</span>\n      resolve<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`gatsby-source-filesystem`</span></span><span class="token punctuation">,</span>\n      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n        path<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/src/pages`</span></span><span class="token punctuation">,</span>\n        name<span class="token punctuation">:</span> <span class="token string">\'pages\'</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">{</span>\n<span class="gatsby-highlight-code-line">      resolve<span class="token punctuation">:</span> <span class="token string">\'gatsby-transformer-remark\'</span><span class="token punctuation">,</span>\n</span><span class="gatsby-highlight-code-line">      options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n</span><span class="gatsby-highlight-code-line">        plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// just in case those previously mentioned remark plugins sound cool :)</span>\n</span><span class="gatsby-highlight-code-line">      <span class="token punctuation">}</span>\n</span><span class="gatsby-highlight-code-line">    <span class="token punctuation">}</span>\n</span>  <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>Whew! Seems like a lot of set up, but collectively these plugins are going to super charge Gatsby, and give us an incredibly powerful (yet relatively simple!) development environment. We have one more set up step and it’s an easy one. We’re simply going to create a Markdown file that will contain the content of our first blog post. Let’s get to it.</p>\n<h2 id="writing-our-first-markdown-blog-post"><a href="#writing-our-first-markdown-blog-post" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing our first Markdown blog post</h2>\n<p>The <code>gatsby-source-filesystem</code> plugin we configured earlier expects our content to be in <code>src/pages</code>, so that’s exactly where we’ll put it!</p>\n<p>Gatsby is not at all prescriptive in naming conventions, but a typical practice for blog posts is to name the folder something like <code>MM-DD-YYYY-title</code>, e.g. <code>07-12-2017-hello-world</code>. Let’s do just that, and create the folder <code>src/pages/07-12-2017-hello-world</code>, and place an <code>index.md</code> inside!</p>\n<p>The content of this Markdown file will be our blog post, authored in Markdown (of course!). Here’s what it’ll look like:</p>\n<div class="gatsby-highlight">\n      <pre class="language-markdown"><code><span class="token hr punctuation">---</span>\npath: "/hello-world"\ndate: "2017-07-12T17:12:33.962Z"\n<span class="token title important">title: "My First Gatsby Post"\n<span class="token punctuation">---</span></span>\n\nOooooh-weeee, my first blog post!\n</code></pre>\n      </div>\n<p><em>Fairly</em> typical stuff, except for the block surrounded in dashes. What is that? That is what is referred to as <a href="https://jekyllrb.com/docs/frontmatter/"><code>frontmatter</code></a>, and the contents of the block can be used to inject React components with the specified data, e.g. path, date, title, etc. Any piece of data can be injected here (e.g. tags, sub-title,draft, etc.), so feel free to experiment and find what necessary pieces of frontmatter are required to achieve an ideal blogging system for your usage. One important note is that <code>path</code> will be used when we dynamically create our pages to specify the URL/path to render the file (in a later step!). In this instance, <code>http://localhost:8000/hello-world</code> will be the path to this file.</p>\n<p>Now that we have created a blog post with frontmatter and some content, we can begin actually writing some React components that will display this data!</p>\n<h2 id="creating-the-react-template"><a href="#creating-the-react-template" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating the (React) template</h2>\n<p>As Gatsby supports server side rendering (to string) of React components, we can write our template in… you guessed it, React! (Or <a href="https://gatsbyjs.org/packages/gatsby-plugin-preact/">Preact</a>, if that’s more your style)</p>\n<p>We’ll want to create the file <code>src/templates/blog-post.js</code> (please create the <code>src/templates</code> folder if it does not yet exist!).</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Helmet <span class="token keyword">from</span> <span class="token string">\'react-helmet\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// import \'../css/blog-post.css\'; // make it pretty!</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Template</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n  data <span class="token comment">// this prop will be injected by the GraphQL query we\'ll write in a bit</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> markdownRemark<span class="token punctuation">:</span> post <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">;</span> <span class="token comment">// data.markdownRemark holds our post data</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"blog-post-container"</span><span class="token operator">></span>\n      <span class="token operator">&lt;</span>Helmet title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`Your Blog Name - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n      <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"blog-post"</span><span class="token operator">></span>\n        <span class="token operator">&lt;</span>h1<span class="token operator">></span>\n          <span class="token punctuation">{</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>title<span class="token punctuation">}</span>\n        <span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>\n        <span class="token operator">&lt;</span>div\n          className<span class="token operator">=</span><span class="token string">"blog-post-content"</span>\n          dangerouslySetInnerHTML<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> __html<span class="token punctuation">:</span> post<span class="token punctuation">.</span>html <span class="token punctuation">}</span><span class="token punctuation">}</span>\n        <span class="token operator">/</span><span class="token operator">></span>\n      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>\n    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre>\n      </div>\n<p>Whoa, neat! This React component will be rendered to a static HTML string (for each route/blog post we define), which will serve as the basis of our routing/navigation for our blog.</p>\n<p>At this point, there is a reasonable level of confusion and “magic” occuring, particularly with the props injection. What is <code>markdownRemark</code>? Where is this <code>data</code> prop injected from? All good questions, so let’s answer them by writing a GraphQL query to seed our <code>&#x3C;Template /></code> component with content!</p>\n<h3 id="writing-the-graphql-query"><a href="#writing-the-graphql-query" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing the GraphQL query</h3>\n<p>Below the <code>Template</code> declaration, we’ll want to add a GraphQL query. This is an incredibly powerful utility provided by Gatsby which lets us pick and choose very simply the pieces of data that we want to display for our blog post. Each piece of data our query selects will be injected via the <code>data</code> property we specified earlier.</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Helmet <span class="token keyword">from</span> <span class="token string">\'react-helmet\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// import \'../css/blog-post.css\';</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Template</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> markdownRemark<span class="token punctuation">:</span> post <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">;</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"blog-post-container"</span><span class="token operator">></span>\n      <span class="token operator">&lt;</span>Helmet title<span class="token operator">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token string">`Your Blog Name - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>title<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n      <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"blog-post"</span><span class="token operator">></span>\n        <span class="token operator">&lt;</span>h1<span class="token operator">></span>\n          <span class="token punctuation">{</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>title<span class="token punctuation">}</span>\n        <span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>\n        <span class="token operator">&lt;</span>div\n          className<span class="token operator">=</span><span class="token string">"blog-post-content"</span>\n          dangerouslySetInnerHTML<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> __html<span class="token punctuation">:</span> post<span class="token punctuation">.</span>html <span class="token punctuation">}</span><span class="token punctuation">}</span>\n        <span class="token operator">/</span><span class="token operator">></span>\n      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>\n    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="gatsby-highlight-code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> pageQuery <span class="token operator">=</span> graphql<span class="token template-string"><span class="token string">`\n</span><span class="gatsby-highlight-code-line">  query BlogPostByPath($path: String!) {\n</span><span class="gatsby-highlight-code-line">    markdownRemark(frontmatter: { path: { eq: $path } }) {\n</span><span class="gatsby-highlight-code-line">      html\n</span><span class="gatsby-highlight-code-line">      frontmatter {\n</span><span class="gatsby-highlight-code-line">        date(formatString: "MMMM DD, YYYY")\n</span><span class="gatsby-highlight-code-line">        path\n</span><span class="gatsby-highlight-code-line">        title\n</span><span class="gatsby-highlight-code-line">      }\n</span><span class="gatsby-highlight-code-line">    }\n</span><span class="gatsby-highlight-code-line">  }\n</span><span class="gatsby-highlight-code-line">`</span></span><span class="token punctuation">;</span>\n</span></code></pre>\n      </div>\n<p>If you’re not familar with GraphQL, this may seem slightly confusing, but we can break down what’s going down here piece by piece.</p>\n<p><em>Note: To learn more about GraphQL, consider this <a href="https://www.howtographql.com">excellent resource</a></em></p>\n<p>The underlying query name <code>BlogPostByPath</code> (note: these query names need to be unique!) will be injected with the current path, e.g. the specific blog post we are viewing. This path will be available as <code>$path</code> in our query. For instance, if we were viewing our previously created blog post, the path of the file that data will be pulled from will be <code>/hello-world</code>.</p>\n<p><code>markdownRemark</code> will be the injected property available via the prop <code>data</code>, as named in the GraphQL query. Each property we pull via the GraphQL query will be available under this <code>markdownRemark</code> property. For example, to access the transformed HTML we would access the <code>data</code> prop via <code>data.markdownRemark.html</code>.</p>\n<p><code>frontmatter</code>, is of course our data structure we provided at the beginning of our Markdown file. Each key we define there will be available to be injected into the query.</p>\n<p>At this point, we have a bunch of plugins installed to load files off of disk, transform Markdown to HTML, and other utilities. We have a single, lonely Markdown file that will be rendered as a blog post. Finally, we have a React template for blog posts, as well as a wired up GraphQL query to query for a blog post and inject the React template with the queried data. Next up: programatically creating the necessary static pages (and injecting the templates) with Gatsby’s Node API. Let’s get down to it.</p>\n<p>An important note to make at this point is that the GraphQL query takes place at <strong>build</strong> time. The component is injected with the <code>data</code> prop that is seeded by the GraphQL query. Unless anything dynamic (e.g. logic in <code>componentDidMount</code>, state changes, etc.) occurs, this component will be pure, rendered HTML generated via the React rendering engine, GraphQL, and Gatsby!</p>\n<h2 id="creating-the-static-pages"><a href="#creating-the-static-pages" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating the static pages</h2>\n<p>Gatsby exposes a powerful Node API, which allows for functionality such as creating dynamic pages (blog posts!), extending the babel or webpack configs, modifying the created nodes or pages, etc. This API is exposed in the <code>gatsby-node.js</code> file in the root directory of your project—e.g. at the same level as <code>gatsby-config.js</code>. Each export found in this file will be parsed by Gatsby, as detailed in its <a href="https://gatsbyjs.org/docs/node-apis/">Node API specification</a>. However, we only care about one particular API in this instance, <code>createPages</code>.</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'path\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nexports<span class="token punctuation">.</span><span class="token function-variable function">createPages</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> boundActionCreators<span class="token punctuation">,</span> graphql <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token operator">=</span> boundActionCreators<span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> blogPostTemplate <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`src/templates/blog-post.js`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>Nothing super complex yet! We’re using the <code>createPages</code> API (which Gatsby will call at build time with injected parameters). We’re also grabbing the <em>path</em> to our blogPostTemplate we created earlier. Finally, we’re using the <code>createPage</code> action creator/function made available in boundActionCreators. Gatsby uses Redux internally to manage its state, and <code>boundActionCreators</code> are simply the exposed action creators of Gatsby, of which <code>createPage</code> is one of the action creators! For the full list of exposed action creators, check out <a href="https://www.gatsbyjs.org/docs/bound-action-creators/">Gatsby’s documentation</a>. We can now construct the GraphQL query, which will fetch all of our Markdown posts.</p>\n<h3 id="querying-for-posts"><a href="#querying-for-posts" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Querying for posts</h3>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'path\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nexports<span class="token punctuation">.</span><span class="token function-variable function">createPages</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> boundActionCreators<span class="token punctuation">,</span> graphql <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token operator">=</span> boundActionCreators<span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> blogPostTemplate <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`src/templates/blog-post.js`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="gatsby-highlight-code-line">  <span class="token keyword">return</span> <span class="token function">graphql</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`{\n</span><span class="gatsby-highlight-code-line">    allMarkdownRemark(\n</span><span class="gatsby-highlight-code-line">      sort: { order: DESC, fields: [frontmatter___date] }\n</span><span class="gatsby-highlight-code-line">      limit: 1000\n</span><span class="gatsby-highlight-code-line">    ) {\n</span><span class="gatsby-highlight-code-line">      edges {\n</span><span class="gatsby-highlight-code-line">        node {\n</span><span class="gatsby-highlight-code-line">          excerpt(pruneLength: 250)\n</span><span class="gatsby-highlight-code-line">          html\n</span><span class="gatsby-highlight-code-line">          id\n</span><span class="gatsby-highlight-code-line">          frontmatter {\n</span><span class="gatsby-highlight-code-line">            date\n</span><span class="gatsby-highlight-code-line">            path\n</span><span class="gatsby-highlight-code-line">            title\n</span><span class="gatsby-highlight-code-line">          }\n</span><span class="gatsby-highlight-code-line">        }\n</span><span class="gatsby-highlight-code-line">      }\n</span><span class="gatsby-highlight-code-line">    }\n</span><span class="gatsby-highlight-code-line">  }`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>result <span class="token operator">=></span> <span class="token punctuation">{</span>\n</span><span class="gatsby-highlight-code-line">    <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>errors<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n</span><span class="gatsby-highlight-code-line">      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span><span class="gatsby-highlight-code-line">    <span class="token punctuation">}</span>\n</span><span class="gatsby-highlight-code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span><span class="gatsby-highlight-code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>\n</span></code></pre>\n      </div>\n<p>We’re using GraphQL to get all Markdown nodes and making them available under the <code>allMarkdownRemark</code> GraphQL property. Each exposed property (on <code>node</code>) is made available for querying against. We’re effectively seeding a GraphQL “database” that we can then query against via page-level GraphQL queries. One note here is that the <code>exports.createPages</code> API expects a Promise to be returned, so it works seamlessly with the <code>graphql</code> function, which returns a Promise (although note a callback API is also available if that’s more your thing).</p>\n<p>One cool note here is that the <code>gatsby-plugin-remark</code> plugin exposes some useful data for us to query with GraphQL, e.g. <code>excerpt</code> (a short snippet to display as a preview), <code>id</code> (a unique identifier for each post), etc.</p>\n<p>We now have our query written, but we haven’t yet programatically created the pages (with the <code>createPage</code> action creator). Let’s do that!</p>\n<h3 id="creating-the-pages"><a href="#creating-the-pages" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating the pages</h3>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'path\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nexports<span class="token punctuation">.</span><span class="token function-variable function">createPages</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> boundActionCreators<span class="token punctuation">,</span> graphql <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> createPage <span class="token punctuation">}</span> <span class="token operator">=</span> boundActionCreators<span class="token punctuation">;</span>\n\n  <span class="token keyword">const</span> blogPostTemplate <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`src/templates/blog-post.js`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token keyword">return</span> <span class="token function">graphql</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`{\n    allMarkdownRemark(\n      sort: { order: DESC, fields: [frontmatter___date] }\n      limit: 1000\n    ) {\n      edges {\n        node {\n          excerpt(pruneLength: 250)\n          html\n          id\n          frontmatter {\n            date\n            path\n            title\n          }\n        }\n      }\n    }\n  }`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>result <span class="token operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>result<span class="token punctuation">.</span>errors<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span>\n\n    result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>allMarkdownRemark<span class="token punctuation">.</span>edges<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> node <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n<span class="gatsby-highlight-code-line">      <span class="token function">createPage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n</span><span class="gatsby-highlight-code-line">        path<span class="token punctuation">:</span> node<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>path<span class="token punctuation">,</span>\n</span><span class="gatsby-highlight-code-line">        component<span class="token punctuation">:</span> blogPostTemplate<span class="token punctuation">,</span>\n</span><span class="gatsby-highlight-code-line">        context<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// additional data can be passed via context</span>\n</span><span class="gatsby-highlight-code-line">      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</span>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>We’ve now tied into the Promise chain exposed by the <code>graphql</code> query. The actual posts are available via the path <code>result.data.allMarkdownRemark.edges</code>. Each edge contains an internal node, and this node holds the useful data that we will use to construct a page with Gatsby. Our GraphQL “shape” is directly reflected in this data object, so each property we pulled from that query will be available when we are querying in our GraphQL blog post template.</p>\n<p>The <code>createPage</code> API accepts an object which requires <code>path</code> and <code>component</code> properties to be defined, which we have done above. Additionally, an optional property <code>context</code> can be used to inject data and make it available to the blog post template component via injected props (log out props to see each available prop!). Each time we build with Gatsby, <code>createPage</code> will be called, and Gatsby will create a static HTML file of the path we specified in the post’s frontmatter—the result of which will be our stringified and parsed React template injected with the data from our GraphQL query. Whoa, it’s actually starting to come together!</p>\n<p>We can run <code>yarn develop</code> at this point, and then navigate to <code>http://localhost:8000/hello-world</code> to see our first blog post, which should look something like below:</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 67.28395061728395%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABqklEQVQ4y52QS0sCURiG51+ULRIq+g1aFq2CNkHrgi47qUUbdxI6fyAooVIXLiMqIzU3muQ0OlZ0MZkwcxqnDCOiNqlzxjlfM2OSUVr2ch7ec+F7z3cOkaT87Vk+ZuMKaZK9ObPzD9dk4SVH5p9vFRe0+S/YH18FMnvP2qKJUAexuODsj24mgd5JA+VlgfFlIOHPahzVCHCNUc6P926B2mZhifQMEcO6ecN457I407smkWNe0Ta6haZ7VtFUd5XJrhU0oXc0Q1R9XL+ERnQWE+FxbBhTtIAvD3NwGLjAdDAJlP8CDnbPIOo7h1gwBWz8vhn4islr9etun4mg6AMjAGB1cLkbzPEZ4O84YNMpEPI8FJ7y8IvwB3B6fjJAhMP7RiQiLMsYSsUSLpfKUHwrQknxmuSK3AyMlSGKCGKx+AARiUSMkiThuts+r8YYZFnWvLb+1l51EysZwDDM10BcFdTTKOjPgdCiGgXKdR22LLUUIaQGmtRAQ0WR+vcKNW8FrUZtSgsMhUJ9/3jpj6JpepCwWCxtbrfb7HQ65xRmP7wVtBqXy2W2Wq3t74aqdPHBtSVxAAAAAElFTkSuQmCC\'); 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="My first blog post with Gatsby"\n        title=""\n        src="/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-83a8b.png"\n        srcset="/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-8992e.png 163w,\n/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-ae0a7.png 325w,\n/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-83a8b.png 650w,\n/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-50453.png 975w,\n/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-af9d4.png 1300w,\n/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-7cf95.png 1950w,\n/static/my-first-blog-post-deb7f0d56ec7013985a6053e9c88601d-dcfb2.png 2592w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>At this point, we’ve created a single static blog post as an HTML file, which was created by a React component and several GraphQL queries. However, this isn’t a blog! We can’t expect our users to guess the path of each post, we need to have an index or listing page, where we display each blog post, a short snippet, and a link to the full blog post. Wouldn’t you know it, we can do this incredibly easily with Gatsby, using a similar strategy as we used in our blog template, e.g. a React component and a GraphQL query.</p>\n<h2 id="creating-the-blog-listing"><a href="#creating-the-blog-listing" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating the Blog Listing</h2>\n<p>I won’t go into quite as much detail for this section, because we’ve already done something very similar for our blog template! Look at us, we’re pro Gatsby-ers at this point!</p>\n<p>Gatsby has a standard for “listing pages,” and they’re placed in the root of our filesystem we specified in <code>gatsby-source-filesystem</code>, e.g. <code>src/pages/index.js</code>. So create that file if it does not exist, and let’s get it working! Additionally note that any static JavaScript files (that export a React component!) will get a corresponding static HTML file. For instance, if we create <code>src/pages/tags.js</code>, the path <code>http://localhost:8000/tags/</code> will be available within the browser and the statically generated site.</p>\n<div class="gatsby-highlight">\n      <pre class="language-javascript"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Link <span class="token keyword">from</span> <span class="token string">\'gatsby-link\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> Helmet <span class="token keyword">from</span> <span class="token string">\'react-helmet\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// import \'../css/index.css\'; // add some style if you want!</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Index</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> <span class="token punctuation">{</span> edges<span class="token punctuation">:</span> posts <span class="token punctuation">}</span> <span class="token operator">=</span> data<span class="token punctuation">.</span>allMarkdownRemark<span class="token punctuation">;</span>\n  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"blog-posts"</span><span class="token operator">></span>\n      <span class="token punctuation">{</span>posts\n        <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>post <span class="token operator">=></span> post<span class="token punctuation">.</span>node<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>title<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span>\n        <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> node<span class="token punctuation">:</span> post <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n          <span class="token keyword">return</span> <span class="token punctuation">(</span>\n            <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"blog-post-preview"</span> key<span class="token operator">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>id<span class="token punctuation">}</span><span class="token operator">></span>\n              <span class="token operator">&lt;</span>h1<span class="token operator">></span>\n                <span class="token operator">&lt;</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>path<span class="token punctuation">}</span><span class="token operator">></span>\n                  <span class="token punctuation">{</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>title<span class="token punctuation">}</span>\n                <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>\n              <span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>\n              <span class="token operator">&lt;</span>h2<span class="token operator">></span>\n                <span class="token punctuation">{</span>post<span class="token punctuation">.</span>frontmatter<span class="token punctuation">.</span>date<span class="token punctuation">}</span>\n              <span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span>\n              <span class="token operator">&lt;</span>p<span class="token operator">></span>\n                <span class="token punctuation">{</span>post<span class="token punctuation">.</span>excerpt<span class="token punctuation">}</span>\n              <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">></span>\n            <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>\n          <span class="token punctuation">)</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>\n    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">const</span> pageQuery <span class="token operator">=</span> graphql<span class="token template-string"><span class="token string">`\n  query IndexQuery {\n    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {\n      edges {\n        node {\n          excerpt(pruneLength: 250)\n          id\n          frontmatter {\n            title\n            date(formatString: "MMMM DD, YYYY")\n            path\n          }\n        }\n      }\n    }\n  }\n`</span></span><span class="token punctuation">;</span>\n</code></pre>\n      </div>\n<p>OK! So we’ve followed a similar approach to our blog post template, so this should hopefully seem pretty familiar. Once more we’re exporting <code>pageQuery</code> which contains a GraphQL query. Note that we’re pulling a slightly different data set, specifically we are pulling an <code>excerpt</code> of 250 characters rather than the full HTML, as well as we are formatting the pulled date with a format string! GraphQL is awesome.</p>\n<p>The actual React component is fairly trivial, but one important note should be made. It’s important that when linking to internal content, i.e. other blog links, that you should always use <code>gatsby-link</code>. Gatsby does not work if pages are not routed via this utility. Additionally, this utility also works with <code>pathPrefix</code>, which allows for a Gatsby site to be deployed a non-root domain. This is useful if this blog will be hosted on something like Github Pages, or perhaps hosted at <code>/blog</code>.</p>\n<p>Now this is getting exciting and it feels like we’re finally getting somewhere! At this point, we have a fully functional blog generated by Gatsby, with real content authored in Markdown, a blog listing, and the ability to navigate around in the blog. If you run <code>yarn develop</code>, <code>http://localhost:8000</code> should display a preview of each blog post, and each post title links to the content of the blog post. A real blog!</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 67.28395061728395%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB1ElEQVQ4y5WRTU8TURiF778QXMBC429gsCWuTNy4cAsJhh3RhZvuGkLnFxgkGNsuWBqIQCgfLobWtDNlqpaINGOLlHbKFEqgAUL5mI/e452hkGLClJ7cJ2/uvPec+84M+S0uduQL0mh+L8tv5NKBvarKV2u7vHa4zVeOS3zlSG1FYJ+dy2vKaDwlPCTvR0JPv02tQ5zNIjGrIP21iPRyEalIHt8XGixu3w3r/1gqIDGjYIyffEaed77r6e/6oA89+WQGXn3RR15OGa8fTzA+Ogw+mjAGusfd0O3a3z1mvOj0ecjk+DSXkVSaEXcgz/+lqYUtJOdyiE8rEGeykCObUFY1N+gfuUw3RBWfwxEPSUhxDgBlYGtdo7m1EopKBWrmAOXNKiqFI7QQvfav/frpJSvCCmfoJjVNCzvlEi1pKg6rB6xdv3HUrboblLKl6waSyVUviUajnGmZlAnnZ+f04uIStdMaTo5PYLFL2GHYPWeURr013tVDNpAJWZa9JBaLcWxDm8b/3+D+vm6B9EpoplXoXYH1psC2ZVsNw7ADPXZgj8XU+AvXtR0cjz2UEygIQm+r73RfSZLUR3w+34NwODwcDAbfMt40ajs4nlAoNOz3+zv+AR3mdCyqSILkAAAAAElFTkSuQmCC\'); 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="Blog listing"\n        title=""\n        src="/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-83a8b.png"\n        srcset="/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-8992e.png 163w,\n/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-ae0a7.png 325w,\n/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-83a8b.png 650w,\n/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-50453.png 975w,\n/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-af9d4.png 1300w,\n/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-7cf95.png 1950w,\n/static/blog-listing-2a8d86802d4b0d0a8d662e1281b0f522-dcfb2.png 2592w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<p>It’s now on you to make something incredible with the knowledge you’ve gained in following along with this tutorial! You can not only make it pretty and style with CSS (or <a href="https://github.com/styled-components/styled-components">styled-components</a>!), but you could improve it functionally by implementing some of the following:</p>\n<ul>\n<li>\n<p>Add a tag listing and tag search page</p>\n<ul>\n<li>hint: the <code>createPages</code> API in <code>gatsby-node.js</code> file is useful here, as is frontmatter</li>\n</ul>\n</li>\n<li>adding navigation between a specific blog post and past/present blog posts (the <code>context</code> API of <code>createPages</code> is useful here), etc.</li>\n</ul>\n<p>With our new found knowledge of Gatsby and its API, you should feel empowered to begin to utilize Gatsby to its fullest potential. A blog is just the starting point; Gatsby’s rich ecosystem, extensible API, and advanced querying capabilities provide a powerful toolset for building truly incredible, performant sites.</p>\n<p>Now go build something great.</p>\n<p>\n  <span\n    class="gatsby-resp-image-wrapper"\n    style="position: relative; display: block; ; max-width: 650px; margin-left: auto; margin-right: auto;"\n  >\n    <span\n      class="gatsby-resp-image-background-image"\n      style="padding-bottom: 47.57281553398058%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgADBP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAeTMkc4//8QAGxAAAgEFAAAAAAAAAAAAAAAAAAIRARIhMTL/2gAIAQEAAQUCuwkS/aFNn//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAIABwAAAAAAAAAAAAAAAAABAhARITFBgf/aAAgBAQAGPwKJ7Zdjpg5P/8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERIUFRMf/aAAgBAQABPyGDlZwuD20c6Zfqh2m4cWPMeH//2gAMAwEAAgADAAAAEMAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAHhABAAIBBAMAAAAAAAAAAAAAAQARMSFBUZGhscH/2gAIAQEAAT8QTxqVJSiN+IzUAmYanfk5gq6G2uKiOiyDW0HaT1fZ/9k=\'); 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="Dream Bigger"\n        title=""\n        src="/static/dream-bigger-1eb72aab7f753fd71411e0b504f13608-55338.jpeg"\n        srcset="/static/dream-bigger-1eb72aab7f753fd71411e0b504f13608-a21e6.jpeg 163w,\n/static/dream-bigger-1eb72aab7f753fd71411e0b504f13608-4ac53.jpeg 325w,\n/static/dream-bigger-1eb72aab7f753fd71411e0b504f13608-55338.jpeg 650w,\n/static/dream-bigger-1eb72aab7f753fd71411e0b504f13608-7a086.jpeg 721w"\n        sizes="(max-width: 650px) 100vw, 650px"\n      />\n    </span>\n  </span>\n  </p>\n<h2 id="links"><a href="#links" aria-hidden="true" class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Links</h2>\n<ul>\n<li>\n<p><a href="https://github.com/dschau/gatsby-blog-starter-kit"><code>@dschau/gatsby-blog-starter-kit</code></a></p>\n<ul>\n<li>A working repo demonstrating all of the aforementioned functionality of Gatsby</li>\n</ul>\n</li>\n<li>\n<p><a href="https://github.com/DSchau/create-gatsby-blog-post"><code>@dschau/create-gatsby-blog-post</code></a></p>\n<ul>\n<li>A utility and CLI I created to scaffold out a blog post following the predefined Gatsby structure with frontmatter, date, path, etc.</li>\n</ul>\n</li>\n<li>\n<p><a href="https://github.com/dschau/blog">Source code for my blog</a></p>\n<ul>\n<li>The source code for my blog, which takes the gatsby-starter-blog-post (previous link), and expands upon it with a bunch of features and some more advanced functionality</li>\n</ul>\n</li>\n</ul>',
id:"/Users/okwen/www/gatsbyblog/content/blog/2017-07-17-getting-started-with-gatsby/index.md absPath of file >>> MarkdownRemark",timeToRead:18,fields:{slug:"/getting-started-with-gatsby"},frontmatter:{date:"July 17, 2017",draft:null,tags:["gatsby","react","javascript"],title:"Creating a Blog with Gatsby"}},slug:"/hello-world"}}}});
//# sourceMappingURL=path---hello-world-c99effe171a706232564.js.map