Moving from Squarespace to GatsbyJs

I'm going to move my blog to a new platform! Since I've been coding in React for some time and I've been a great enthusiast for static-sites and server-side rendering for some time, this is it!

The point here is to document each step so that anyone can follow the process and see how that's done.


Here are the details:

  1. I'd like to use GatsbyJS for the front-end. Gatsby is a static-site generator based on ReactJS.  It combines the fast performance of static websites, modern browser capabilities like and service workers, and the powerful abstractions, excellent tools, and client capabilities of the web app world. For more info on this powerful Javascript web framework, check out the video in the reference section down below.
  2. I'll be using WordPress as a Headless CMS (through their REST API) to fetch posts and feed my React application. There are many possibilities when it comes to managing the data with Gatsby but I found that for my use case, posting to WordPress is the easiest.
    Once I'm a bit more comfortable with Markdown, I'll probably write my posts directly in .md and query them using GraphQL.
  3. The blog will be hosted on Netifly. Netlify is a great hosting service that allows you literally plug your project right from Github and have it deploy on command from your terminal.
    Every time you push a commit you can choose to update your site. Pretty cool if you ask me.
  4. The styling will be done using styled-components which provides a great plugin in Gatsby. If you're not familiar with Styled Components, it literally derives from the "component" philosophy of React.
    Instead of having your component in a Javascript file (App.js) and your stylesheet for your component in a separate file (typically app.css or app.scss), you can have both the render and the styling in a single Javascript file.

    Styled-Components will generate class names for your components so that your style can't possibly break anything. Writing your styles that way also mean you have access to the power of ES6 to structure your properties.


Photo by  Camille Orgel  on  Unsplash

Photo by Camille Orgel on Unsplash

The reason behind that move is to push myself to publish more regularly and to explore the possibilities offered by GatsbyJS.

I can't wait.

I'll be writing about the first step next week about migrating data to WordPress.

Let me know what you think in the comments section down below!