Coding Y3
How to publish a static HTML website?

How to publish a static HTML website?

At the end of a more or less extensive development process, it’s time to bring a website to life once and for all by publishing it and making it accessible to everyone online. We’re going to look at how to make publication as simple as possible and how best to integrate it into a workflow.

Chapter 1
At the source, a server

Publishing a website intrinsically involves uploading the website’s data to a connected server, which then makes the website’s content available to as many people as possible, from a browser, via the HTTP protocol.

Setting up a server

Depending on the technologies used, the server will need various specific settings to enable communication with external clients and to make it secure and optimised. Servers are usually based on the OS Ubuntu, also known as a distribution of Linux.

Hosting services

However, setting up a server is a fairly complex task that requires a great deal of expertise and is often expensive. This is why the vast majority of the general public use what is known as a hosting company, i.e. a service that provides access to shared, secure, pre-set servers, making it much easier to upload files.

But these services obviously come at a price, and are not necessarily suitable for experimental projects or projects that require frequent code modifications, since uploading is done manually via what is known as FTP software.

Chapter 2
Breaking free from traditional hosting providers

For some years now, other possibilities have been available to make the publication of static websites even simpler and more integrated to development work.

Static websites

A static website is based on HTML files (i.e. files that can be read directly), as opposed to a dynamic website which is based on a server-side language (PHP for example) and generally a database (i.e. requiring a server). The simplicity of a static website makes it possible to “do without” a traditional server and use simplified services.

Github Pages

The best known of these is Github Pages, directly integrated into Github. The idea behind Github Pages is to make a website deployed on Github directly accessible online, so that updating is based solely on the need to publish via Git, a technology already widely integrated into web developers’ workflows.

Deploy to Github

To deploy a website on Github, using the starterkit I’ve provided, VS Code makes the process extremely simple. Simply go to the Source Control window and click on the Publish to Github button. From there, you can create a Github repo, and then access it from the Github interface. It’s important to create a Public repository and not a Private one, as Github asks you to pay for the latter.

Allow Github Pages

To make a website deployed on Github accessible, simply go to the Github repository Settings and the Pages tab. From there, various options allow you to select how to make the website available online.

Other services

Other services of this type exist, often more complete and allowing, for example, the hosting of websites coded in NodeJS on the server side. These include Vercel and Netlify, but these services rely often themselves on Github to deploy the code.