19
LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6 Workshop resources: www.launchsteps.com/workshops/landing_page_over_coffee_2014_2_1/ Let’s connect on Twitter: @dwightgunning

Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

LAUNCH A LANDING PAGE OVER COFFEE

Wifi network: workspace6 Wifi password: creative6 !

Workshop resources: www.launchsteps.com/workshops/landing_page_over_coffee_2014_2_1/ !

Let’s connect on Twitter: @dwightgunning

Page 2: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• What’s a website and how do they work?

• Organise your web domain and hosting

• Set up your machine to design and build

• Design and build the site

• Launch the site

Page 3: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

WHAT’S A WEBSITE AND HOW DO THEY WORK?

Image credit: http://www.simplimation.com/blog/5/how-the-web-works

Page 4: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

HTML

Page 5: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

CSS

Page 6: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

JAVASCRIPT

Page 7: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• What’s a website and how do they work?

• Organise your web domain and hosting

• Set up your machine to design and build

• Design and build the site

• Launch the site

Page 8: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

DOMAIN AND HOSTING RESOURCES• Domain name finder: http://domai.nr/

• Domain name purchase: http://www.gandi.net/

• Amazon Web Services: http://aws.amazon.com/

Page 9: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

SETTING UP THE DOMAIN NAME

Page 10: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• What’s a website and how do they work?

• Organise your web domain and hosting

• Set up your machine to design and build

• Design and build the site

• Launch the site

Page 11: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

MACHINE SETUP RESOURCES• Sublime text editor : http://www.sublimetext.com/

Page 12: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• Open your terminal application

• Create a directory for your website projects

Page 13: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• Download and install a helper tool called “virtualenv”

!

• Activate the new virtual environment

!

• Create a new website project

$ curl -O https://pypi.python.org/packages/source/v/virtualenv/virtualenv-1.11.2.tar.gz!$ tar xvfz virtualenv-1.11.2.tar.gz!$ cd virtualenv-1.11.2!$ python virtualenv.py ~/websites/cactus-venv

$ source ~/websites/cactus-venv/bin/activate!$ pip install cactus

$ cd ~/websites/!$ cactus create www.launchsteps.com!$ cd www.launchsteps.com!$ cactus serve

Page 14: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• What’s a website and how do they work?

• Organise your web domain and hosting

• Set up your machine to design and build

• Design and build the site

• Launch the site

Page 15: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

DESIGN AND BUILD RESOURCES• http://www.getbootstrap.com/

• http://bootswatch.com/

Page 16: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

DESIGN AND BUILD RESOURCES• http://www.getbootstrap.com/

• http://bootswatch.com/

Page 17: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• What’s a website and how do they work?

• Organise your web domain and hosting

• Set up your machine to design and build

• Design and build the site

• Launch the site

Page 18: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

• Deploy the site to Cactus

!

• Browse to www.launchsteps.com

$ cactus deploy!$ Amazon access key (http://bit.ly/Agl7A9): xxxxxxxxxx!$ Amazon secret access key (will be saved in keychain): xxxxxxxxxxxx!$ S3 bucket name (www.yoursite.com): www.launchsteps.com

Page 19: Launch a Landing Page over Coffee - 20140201 · LAUNCH A LANDING PAGE OVER COFFEE Wifi network: workspace6 Wifi password: creative6! Workshop resources:

LAUNCH A LANDING PAGE OVER COFFEE