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
Top comments (2)
This is awesome it turns web development into a fine art and not slavery
So so good way to get people in the web development without them feeling like they have to be experts in JavaScript