DEV Community

Cover image for How To Build A Blog With Gatsby and Netlify
Aleksandar Vasilevsk
Aleksandar Vasilevsk

Posted on • Originally published at codespot.org

How To Build A Blog With Gatsby and Netlify

This is a preview of my original post cross-posted from my website's blog

What is Gatsby js

To build a blog today has become even more easy with the new JAM Stack (JavaScript, API, and Markup). JAM Stack stands for
A modern architecture - Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.

Gatsby is a static site generator that is built on ReactJS. In its simplest definition, a static website is a group of HTML pages, which does not pull any data from a database when a viewer visits it. A static site looks the same for every visitor. Static sites are faster to load too, as the server sends the same response to every visitor. However, you can not customize content for visitors. Since Gatsby builds on top of React, you get all the benefits of React such as its performance, components, JSX, React library ecosystem and a large community. Gatsby Documentation is also very well written so you should not have any problems.

For many static websites, you will need to use external data sources during the build process. Gatsby provides support for many forms of data, including CMSs like WordPress, APIs, and Markdown. To access this data, Gatsby uses GraphQL.

Alt Text
Gatsby js Schema

If you know GraphQL, accessing data from Markdown using Gatsby feels easy. If GraphQL is new to you, it does add yet another thing to learn, however, the documentation on using GraphQL with Gatsby has a lot of information.

Note: GraphQL is a query language.

Building a Blog With Gatsby js

To create a blog with gatsby js, we need to do a couple of steps. Let's see in the example below.

Install the Gatsby CLI

npm install -g gatsby-cli
Enter fullscreen mode Exit fullscreen mode

Create a new site

gatsby new gatsby-site
Enter fullscreen mode Exit fullscreen mode

Change directories into site folder

cd gatsby-site
Enter fullscreen mode Exit fullscreen mode

Start the development server

gatsby develop
Enter fullscreen mode Exit fullscreen mode

After the four steps, your gatsby site will be ready, you can access the gatsby development environment at localhost:8000 by default. You can edit JavaScript pages in the src/pages and the changes will be reloaded automatically in the browser.

Create a production build

gatsby build
Enter fullscreen mode Exit fullscreen mode

With the build command, Gatsby will perform production build for your site, which in other words means generating static HTML pages.

Serve the production build locally

gatsby serve
Enter fullscreen mode Exit fullscreen mode

Lastly, with the shell command, Gatsby will start local HTML server for testing your build site

Gatsby project structure

With the Gatsby site installed you will get the default project structure, which is very simple with a couple of important config files to remember.

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
Enter fullscreen mode Exit fullscreen mode

Gatsby js project structure

There are four important files for gatsby site:

  • gatsby-config.js - configure options for Gatsby with metadata like title, description, etc.
  • gatsby-node.js - Gatsby Node.js API for customizing the default settings about the build process.
  • gatsby-browser.js - Gatsby browser API for customizing the default settings for the browser.
  • gatsby-ssr.js - Gatsby server-side rendering API for customizing the settings affecting server-side rendering.

You can read the rest of the post on my website's blog

Top comments (7)

Collapse
 
quinncuatro profile image
Henry Quinn

You can read the rest of the post on my website's blog

Boooooooo.

You can hit a setting on DEV to give the Google pagerank credit to your blog while keeping the content here.

Collapse
 
erickacevedor profile image
Erick Acevedo

Hello Aleksandar, is nice to say hello! I'm following your tutorial but I Get this error on my terminal, I tried several fixes but none of them works, so I was wondering if you can give me a hand trying to fix it or at least a first step to do it:

erickacevedor@Erick-Acevedos-MacBook-Pro ~ % gatsby new gatsby-site
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git
Cloning into 'gatsby-site'...
remote: Enumerating objects: 28, done.
remote: Counting objects: 100% (28/28), done.
remote: Compressing objects: 100% (25/25), done.
remote: Total 28 (delta 2), reused 17 (delta 2), pack-reused 0
Unpacking objects: 100% (28/28), done.
success Created starter directory layout
info Installing packages...

> fsevents@1.2.11 install /Users/erickacevedor/gatsby-site/node_modules/fsevents
> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> sharp@0.23.4 install /Users/erickacevedor/gatsby-site/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/erickacevedor/.npm/_libvips/libvips-8.8.1-darwin-x64.tar.gz
ERR! sharp Please delete /Users/erickacevedor/.npm/_libvips/libvips-8.8.1-darwin-x64.tar.gz as it is not a valid tarball
ERR! sharp zlib: unexpected end of file
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/page/install for required dependencies
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
../src/common.cc:25:10: fatal error: 'vips/vips8' file not found
#include <vips/vips8>
         ^~~~~~~~~~~~
1 error generated.
make: *** [Release/obj.target/sharp/src/common.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:198:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/erickacevedor/gatsby-site/node_modules/sharp
gyp ERR! node -v v10.16.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sharp@0.23.4 install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sharp@0.23.4 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/erickacevedor/.npm/_logs/2019-12-28T00_20_17_409Z-debug.log

 ERROR 

Command failed with exit code 1: npm install



  Error: Command failed with exit code 1: npm install

  - error.js:56 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:56:11

  - index.js:114 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:114:26

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7


erickacevedor@Erick-Acevedos-MacBook-Pro ~ % 
Enter fullscreen mode Exit fullscreen mode

Any help would be very appreciated.

Collapse
 
faysalkhan profile image
Faysal Khan

you delete node modules and again to create yarn install or npm install

Collapse
 
cirphrank profile image
🎧Cirphrank👣

Static blog, how do you update? A new commit/deploy every time you want to make a new post? Or you have a work around the static state of Netlify?

Collapse
 
vasilevskialeks profile image
Aleksandar Vasilevsk

For now, I update the blog with a new commit/deploy for every new post. But in the future, I might go with something else in terms of updating.

Collapse
 
cirphrank profile image
🎧Cirphrank👣

Okay.

Collapse
 
jgilbertcastro profile image
Jesus Gilbert

If you want you can you my backend nodejs + graphql and sqlite3.

github.com/jgilbertcastro/micro-blog