Let's launch a website
right friggin' now!

Hi!

My name is Lemon.

(I make websites.)

Websites I've made for money...

Recipe aggregator for a multinational food corporation

Ticket exchange service for a professional hockey team

Daily use software for casino marketers to project future success.

Health and frequency reporting for national chain of fitness centers

Human resource information system for multibillion dollar banking corporation

I'm not gonna show you any of these

Websites I've made for fun...

damn.dog

A game that shows you wikiHow drawings and asks you to guess the article they came from.

idiots.win

A game that has you guess which sentence fragment is Google's top search query

greatsex.tips

An advice site that procedurally generates Cosmo-style sex tips of questionable value.

partypartypartyparty.party

A button that helps you party.

All these sites have a few things in common

• they were quick to build
• No backend code
• I found them fun

I've learned things from both.

One thing:

Complex systems make for complex solutions.

But

Tight scopes allow you to think about websites differently.

To that end, I wanted to launch a brand new site for KCDC

Which mean I needed to think of a site.

I had a couple ideas...

Here's one of them:

Urban Dictionary Jeopardy!

How about...

Hollywood Court Reporter

What's Elon Musk Launching Into Space Right Now?

Uhhhhhh....

A website for a lawn care company called
Marquis De Sod.

(that's stupid)

So maybe

Past Life Medium

How about

Dress Up Björk

Hideous Socks As A Service

Please find me an investor

Let's provide a service!

Zoom & Enhance

Let's be news-based thoughtleaders

Is This A Real VICE Headline?

Real

Fake

Eventually, I decided on an idea.

David Lynch Tarot

But then

I found Classique Productions.

Our tech stack...

• Sass
• Pug
• Vue

Sass...

Pug...

Vue

All of this tech requires a preprocessor.

• Pug -> HTML
• Sass -> CSS
• JS -> JS

We could do this with npm

• npm install gulp --global
• npm install gulp-sass
• npm install gulp-pug
• npm install gulp-concat
• npm install gulp-minify
• npm install gulp-livereload
• npm install gulp-wait

Then we'll need to edit package.json to include this stuff, as well as gulpfile.js to define how this stuff works.

This will give us a node_modules folder with over 10,000 files spread out over 1200 folders, for a total of 36 megs of code.

Also, we'll have to touch the command line.

I'm gonna present another option...

I use

Compiles...

Features...

Basically, it's a bunch of Gulp features in a UI.

This is not a paid endorsement.

There's also

• CodeKit ($34 / Mac Only)
• Koala (Free / Cross Platform)
• Crunch! (Less only)
• Scout (Sass only)

Or use Gulp.

Or use Grunt, or Webpack, or Broccoli.

Or write HTML & CSS and avoid this step completely

Whatever you like is probably fine.

Okay, so

Let me show you this website

And briefly

Let's see how we made it

Let's get this domain set up!

In your GitHub repo, go to options and set a branch to be handled by GitHub Pages.

HTTPS thru Cloudflare

Nameserver (set on registrar)

1. dom.ns.cloudflare.com
2. edna.ns.cloudflare.com

DNS (set on Cloudflare)

Thanks to a recent GitHub update

We can skip Cloudflare entirely...

For HTTPS

Or, if you want to make security experts mad

just ignore HTTPS

For HTTP

We are online!

Our repo is public.

Submit some pull requests!

This deck is also public.

(this doesn't need pull requests)

Costs

Let's be friends!

@AhoyLemon

• Twitter
• GitHub
• CodePen
• ahoylemon.xyz

My only request

Use your own time to make something cool.

Oh, and put a green chip in the box on your way out.

Thank you.