Créer un site statique sur Azure

Site statique ou dynamique ?

Aujourd’hui la plupart des sites internet sont dynamiques. C’est-à-dire que le contenu de la page affichée est construit à la volée en utilisant du code ainsi qu’une base de données. C’est le cas par exemple d’un site fonctionnant sous WordPress, vous n’avez pas une page pour chaque article mais chaque article est construit grâce à une trame identique puis le contenu spécifique est chargé depuis une base de données.

Contrairement aux sites dynamiques, un site statique n’utilise pas de base de données et le contenu ne varie pas en fonction des caractéristiques de la demande, c’est-à-dire que tous les visiteurs reçoivent la même page composée du même contenu.

Sur Azure, il est très facile de créer un site statique en utilisant un Storage Account. C’est l’objectif de cet article. 🙂

Création d’un site statique dans Azure

Si ce n’est pas déjà fait, commencez par créer votre Storage Account. Pour ma part, j’ai choisi la configuration suivante :

  • Performance: Standard
  • Account kind: StorageV2 (general purpose v2)
  • Replication: LRS
  • Access tier (default): Hot

Et une fois que vous avez fait ça… vous avez fait le plus dur ! 🙂

Dans la partie gauche, rendez-vous dans Static website et activez l’option. Une container sera créé automatiquement avec le nom $web. Vous pouvez également préciser quelle sera la page d’accueil par défaut (index.html) ainsi que la page par défaut pour les erreurs 404 (404.html).

Vous avez également désormais l’adresse publique complète de votre nouveau site. Vous verrez que pour l’instant le contenu de la page n’est pas passionnant…

Uploader vos pages web

Rendez-vous dans Overview dans votre Storage Account. Cliquez sur Blobs puis entrez dans votre container $web. Il ne vous reste plus qu’à créer des pages web et publier votre contenu.

Je vous propose de créer 2 pages de tests : index.html et 404.html avec le contenu suivant :

<!DOCTYPE html>
<html>
  <head>
    <title>Home page</title>
  </head>
  <body>
  <h1>Hello world</h1>
  <p>Bienvenue ceci est ma page de test</p>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Error Page 404</title>
  </head>
  <body>
  <h1>Vous vous êtes perdu !</h1>
  <p>Cette page apparaît lorsque vous entrez une URL qui n'existe pas !</p>
  </body>
</html>

Il ne vous reste plus qu’à cliquer sur Upload pour envoyer vos 2 pages web dans votre Storage Account.

Et si vous ajoutez un fichier image à la racine à côté de vos 2 pages web ainsi qu’une ligne en plus dans le code de votre page index.html :

<p><img src="logo.png"></p>

Vous aurez alors une page qui ressemble à ça :

Comme vous le voyez même si je ne spécifie pas la page index.html dans l’URL c’est bien celle-ci qui est affichée par défaut. Et si vous mettez une adresse vers une page qui n’existe pas. Vous verrez que par défaut c’est la page 404.html qui va se s’afficher.

Pour le reste, c’est à vous de continuer en créant d’autres pages, des liens, intégrant des images ou tout autre contenu que vous souhaiteriez ! 🙂

Pour envoyer/télécharger les fichiers de votre site Internet, vous pouvez utiliser l’interface web d’Azure mais aussi l’application Azure Storage Explorer. L’application est gratuite et vous pouvez la télécharger en vous rendant à cette adresse.

Personnaliser l’URL

Pour que ça soit parfait, il nous reste un réglage à voir… comment personnaliser l’adresse que vos utilisateurs utiliserons pour accéder à votre site. Puisqu’en effet pour l’instant il s’agit d’une adresse par défaut.

Pour ce faire, toujours dans votre Storage Account, cliquez à gauche sur Custom domain. Indiquez simplement l’URL que vous souhaitez utiliser. Pour que ça marche, vous devrez enregistrer une entrée de type CNAME au niveau de vos DNS.

Une bonne alternative à Azure Web App si vous site n’est donc pas dynamique et ne nécessite pas de bases de données ! 🙂

Tags:,