{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-i-moved-my-blog-to-gatsby/","result":{"data":{"site":{"siteMetadata":{"title":"Rope and Tire","author":"Suprada Urval"}},"markdownRemark":{"id":"fdcefa43-88fc-5a0b-9630-af7d729c0b9c","excerpt":"###What\nI just migrated my blog Rope and Tire to use Markdown and React using Gatsby. ###Why Gatsby\nAs a React developer, the idea of having a blog written in React is appealing — I can maintain and experiment on my blog. And using this fancy new…","html":"<p>###What\nI just migrated my blog <a href=\"https://www.ropeandtire.com\">Rope and Tire</a> to use Markdown and React using Gatsby.</p>\n<p>###Why Gatsby\nAs a <a href=\"https://reactjs.org/\">React</a> developer, the idea of having a blog written in React is appealing — I can maintain and experiment on my blog. And using this fancy new thing—<a href=\"https://www.gatsbyjs.org/\">Gatsby</a> appeals to my inner neophile.</p>\n<p>My blog used to be hosted on Wordpress. While quite good, I have longed for something simpler, easy to edit. And I was irritated with plugins.</p>\n<p>###Why <a href=\"https://www.markdownguide.org/\">Markdown</a></p>\n<ul>\n<li>Simplicity and Portability of plain text files</li>\n<li>Rich formatting</li>\n<li>Easy to read with formatting</li>\n<li>Easy to learn syntax</li>\n<li>Can be easily converted to HTML</li>\n</ul>\n<p>I’ve always wanted to become a power-user of Markdown. Best way to become a power-user, that I know of, is to use it.</p>\n<p>###How did I move my blog</p>\n<p>On egghead.io, I saw this <a href=\"https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby\">course on building a blog with react and markdown using Gatsby</a>. I coded along with the course for an introduction.</p>\n<p>Then I threw it all out, and used <a href=\"https://codeburst.io/build-a-blog-using-gatsby-js-react-8561bfe8fc91\">this tutorial on codeburst.io</a> to build my blog. I used the <a href=\"https://github.com/gatsbyjs/gatsby-starter-blog\">gatsby-starter-blog</a> for a quick scaffold, and the theme <a href=\"https://github.com/KyleAMathews/typography.js/tree/master/packages/typography-theme-de-young\">theme-de-young</a> as a starting point for my customizations.</p>\n<p>I then had to figure a way out to import my wordpress posts. <a href=\"https://peterakkies.net/export-wordpress-to-gatsby-markdown/\">Peter Akkies has a great tutorial</a> on how to do this. After importing, I had to spend a bit of time cleaning up relative urls, converting <code class=\"language-text\">http</code> to <code class=\"language-text\">https</code>, updating the markdown file headers with the correct tags.</p>\n<p>Another link I kept referring to <a href=\"https://medium.freecodecamp.org/how-to-write-a-blog-using-gatsby-from-your-phone-e92a99851a04\">how to update this gatsby blog from your phone</a></p>\n<p>###Deployment</p>\n<p>Today’s landscape of CI/CD using Github/Bitbucket and Netlify/now.sh is quite amazing. I wanted to try it out, and to reduce hosting on my shared web space at webhostinghub.com.</p>\n<p>With this in mind, I created a new private repo on <a href=\"https://bitbucket.org\">Bitbucket</a> and uploaded my code here. Then on to integrating my repo on bitbucket with <a href=\"https://www.netlify.com/\">Netlify</a>. <a href=\"https://codeburst.io/build-a-blog-using-gatsby-js-react-8561bfe8fc91\">This tutorial on codeburst.io</a>, which we followed earlier, has instruction on how to set-up a Netlify account.</p>\n<p>The final step is to point the netlify instance to your <a href=\"https://www.netlify.com/docs/custom-domains/\">custom domain</a>. All we do then is <code class=\"language-text\">git push origin master</code>. And your blog is updated.</p>","frontmatter":{"title":"How I moved my blog to Gatsby","date":"February 06, 2019","url":"/how-i-moved-my-blog-to-gatsby/","tags":["React","web-development"]}}},"pageContext":{"slug":"/how-i-moved-my-blog-to-gatsby/","previous":{"fields":{"slug":"/2018-02-26-distribute-react-component-via-npm/"},"frontmatter":{"title":"How to package your React Component for distribution via NPM","url":"/distribute-react-component-via-npm/","tags":["React","web-development"]}},"next":{"fields":{"slug":"/2020-08-12-craft-of-writing-effectively/"},"frontmatter":{"title":"The Craft of Writing Effectively","url":"/writing-effectively/","tags":["public-learning","writing"]}}}},"staticQueryHashes":["3128451518","426816048"]}