Build your personal site using Gatsby
What is Gatsby?
Gatsby is a modern site generator based on React and GraphQL. They make website development fun by making it simple. If you have a good understanding of React, you will have a site up and running in no time.
Getting Started
Gatsby provides us with a CLI tool that quickly creates a new Gatsby site. To install the Gatsby CLI, you should already have Node and Git installed in your system. The command npm install -g gatsby-cli will install Gatsby in your system. Similar to the create-react-app command, Gatsby provides us with a starter template. The command gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world will create a new Gatsby project.
Gatsby pages
Similar to React apps, most of the source files for your website will be in the src directory. When you first open up, you will see the pages directory within src, and index.js file within the pages directory. Index.js is the entry point to your app. Every page you create moving forward should be in the same directory. Similar to React, Gatsby uses JSX syntax (HTML in JS). Every new page you create, you begin by importing React up top.
Routing
Gatsby removes the headache when it comes to linking one page to another. In React, you would import at minimum 3 components to set up routing. Gatsby has built a <Link /> component that takes in a to property with the value being one of the pages you created. i.e. <Link to=’/about’>About Page< /Link>. The ease of transitioning from one page to another makes Gatsby that much more beginner-friendly.
Styling
In terms of styling, Gatsby takes two different approaches. Gatsby uses global styles to dictate the overall feel of the site. You would create a CSS file like you would normally do. The one caveat is that you have to create a specific file gatsby-browser.js in the project's root directory, which Gatsby looks for and uses. Another approach tackles CSS scoped specifically to a component. Component-scoped CSS files are named: filename.module.css to tell Gatsby to process it as a CSS module. You would then import the CSS module into the component it belongs to. When you import the file, Gatsby converts the CSS module into an object, which you would access like any other object.
Deploy a Gatsby Site
Once you are ready to publish your site, the quickest way as suggested by Gatsby is to use Surge, a static site host. To do so, you need to install Surge, npm install — global surge, followed by creating an account with surge login command. Once you have that, you run gatsby build, which generates a list of files in the public directory. Once the files are ready, you deploy it to surge using surge public/ command. Once it's been deployed, Surge will provide you with the web address where it can be viewed live. Although there are many other options, this method takes no more than 5 lines to accomplish.
Conclusion
Gatsby is here to stay. It is only going to improve as more contributions are made to the project. This basic tutorial should allow you to have a site running in no time. To learn about more advanced features and read documentation, visit Gatsby’s official site.
