React, Gatsby, & Wordpress Static Site: Part One (Project Overview)

One day you will be able to have a friend complaining about not having a website, and without fear, you will be able to proclaim that you can “churn one of those bad boys out” in less than a couple of hours.

This series will document a project start to finish www.lorenaledezma.com and provide an overview of web development concepts and along with implementation details. The idea was to get a few friends interested in learning more about coding and provide an outlet for learning new concepts. These walkthroughs will be as introductory as possible.

Project

A production reel website to display videos, images, basic project information, and contact information.

Technology

Wordpress, React, GatsbyJs, Netfliy, Git, Node, and NPM.

Concepts

Version Control, Javascript Framework, Static Site Generators, Server vs. Client, API, and Deployments

Version Control

This is how to keep track of changes. The equivalent of being in photoshop and having image-final.jpg, image-final-1.jpg, image-final-final.jpg (etc.) except it is done in code

Javascript Framework

A Javascript framework is a library that you use like react or vue. These libraries have conventions that make it easy to create complicated web applications.

Static Site Generators

A static site generator takes files and then builds a website with .html pages to be served. Whenever a file changes, the generator needs to be run in order to rebuild the site and serve the new content. Gitbook Gatsby Hugo are popular

Server vs. Client

This concept of server vs. client is a fundamental concept in web development. A Server is a computer somewhere doing something, often serving a website. A Client is a consumer of whatever a server sends, typically a browser (Chrome, Firefox, or Internet Explorer god help you). A server will often send an .html file which is essentially your website. Your .html file might also need some styles (css) images (.jpeg file) or even some flashing text (javascript) which the index.html can ask from the server as well.

API (Application Programming Interface)

Complicated terminology, but an important concept. A server might store data, like in a database. For example, an e-commerce application or website might rely on a database full of purchases. An application programming interface, API, is just the way that a client, the shop website, can ask the server for the data of all of the purchases. Or maybe all of the purchases for a specific customer. For RESTful APIs, that means a set of endpoints like:

http://e-commerce.com/purchases/:customer-id

If you made a GET request to that endpoint, that is to say, put that url in your browser (with a customer id) it would send you the data of all the purchases for that customer!

Deployments

The code for your website will live on the server so that it can be sent to anyone that requests it (goes to yourwebsite.com). A deployment refers to the process of getting the new code that you’ve written onto the server that runs the code. A very crude way is to ssh (a way to access your server remotely) and change the files directly. A more sophisticated way is to push code to a git repository and then that code is pushed to a server. Netlify is tool for deployment.

Paths

There are potential areas of concentration for this project.

Frontend

Styles and markup. Write the html and css to create components for the website. Navigation, menu, images, videos etc. Mobile first.

Javascript

Take frontend markup and css to create components. Use state to handle any reactive logic, menu transitions, routing etc. Use Gatsby to pull in Wordpress posts to generate content.

Wordpress

Create wordpress site for gatsby to use. Create post types and fields.

🔥 🤓 🔥

There will be more in the series and I’m hoping a few friends or random people show enough interest to help spur along the content of future articles