One click, One website

there!

Welcome to step #3 of my series on the essentials of the web for dataviz practitioners.

In step 1, we learned that a website is essentially an HTML file with a bit of CSS and JS. In step 2, we discovered that the libraries you use in R and Python to create interactive graphs are just wrappers that generate the HTML for you.

You're almost a web developer now!

With tools like Quarto and Jupyter, you can embed those interactive charts in stunning HTML reports.

Now, the question is: How can you share this?

Email / USB / Hard Drive / Dropbox

Sure, an HTML file is essentially a text file, so you can share it like any other file. But there are some significant drawbacks:

• If you update the file, you'll need to send it again.
• If your laptop/USB stick fails, you lose your work.
• If the recipient makes changes, you end up with two versions.

But remember, an HTML file is basically a little website! So, let's make it a website!

Let's host it

To transform your HTML file into a website, you just need to host it on a server.

A server is essentially a computer without a screen that anyone with an internet connection can access via a URL:

For example, typing www.domain-name.com/my-file.html will show you the content of that HTML file.

Many companies offer web hosting services. But, as a coder, there's one obvious solution:

GitHub

If you don't know what GitHub is, stop everything and read this intro I wrote.

GitHub is a platform where you can share and store your code online. Any serious developer has an account there! If you check my profile, you'll see everything I'm working on. I never write a line of code without it being on GitHub.

Using GitHub is much simpler than what people think. The reason is that you need only a tiny fraction of what it offers! So do not be intimidated, and follow my lessons to learn it!

Beyond keeping your code safe, letting you roll back changes, and enabling collaboration, GitHub is also a web hosting provider.

This means any HTML file you upload to GitHub can become a live website. There is just 1 button you have to click!

For example, I have a GitHub repository with a report in it. You can check out the HTML file here, and the resulting live website is available here!

Too easy!

Static Website

The website we just created is a static website.

It's 100% free. If you have 1000 users at the same time, it still works fine. You have nothing to do to maintain it. No-one can hack it. It will still work in 20 years.

Static does not mean there is no interaction on it. You can zoom on the map, show a tooltip, show / hide code chunks... But it's your browser that does the work, not the server.

The server simply sends you the HTML file, nothing more. It cannot run calculations like linear regressions, query databases, or provide user logins.

Next week, you'll understand why this matters A LOT. We'll talk about dynamic websites to understand how platforms like Shiny and Streamlit differ from static websites. And more importantly, when to use static vs dynamic!

Hope you're still with me!
Yan

PS: I'm obsessed with GitHub and online data analysis reports (proof). If you're working with data and code, this is one of the best investments you can make for your career!

PPS: Not using it? Please drop me an email and tell me why not. I'm genuinely curious!