Skip to content

Instantly share code, notes, and snippets.

@whroman

whroman/fo.md

Last active May 8, 2016 13:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save whroman/5ff44ce7d88c1c3d6c0a8f80bcfd3b36 to your computer and use it in GitHub Desktop.
Save whroman/5ff44ce7d88c1c3d6c0a8f80bcfd3b36 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fo.md

Website Overview

aqua-volta.com is hosted for free through Github Pages (GHP)

This requires that the code be stored in a public Github repository (or "repo"), which it is (https://github.com/whroman/kite-lite).

Github listens for new commits on the branch gh-pages. When new commit(s) are found, Github automagically pushes the new code to aqua-volta.com. This is one form of a process called "continuous integration".

What is Continuous Integration?

"Continuous integration" or "CI" is the software deployment process of having one's software system update another part of the system based on changes to a source control repository. Most modern software companies use some form of CI, including at mine and Cristina's current employers.

In-depth

Another example of CI is my minesweeper project. The git repo's README has a button that says "coverage: 94%" (https://github.com/whroman/minesweeper-react). This tells me how much of the code has been touched by the code's test suite. I have a CI server set up (https://travis-ci.org/whroman/minesweeper-react) that listens to all branches of the minesweeper repo for new commits. When found, the server runs the test suite on the new code and pushes the "coverage" results to some other service, which overwrites the coverage button image seen on the README.

The entire website is static

Put simply, most websites function like this:

  1. Browser asks Server for content, based on URL
  2. Server finds relevent data and injects it into its HTML templating engine.
  3. Server compiles templates into a single HTML page.
  4. Server sends the single HTML page and relevent assets (JS, CSS, images) back to Browser

This is not how aqua-volta.com works. Steps 2 and 3 are not handled by the server because GHP only allows us to host "static" websites. To work around this, I am manually doing steps 2 and 3 when I work on my machine and then push the up the results in the GH repo. See "HTML Update Workflow".

HTML Update Workflow

This process is a bit convoluted, which I think will prevent Mike or Kim from being able to "just edit the HTML".

  1. I edit the content of ./templates/pages/about-us.ejs. This is a "template" because it references other files, such as ./templates/layout/start.ejs.
  2. I run npm run build on the command line.
  3. A new ./about-us/index.html is created, which is the compiled version of about-us.ejs.
  4. I commit the changes.
  5. I push the new commit to Github on branch gh-pages.
  6. The changes are now reflected on aqua-volta.com.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment