Tuna Çağlar Gümüş

Posted on Dec 21, 2019

Install Gatsby, add Tailwind CSS to it and deploy it to Netlify. A simple website example. 📖

#gatsby #tailwindcss #netlify #javascript

Hello all,

I wanted to try something new with my blog. So, I will use GatsbyJS. I wanted to learn it anyway. Gatsby is a react based free framework for creating fast websites and apps.

Basically;

You install nodeJS, yarn, and npm (mostly comes with nodeJS).
You create a new Gatsby project.
Develop your project with javascript, CSS, and HTML.
Build the project.
Deploy your project by just copying and pasting your Public folder to host.

I will use Netlify as my host, and Tailwind as my CSS Framework.

Netlify is somewhat crazy. They host websites for free until 100GB bandwidth. They also let you use custom domains. And, Tailwind CSS is an incredible CSS framework. Probably that's why i see a lot of tweets and questions about that.

OK, let's get to work.

Requirements

Go to the nodeJS website and install it.
If you want to use homebrew for it.

    brew install node

But be careful, it won't install npm. You need to install npm by using CURL.

Install yarn.

    brew install yarn

Install gatsby and create your first project

Let install gatsby.

    npm install -g gatsby-cli

and try it.

    gatsby --help

Now create our first project. Go to your desired folder for the project.

    gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

You can change the name of your folder after creating your project.
Let's run our gatsby project.

    cd hello-world
    gatsby develop

This will generate our first project in development mode. You can view your site by navigating to http://localhost:8000/

Install tailwind CSS to your gatsby project

First, install tailwindcss to your npm packages.

    npm install tailwindcss

Create your Tailwind config file.

    npx tailwind init

Now, we need to install postcss plugin.

    npm install --save gatsby-plugin-postcss

Include the plugin in your gatsby-config.js file.

    plugins: [`gatsby-plugin-postcss`],

Create a postcss.config.js file at your project home and insert

    module.exports = () => ({
      plugins: [require("tailwindcss")],
    })

Now we need to include our tailwind CSS to our project.
Create a "styles" folder under the src folder. Create site.css file in styles folder.

    @tailwind base;

    @tailwind components;

    @tailwind utilities;

Now call your site.css file in your pages/index.js file.

    import "../styles/site.css"

That should be it. Now you can use Tailwind CSS in your application by simply using classes in your index.js file.

    import React from "react"
    export default () => (
       <div class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">Hello Gatsby!</div>
    )

And build your website for deployment. This will generate files in Public folder.

    gatsby build

Run your project in local

    gatsby develop

Now, you should see your processed "Hello Gatsby!" block.

Publish your project on Github, Gitlab or Bitbucket and deploy it to your Netlify host.

I won't share every step here with images. It will look disrespectful but there are plenty of articles about publishing your first project in Github. Please, check these out.

But, Simply;

Create an account in Github.
Download & install the GitHub client.
Login from the client and create a new repo for your gatsby project "Public" folder.
Commit it and publish it.

Then, there is the deployment.

Create your netlify account & log in.
Click "New site from Git" button.
Connect your GitHub profile with netlify.
Select your project from the list of your GitHub repos.

Then, it will ask for your domain.

Enter your domain name.
Go to your domain provider and change your website DNS to

dns1.p07.nsone.net
dns2.p07.nsone.net
dns3.p07.nsone.net
dns4.p07.nsone.net
Verify your domain from netlify.
Click the "Deploy" button.

And, that should be it. You should view your project build from your domain. You can check my example project results from https://pikseladam.com.
Actually, I didn't like the ending of this post. But, I didn't want to spoil it with a presentation of screenshots either.
Anyway, I just started writing community articles and I have a lot to learn. I'm sure you will understand. 👍

Best regards,
Tuna