Welcome to step #3 of my series on the essentials of the web for dataviz practicioners.
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: β
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. β
All my work is on Github, and my homepage looks like this. You should have a GitHub account to!
β 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 in 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 the best investment you can do for your career! β βPPS: Not using it? Please hit reply and tell me why not. I'm genuinely curious! β
β