Install Gatsby, add Tailwind CSS to it and deploy it to Netlify. A simple website example. 📖
Tags: gatsby, tailwindcss, netlify, javascript
Published: 2019-12-21 21:32:32

Hello all,

I wanted to try something new with my blog. So, I will use [GatsbyJS](http://gatsbyjs.org). 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](https://www.netlify.com/pricing/) as my host, and [Tailwind](https://tailwindcss.com) 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.

![Tailwind Hype](https://i.imgflip.com/3k648d.jpg)

OK, let's get to work.



## Requirements

Go to the [nodeJS](http://nodejs.org) website and install it.
If you want to use homebrew for it. 
```powershell
    brew install node
```
But be careful, it won't install npm. You need to install npm by using CURL.

Install yarn.
```powershell
    brew install yarn
```
## Install gatsby and create your first project

Let install gatsby.
```powershell
    npm install -g gatsby-cli
```
and try it.
```powershell
    gatsby --help
```
Now create our first project. Go to your desired folder for the project.
```powershell
    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.
```powershell
    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.
```powershell
    npm install tailwindcss
```
Create your Tailwind config file.
```powershell
    npx tailwind init
```
Now, we need to install postcss plugin.
```powershell
    npm install --save gatsby-plugin-postcss
```
Include the plugin in your gatsby-config.js file.
```js
    plugins: [`gatsby-plugin-postcss`],
```
Create a postcss.config.js file at your project home and insert
```js
    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.
```js
    @tailwind base;

    @tailwind components;

    @tailwind utilities;
```
Now call your site.css file in your pages/index.js file.
```js
    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.
```js
    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.
```powershell
    gatsby build
```
Run your project in local
```powershell
    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.

![Netlify Deploymen](https://i.imgflip.com/3k66m2.jpg)

- 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. :+1:

Best regards,
Tuna