Skip to content

Instantly share code, notes, and snippets.

@panoply

panoply/overview.md

Created April 8, 2019 15:32
Show Gist options
  • Save panoply/c207f6833f181ca4486fd0b55b8aa8a8 to your computer and use it in GitHub Desktop.
Save panoply/c207f6833f181ca4486fd0b55b8aa8a8 to your computer and use it in GitHub Desktop.
Download ZIP
JAM workflow
Raw
overview.md

Brief Overview for Rod

A small rundown of how I develop these sites, hopefully give you a little more insight into the process.

Source Code (Development)

Source code is used to create site code (production). The source code will never be visible to the public and is used in development.

We upload source code to Github.

Site Code (Production)

Site code is generated from the development source code. The site code is what you see when you inspect or view the source a website from your browser, it's public facing code.

Netlify generates the site code from the source code on Github.

Jekyll

Jekyll allows us to build a static website in a convenient way, it takes the source code and generates site code. Think of Jekyll like you would squarespace but without the user interface and instead of it being a service it's more of a application which can build a static website from a bunch HTML and Markdown files. Jekyll is built with a language called Ruby which means we use this language both locally on our computer and remotely (online).

Github

Github is used to control the source code of the website. It's where the source code is essentially hosted. Each time a change is made to the source code from a developers computer the changes are pushed (uploaded) to Github, much like adding files using a FTP. The difference between FTP and Github is that using Git allows us to reference what we are uploading (committing). Git tracks every single file in your source code and keeps a record of every notable change that was made.

Netlify

Think of Netlify like a hosting provider but instead of hosting it's job is to build and host. Netlify looks at the source code we upload to Github and then takes that source code and builds the site code, this is how it does that.

  1. Netlify grabs the latest version of the website source code from Github
  2. Netlify downloads and install Jekyll
  3. Netify pulls the websites data from the CMS (more on the CMS later)
  4. Netlify runs the Jekyll build command
  5. The Jekyll build command takes the source code and bundles it up into site ready code.
  6. Netlify uploads the site code to it's cloud host service.

The entire process takes around 15 seconds to complete.

@promoteseo
Copy link

Thanks for the overview. it sounds complicated but i'm sure it's not

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment