This content originally appeared on Level Up Coding - Medium and was authored by Jordan Nash
Gatsby is built on React. The most popular front-end framework.
Photo by Adeolu Eletu on Unsplash.
Table of Contents
Introduction
Gatsby is an excellent way to learn React
Install the dependencies
Watch Joshua Fluke’s video or download his portfolio to start with
Run the site
Do NOT move the Gatsby files around
Transform the raw HTML to JSX
Merge the assets and images into our Gatsby site subfolder
Import assets and images into index.js
Change from a href to Link to
Resources
Introduction
A few years back I watched a video by Joshua fluke that taught me how to host a git repo as a GitHub Pages portfolio website without paying any money.
How cool! To think a few years ago I was paying to host my portfolio on Winhost where I was making no revenue but paying to host a portfolio site! But I wanted to go one step better. I wanted to share the knowledge of people who busted their guts trying to assist me. I wanted to make a blog about it.
But you don’t want to host the blogs on a hosting service when you have a working domain because:
- You may want to monetize it.
- Even if you don’t make anything you can get a reputation in the job market.
- When you have enough content Google will allow you to use Google AdSense so you can make some money when someone visits your site.
I used my domain on a GitHub Pages repo but because I had no blogging engine I had to manually enclose every single paragraph in HTML tags.
To get around that I used Jekyll which works well but if you want to learn React or have trouble grasping the concepts that’s where you can use Gatsby not only to write awesome blogs but also learn about react components on the side and syntax.
Gatsby is an excellent way to learn React
If you wanted to get into React but didn’t know what project to learn, Gatsby will help as it is built on React. So today we are going to use a portfolio website from Joshua Fluke’s original tutorial and turn it into a blogging platform.
And who knows maybe he will make a video about that himself. For now, we are going to expand on what has already been done. So I will give you a link to his repository.
You need to have installed Gatsby, Node.js, and Git. Run the following commands in your terminal to ensure you have installed them.
Install the dependencies
node -v git
--version
gatsby --version
If one of these commands does not return a version number then you need to go here to Gatsby’s official website so you can see how to install the dependencies depending on your operating system.
If one of these commands does not return a version number then you need to go here to Gatsby’s official website so you can see how to install the dependencies depending on your operating system.
npm install -g gatsby-cli
Use these tools in whatever text editor or IDE you are comfortable with.
Watch Joshua Fluke’s video or download his portfolio to start with
If you did not want to watch the video on how to create the GitHub Pages portfolio, that is OK you can just download this portfolio Joshua fluke made.
Make sure you can run the static HTML files first. If you are using Visual Studio Code then I advise you to install the Live Server extension.
Then simply open index.html in the root folder and go to the button below on the blue bar that says go live. You should see this.
But first, we need to generate the template we are going to use to build the Gatsby site. We do this in the command line.
Type the following commands.
gatsby new
This is optional if you want to update the Gatsby CLI.
npm install -g gatsby-cli
gatsby new
You will be directed to go through a series of prompts in the Gatsby template you install.
What would you like to call your site? ✔ · Portfolio Blogging site
You can just select the default area to save the site. As long as it does not exist outside of your portfolio project.
What would you like to name the folder where your site will be created? ✔ Desktop/ gatsby-companion-site
After that, you just select the JavaScript prompt and you have generated the site.
Will you be using JavaScript or TypeScript? ❯ JavaScript TypeScript
Select “No (or I will add it later)”. Yes, a content management system is more powerful than a static site generator but if you are not using something like WordPress as some sort of back end then there isn’t much point especially if you’re just trying to write some blogs.
✔ Will you be using a CMS? · No (or I'll add it later)
When it asks if you want to add a styling system, your answer is likely no unless you are creating a styling template from Gatsby as in you are not using the styling we already have.
✔ Would you like to install a styling system? · No (or I'll add it later)
In this case, we are using an Html5 UP theme with some Unsplash photos so we want to reuse the theme we got. Not have to create a new one and fiddle with the styling. Select no.
Now just select done. We can install plugins later.
✔ Would you like to install additional features with other plugins? · Done
I’m not going to explain the next prompt, just press “Y” when you see it. It should tell you if your site got set up. From the root in the terminal go to the Gatsby-companion-site folder.
Run the site
Now we want to install the node modules.
Say what you want about Node.js all I know is if it wasn’t for that backend JavaScript language we couldn’t easily use the npm package manager to install the modules on any computer which makes it faster when we are cloning the repository say to a laptop in the library to escape the heat.
I do it all the time in summer.
So now just runnpm install once we have done that we run the following command. You will be using this a lot!
Once we have done that we run the following command. You will be using this a lot!
gatsby develop
Yes indeed. And it allows mostly live reloading except when you manipulate server-dependent files like gatsby-config.js but you Will Be Given Warnings if You Do That, You Need To Restart the Server.
If that didn’t work then you may need to run it from the package manager.
Hoped either of those commands worked. when this appears http://localhost:8000/ in the terminal click on it and it should give you the default Gatsby page. You can keep the Gatsby server running in the background. If you need to stop it just hold CTRL + C to terminate it. Have a look at the generated boilerplate code in src/pages/index.js . After that let’s delete all that code in Index.js. Keep the file though!
Do NOT move the Gatsby files around
I know it might not look pretty with all those subfolders you’ve generated but do not cut and paste all the files out of it into the root. Leave them where they are else you will get a 404 error and Gatsby will tell you must have Index.js in the default React-generated path src/pages/index.js.
Transform the raw HTML to JSX
An arduous task? There is a way to ease the transformation. Most of what you see will simply get thrown into the <></> section. We would have to rewrite a few keywords, for example, class is a reserved HTML word so in JSX it will become className.
We can use Find and Replace for some of these words later which we will do but there is a better way though which takes some of the efforts away especially when you are new to react-styled blogging frameworks. Use Transform.
We will take a bottom-up approach here. Copy your entire index.html file into the HTML window of the transformed page and you should see the resulting transformed code in the JSX section.
Here is a copy of the HTML.
Yes I know, the indentation is off but that’s how it came shipped free.
You will see the JSX appear on the JSX window. Notice the changes. Some words like class have been changed to className, this is because the class is a reserved word for implementing JavaScript classes, and transform is avoiding those conflicts.
Also, you will notice the bootstrap class image fit.
Now go to the settings button and tick the section create function component then press confirm. I will do a snapshot to make sure you know where to go just below this next snippet.
Now copy the entire JSX file contents and create a new file under your “pages” folder called Index.js. As you may have guessed this will hold the JSX code.
One thing we need is to not have a constant functional component. We want Gatsby to hold our home “default” component” which will return everything inside it to the UI.
So we need to make some quick changes.
Change this line from this.
To Look Like This:
If the URL to the transform GitHub web app no longer works, the complete code should look like this. Very similar!
If the URL to the Transform GitHub web app no longer works, then the complete code should look like this. Very similar!
Merge the Assets and Images Into Our Gatsby Site Subfolder
So we right now have done the declaration side of things. We have declared the structure of our component. Now we have to import the images and styles into our component. We always have to also import the Gatsby plugins which we will do later.
Don’t worry if you lose the .ico icon file. You don’t want a boilerplate Gatsby icon anyway.
Now let’s create a layout component in the following directory.
The folder structure inside Gatsby-companion-site should look similar to this:
node_modules/
src/
gatsby-config.js
package-lock.json
package.json
I suggest merging everything slowly into the src subfolder. You don’t have to have like a git submodule or wipe out everything in your root folder! Just to make things a little more maintainable and less confusing. So outside our subfolder, we have got the following folders:
images/
assets/
Just cut and paste them into the src subfolder.
Good, now FYI pictures from pic04.jpg to pic09.jpg can be deleted in images/. We are not using those. They were never used in the original template!
Import assets and images into index.js
First things first. Let’s ensure the home page is using React.js. Let’s import it at the top of index.js.
Import assets and images Into Index.js
First things first. Let’s ensure the home page is using React.js. Let’s import it at the top of Index.js.
import React from “react”
Do you know how you have to declare style and script elements in the <head> tag for HTML?
Well in Gatsby we don’t include any <HTML>, <head> or <body> tags as you would find in a HTML document. Gatsby makes a default HTML structure at runtime. Most web frameworks do.
We’re going to be doing something similar in the React file index.js. We have to allow our components to communicate with our assets. So these are the files we are importing.
We must also change any static paths to our images in the actual component to match the image tag name.
So for each of those paths including the quotes, do a find and replace (Ctrl + F + H) and put the name of the image tags inside the curly brackets {} and in the replace box. Should end up with these replaced HTML tags.
You are getting near to rendering that home page in react. Great job if you made it this far! When you start replacing these images with your own, look to see here how you can make it more accessible to people who are vision impaired.
The answer is easier than you think. Just put some text in the alt field so their screen reader tells them what the image is about when they hover over it.
Change from <a href> to <Link to>
Gatsby has the <Link> component to allow for site navigation. All you need to know is it behaves like the anchor <a> element except there are performance bonuses, and the content from the link is already retrieved before the user clicks on the link.
Now rather than swap every single <a href > one for <Link to> we just use Ctrl + F + H. Some of you likely already know this. But I will give a quick rundown.
In your IDE/text editor, there should be a find and replace option and you should have To match whole word option selected. Place a in the first box and Link in the second and press the enter key.
Your IDE/text editor should have replaced a for Link. Now let us replace href for to using the same technique.
That will not be enough without importing the link component. To import it we must use Gatsby’s {Link} component like so.
import {Link} from "gatsby"Now fire up the Gatsby development server and navigate to http://localhost:8000/ you should see the page render.
Congratulations you have converted your website to Gatsby! Hope that helps. Goodbye for now.
Resources
Joshua Fluke’s Github Page Tutorial Video
Repo of Joshua Fluke’s Github Pages Portfolio Used for This Tutorial
Gatsby’s Official Site for Installing It
Transform. The Site Helps Convert a HTML Webpage to JSX
How to turn your portfolio into a blogging website with Gatsby was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Jordan Nash
Jordan Nash | Sciencx (2022-10-14T12:23:24+00:00) How to turn your portfolio into a blogging website with Gatsby. Retrieved from https://www.scien.cx/2022/10/14/how-to-turn-your-portfolio-into-a-blogging-website-with-gatsby/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.