Deploying a webpage using Gatsby.js
Recently, I was tasked with deploying a personal website using the Gatsby.js framework, and deploy that website using Netlify. I was up for the challenge, but I didn’t think it would be that challenging. Yes. I know. Some of you would say that this task is easy, and why would it be so challenging? Well…considering I am fairly new to programming in general. I am still learning. I also have a 7 month old at home, and she requires a lot of my attention. She’s my cheerleader, and the reason why I really dove into programming in the first place. More on that some other time.
But aren’t we all continuously learning, regardless of our interests? I thoughts on learning are: If you believe you have learned everything there is to know about a particular subject, then you haven’t really learned anything. There is always room for growth/improvement, and just like any other subject, things are changing at a rapid pace.
To kick things off…head on over to https://www.gatsbyjs.com/docs/quick-start/
From there, you will be guided on how to start your project using Gatsby.js. Be sure to follow the instructions to the ‘T’. I missed a step, and had to restart the build again. I could have just installed the missing package, but I guess I like to work the hard way.
Once you have your project set-up. You should be able to run the project by typing npm run develop. Once you have developed the bundle, you should be able to run the build using localhost:8000. As you will see with my folder structure, there are not very many folders. I only added the components folder to add…well…components. I added not only .js files, but I also included the global CSS files as well. What is Global CSS? Well, Global CSS are basically styled components. These styled components are labeled globally by setting up a layout.css file. You could also use inline styles such as what you see here as styling your header like so <h1 style={{color:”blue”, textTransform: “uppercase”}}> Hello my beautiful people</h1>. You could do it this way, but if your project gets better, then you would get confused and muck something up. So global CSS is a better option and create a css file like so for the layout. As you can see below. I have set-up a layout.css file for global CSS and have used the file to style the components. Remember that you can use layout.css to correspond to layout.js to set-up global components and CSS styling. You can also see that I set up classes for each .js file.
Deploying to Netlify
This part was difficult for me. I continued to get errors. I googled the errors and there was a missing webpack. It helps to read the errors so that you can google them. Google is your friend. Learn the fine art of Google-Fu. I would highly suggest using github instead of just dragging and dropping. I would also learn how to use the terminal. I was lazy and just dragged and dropped my folders and files, but as a programmer, that does not help me.
Once you have deployed from github once, you will never have to give authorization. It is that easy. Simply click on the “Team Overview Tab” and then click “new site from git.” You will then be given a menu of all of your repositories that you can deploy using Netlify. This is my personal opinion, and I am not getting any type of endorsement from Netlify, but Netlify is easier than Heroku in my opinion. Sorry Heroku.
With that said. Here is a link to the website that I have deployed. Please comment, like/dislike, give me a keyboard lashing, or just simply state how I can improve my blogs, or my website. Here is a link to my website. It is a work in progress and I will be making changes throughout the coming months. https://602588f97c4d100ceb09aec7--festive-wescoff-322e4c.netlify.app/
Please follow my friends via github or twitter pages.
