Alright! Today is a great day, many years after I lost my old blog, I’ve decided to start from scratch and create again one blog to publish my experiences and don’t fall in the inertia. Here I will describe my experience creating my own blog using Gatsby and Github Pages.
This article will be structured in
What you will learn?
Overview of Gatsby and GitHub PagesCreating your project with GatsbyPublishing your project in Github PagesAdding Travis CI to automate the deploy processNext steps
1. Overview of Gatsby and GitHub Pages
First things first. Before to explain you, how to create your site I will tell you more about Gatsby and Github Pages, if you alreay know about them, go ahead to the next step.
Taken from the official website Gatsby is:
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
So we can use the power of React, GraphQL, Markdown and some data sources to create really fast web sites, re-using lots of plugins and publishing in many Web hosting, in my case I will deploy in Github Pages.
In other words Github Pages is a free option to deploy hosted repositories in Github, also it give us an easy way to automate this process with some platforms like Travis CI.
2. Creating your project with Gatsby
After I reviewd some tutorials and content in Internet, about how to create my own site with Gatsby, here are my steps.
Follow the quick-start with Gatsby to install the gatsby-cli.Once you have installed the Gatsby CLI can create your Gatsby project based on some Gatsby templates. To be honest, the simplest way to create your own site is using a template instead of creating everything from scratch. Also you can find some examples made with Gatsby and other technologies.In my case I’ve created my site based on the beautiful narative theme. Once of the benefits of using this template are:
- Really good structure to add author and post
- Can be integrated with Contentful to create dynamic post instead of static post (commits in Github)
- Can be integrated with Mailchimp to reuse tue Subscriptions for newsletter
- The styles can be modifies based on the theme-ui
- The metadata and social networks can be modified in a simple way.Is open source.
If you want to see more templates, you can visit this link.
3. Publishing your project in Github Pages
I will no describe the step by step to publish your site in Github Pages, because in the official page is described really well. However I can provide you some learned lessons.
I recommend to install the gh-pages dependency to avoid doing many manual things.Don’t forget to create the gh-pages branch in your repo.If you are trying to select your gh-pages branch, please follow the next link.Please review the How Gatsby works with Github pages.
4. Adding Travis CI to automate the deploy process
In few words, Travis CI is
Easily sync your projects with Travis CI and you’ll be testing your code in minutes!
To be honest, this have changed my perspective and life when is needed to automate the deploy process based on commits in a branch. To deploy your site using Travis CI you need to create a .travis.yml file in your root folder project and add the next configuration.
<button data-a11y="false" class="css-12o2r9t eu6xrih0" style="box-sizing: inherit; margin: 0px; padding: 8px 12px 7px; font-size: inherit; text-decoration: none; cursor: pointer; font-family: inherit; color: rgb(111, 113, 119); font-style: inherit; font-weight: inherit; -webkit-appearance: none; border: none; outline: none; background: transparent; position: absolute; right: 22px; top: 24px; border-radius: 5px; transition: background 0.3s ease 0s;">Copy <svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0475 0.905273H1.67197C0.812542 0.905273 0.109375 1.60844 0.109375 2.46787V13.406H1.67197V2.46787H11.0475V0.905273ZM13.3914 4.03046H4.79716C3.93773 4.03046 3.23456 4.73363 3.23456 5.59306V16.5312C3.23456 17.3906 3.93773 18.0938 4.79716 18.0938H13.3914C14.2509 18.0938 14.954 17.3906 14.954 16.5312V5.59306C14.954 4.73363 14.2509 4.03046 13.3914 4.03046ZM13.3914 16.5312H4.79716V5.59306H13.3914V16.5312Z" fill="#6f7177"></path></svg></button><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">1</span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">language</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> node_js</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">2</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">cache</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">3</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">directories</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">4</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">-</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> ~/.npm</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">5</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">notifications</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">6</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">email</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">7</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">recipients</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">8</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">-</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">[</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);">THE EMAIL WHERE WILL BE SENT THE NOTIFICATIONS</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">]</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">9</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">on_success</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> always</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">10</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">on_failure</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> always</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">11</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">node_js</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">12</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">-</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token string" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-string,#a8e2a8);">'12.13.1'</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">13</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">git</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">14</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">depth</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token number" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-number,#e4854d);">3</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">15</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">script</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">16</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">-</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> npm run build</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">17</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">deploy</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">18</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">provider</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> pages</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">19</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">skip_cleanup</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token boolean important" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-boolean,#ff5874);">true</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">20</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">keep_history</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token boolean important" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-boolean,#ff5874);">true</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">21</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">github_token</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> $GITHUB_TOKEN</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">22</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">local_dir</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> public</span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">23</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">on</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"></span></div><div class="token-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; border-left: 3px solid transparent;"><span class="number-line" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; display: inline-block; width: 32px; user-select: none; opacity: 0.3; color: rgb(220, 217, 230);">24</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> </span><span class="token key atrule" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-token,#fff);">branch</span><span class="token punctuation" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-punctuation,#5FA8AA);">:</span><span class="token plain" style="box-sizing: inherit; margin: 0px; padding: 0px; font-size: inherit; color: var(--theme-ui-colors-prism-plain,#fff);"> master</span></div>You also can follow this article to get more details.
You can achieve the same result using Circle CI
5. Next steps
It’s hard to tell you all things you can do with Gatsby, however you can start reviwing:
- Review Gatsby Plugins
- Review Gatsby Resources
- Connect Gatsby with Contentful in five minutes
- Publish your site in other hosting like netlify
- Improve the GraphQL setup with Gatsby
- Add Gatsby Integrations
- Improve your SEO and Analytics tracking.