GATSBY
What is Gatsby ?
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
Gatsby is generally defined as a powerful static site generator, but very different from other SSGs like jeykill, hugo etc. The particularity of Gatsby is that it allows you to create extremely fast static, progressive and high performance web applications.
How it works ?
Gatsby does all the data fetching during build time. No matter where your data come from you can access it in the same way. Gatsby normalize your data into a graphql api so you can read and display them easily.
At the end gatsby will compile all of this into static assets and then allow you to deploy very quickly your app to a CDN of your choice rather than a traditional server.
Here is a graphic that summarize it:
Getting started
Gatsby CLI
npm install -g gatsby-cli
The above command installs Gatsby CLI globally on your machine so you can use all these commands.
Create new project
gatsby new gatsby-site
Start project
gatsby develop
Build project
gatsby build
Gatsby Starter
The Gatsby CLI tool lets you install starters , which are boilerplate Gatsby sites maintained by the community and intended for jump-starting development quickly.
For example if you want to create a blog, you can use the blog starter instead of starting coding from scratch. All the gatsby starters can be found here.
I found a very nice starter blog which I used to quickly get up-and-running.
With this starter I have access to a lot of features like netlify CMS that we will see in the next section, that’s what’s cool about gatsby starters.
I initialized a new project with this starter by running:
gatsby new blog https://github.com/W3Layouts/gatsby-starter-delog
This command downloads the files and initializes the site by running npm install.
After that i can run my app :
cd blog
gatsby develop
Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000.
Customizing:
By default the starter looks like this:
After some customization it’s now look like this. I changed colors , added a avatar, changed the fonts etc :
You can customize your app as you want , it’s just html, css and react.
By the way I created my own starter if you want to start a Expo/Gatsby project.
Gatsby Plugins
Basically Gatsby plugins are just Node packages, so you can install them like other packages in node using NPM.
You need Google analytics? There’s a plugin for that.
npm install — save gatsby-plugin-google-analytics
You need offline support? There’s a plugin for that.
npm install — save gatsby-plugin-offline
In short there is a plugin for everything you want to do.
Netlify and Netlify CMS
Netlify
Definition : Netlify is a platform you can use to automatically build, deploy, serve, and manage your frontend sites and web apps.
There are really a lot of advantages to using netlify in a gatsby site.
Continuous integration : Every time i push my code to github, netlify build a new version of my app and deploy it. I have nothing to do, that’s super cool.
Forms : I have a contact form in my website, so that users can write me. Netlify comes with built-in form handling. I just have to add thenetlify attribute or data-netlify="true" to the tag, and i can start receiving messages in my Netlify site admin panel.
Domain Settings : I added my custom domain mouhamedaly.dev directly from the netlify admin panel. In just a few minutes my domain was available
Top comments (0)