Publishing Websites

HTML/CSS/JS
CMSs
Web Applications with app server
Site Generators

Pros and Cons of HTML Sites

Pro: Don't need a server to render
Pro: Simple hosting
Pro: Fine control over HTML/CSS/JavaScript
Con: Cumbersome to reuse layout for each page
Con: No easy way to minify/uglify content

Content Management Systems

Prebuilt Web Application for publishing website
Many hosted services
Don't need to be a Web Developer to publish a Website

Open Source CMS Software

WordPress
Drupal
Joomla

CMS Pros and Cons

Pro: Can use pre-existing themes
Pro: Content Can be created by non-web developers
Pro: Can set up permissions for certain content
Con: Sometimes inflexible
Con: Generally requires backing database
Con: Requires app server or servers
Con: Slashdot effect

Web Application

Host custom Web Application
Express or Hapi Framework
Use platform of your choice

Static Site Generators

Site Templates and Themes
Very popular with Ruby and Node.js developers
Site deployed as a static site with HTML/CSS/JS
Build process compiles HTML
Deploy to AWS S3, github pages or Netlify

Current SSGs

Jekyll (Ruby)
Octopress (Ruby)
Middlemen (Ruby)
Metalsmith (Node.js)
Hugo (Node.js)
Nuxt.js (Node.js)
Gatsby JS (Node.js/React)

Pros and Cons of SSGs

Pro: Hosted cheaply or for free
Pro: Static Sites are easier to deploy
Pro: No database required
Pro: Create content in HTML or Markdown
Pro: Publish with existing CMS
Pro: Less susceptible to Slashdot effect
Pro: Use git as source of truth
Con: Harder to do server interactivity

Jekyll

Jekyll still very popular
Based on Ruby
Very Simple
Build pages in HTML or Markdown
Liquid template engine
Built into Github pages

Gatsby JS

Build using React
Created by Kyle Mathews
Serverless
Very extensible through plugins
Offline Access
Build Pages using React or Markdown w/ plugin
Progressive Image Loading

React the Framework

SPA Framework
Next.js SSR
React Native Mobile Apps
Gatsby JS

Getting Started

Need both Node and Git
npm install -g gatsby-cli
gatsby new [site-name]
gatsby new [site-name] [template-name]
gatsby develop
gatsby build
gatsby serve

Gatsby Structure

public

src

--pages

gatsby-config.js

gatsby-node.js

package.json

Hello-World!

// src/pages/index.js

import React from "react"

export default () => <div>Hello world!</div>

No Router

No need for router because using pages
import the <Link /> object from Gatsby lib
<Link to="/contact/">Contact</Link>

<Link />

// src/pages/index.js
import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default () => (
  <div style={{ color: `purple` }}>
    <Link to="/contact/">Contact</Link> 
    <Header headerText="Hello Gatsby!" />
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

Style options

Regular CSS
CSS Modules
CSS in JS
Styled Components
SASS Plugin

Gatsby Data

GraphQL Server builtin
Source plugins for file system, CSVs, Word Press, etc..
Query Data directly from pages
Components can query data from <StaticQuery/>

GraphQL Example

// src/pages/index.js
import React from 'react'
import { graphql } from 'gatsby'

const HomePage = ({data}) => {
  return (
    <div>
    {data.site.siteMetadata.description}
    </div>
  )
}

export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`

export default HomePage

query {
   markdownRemark(id: { eq: "e16204e2-d882-50dd-a24d-316d166251e0" }) {
      excerpt
      frontmatter {
        title
        date
        category
      }
   }
}

query($id: String!) {
  markdownRemark(id: { eq: $id }) {
    excerpt
    frontmatter {
      title
      date
      category
    }
  }
}

With parameters

Plugins

Highly extendable
Two types of plugins
Source plugins
Transformer plugins
Can be installed using NPM
Configured using the gatsby-config.js file

# Markdown

Shorthand for HTML
Very popular with bloggers, writers and documentation
Invented by Jon Gruber
Github has a formatter
Used in combination with Frontmatter, all you need

---
title: "Pandas and Bananas"
date: "2017-08-21"
---

# This is a H1 tagged line

This will be in a p tag. Do Pandas eat bananas? Check out this short video that shows that yes! pandas do
seem to really enjoy bananas!

* This will create a bullet point in ul -> li.

This will be a link to [jaxnode.com](https://www.jaxnode.com).

<iframe width="560" 
    height="315" 
    src="https://www.youtube.com/embed/4SZl1r2O_bY" 
    frameborder="0" 
    allowfullscreen></iframe>

Hosting

Many inexpensive options
Anyone providing static hosting
Github pages, anything in the gh-pages branch or the master branch for username.github.io
Amazon S3
Netlify

Gatsby JS

Publishing Websites

Pros and Cons of HTML Sites

Content Management Systems

Open Source CMS Software

CMS Pros and Cons

Web Application

Static Site Generators

Current SSGs

Pros and Cons of SSGs

Jekyll

Gatsby JS

React the Framework

Getting Started

Gatsby Structure

Hello-World!

No Router

<Link />

Style options

Gatsby Data

GraphQL Example

Plugins

# Markdown

Hosting

Don't use FTP

GIT is FTP for Code

DEMO

Questions?

Resources