deploy our website ? But where ?

deployment workflow

understand the client-server ARCHITECTURE

static website

 (aka "site vitrine")

+ browser

every webpage has a unique address

Use the GitHub Pages server

to freely host static web pages

(check out our tutorial)

which web server for your first website ?

• Register on GitHub

• Install the GitHub Desktop app on your laptop and open it

• Drag & drop your website folder to the GitHub Desktop app

• Create a new repo

• Commit your changes ("initial commit") to Master

• Create a new branch called gh-pages

• Publish & synchronize

How to Use GitHub Pages

How to customise your URL (doMAIN name) ?

Follow our tutorial !

Install Google Analytics

to follow what's going on there in real time

Check out our tutorial

Which TRAfFIC on My webSITE ?

• ​Determine where your best visitors are located

• Learn what people are searching for on your site

• Visualize what people click on the most

• Uncover your top & worst performing content

• Determine where people abandon & your bounce rate

• Determine your mobile traffic

which info collected

Additional Resources

​http://www.whoishostingthis.com/resources/web-hosting/

use great web services

MailChimp

(to collect user inputs & manage contacts)

use great web services

MailChimp

(to collect user inputs & manage contacts)

use great web services

MailChimp

(to collect user inputs & manage contacts)

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="http://8thcolor.us4.list-manage.com/subscribe/post?u=506ea88e9f457f1a4960a3310&id=868a950c07" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    ...
  </form>
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

A form...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<h2>Subscribe to our mailing list</h2>
<div class="mc-field-group">
  <label for="mce-EMAIL">Email Address </label>
  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

with minimal fields...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<div id="mce-responses" class="clear">
  <div class="response" id="mce-error-response" style="display:none"></div>
  <div class="response" id="mce-success-response" style="display:none"></div>
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

error messages...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
  <input type="text" name="b_506ea88e9f457f1a4960a3310_868a950c07" tabindex="-1" value="">
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

bot signup protection...

use great web services

MailChimp

(to collect user inputs & manage contacts)

<div class="clear">
  <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

Snippet of code to copy & paste from MailChimp 

onto your HTML file, to call & consume the MailChimp API

and the action.

Use analytics tools

Google Analytics

(to monitor your website)

• ​Determine where your best visitors are located

• Learn what people are searching for on your site

• Visualize what people click on the most

• Uncover your top & worst performing content

• Determine where people abandon & your bounce rate

• Determine your mobile traffic

Use analytics tools