Comment faire pour utiliser Dropbox et héberger gratuitement un site Web

Dropbox est, comme vous l’aurez compris depuis de nombreuses lectures sur ce blog, mon outil de sauvegarde préféré que j’utilise régulièrement afin de synchroniser des fichiers entre plusieurs ordinateurs. Outre la synchronisation des fichiers et des dossiers, il peut y avoir beaucoup de moyens plus créatifs dans lesquels vous pouvez utiliser votre Dropbox.

Vous pouvez l’utiliser pour synchroniser votre fichier outlook.pst contenant les données de vos messages, de vos rendez-vous, de vos tâches, et de vos entrées de journal entre plusieurs ordinateurs. Vous pouvez également de nouveau utiliser Dropbox pour synchroniser votre todo list vous permettant d’y accéder de n’importe où et quand vous voulez (sur votre téléphone par exemple…).

Outre le fait, de pouvoir utiliser des systèmes existants comme Droppages, nous allons voir dans cet article comment tirer partie de votre Dropbox pour créer et héberger gratuitement un site Web statique.

Dropbox possède une fonctionnalité intéressante qui vous permet de lier un fichier ou un dossier conservé dans le répertoire « Public » de votre compte Dropbox à l’aide d’une URL courte. Toute personne, qui connait l’URL du fichier lié peut l’ouvrir à partir d’un navigateur ou le télécharger. Vous pouvez donc utiliser cette fonction pour héberger un site Web statique dans votre compte Dropbox gratuitement.

Créer un site Web statique gratuit avec Dropbox

Voici les différentes étapes pour créer votre propre site Web statique gratuit.

  • 1 – Commencez par télécharger et installer Dropbox sur votre ordinateur et de garder le client Dropbox en cours d’exécution sur votre système
  • 2 - Téléchargez un modèle HTML gratuit vous aidant à créer le design de votre site Web statique. Vous pouvez trouver une grande collection de modèles HTML gratuit ici
  • Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Choix d'un template

  • 3 - Extraire l’archive du modèle téléchargé et vous obtiendrez un dossier contenant des fichiers : un fichier HTML (index.html), un dossier d’images et un fichier CSS (default.css). Gardez la structure de ce dossier intact et ouvrez le fichier index.html dans un éditeur HTML, ou même un bloc-notes
  • Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Listing du template

  • 4 - Modifiez le contenu de la page, et ouvrez là avec votre navigateur pour en visualiser le résultat. Vous pouvez dupliquer le fichier index.html dans le même dossier, le renommer et ainsi créer plusieurs pages de votre site Web
  • Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Ajout des pages pour le site

  • 5 - Pour personnaliser votre site vous pouvez rajouter des liens hypertextes, ajouter des images et des graphiques en plaçant ceux-ci dans le dossier « images » de votre modèle et en insérant l’image avec éditeur directement dans votre page. Enfin pour ajouter des vidéos Youtube, récupérer le code embed de la page vidéo et l’ajouter dans le code source du template de votre site Web.
  • Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Ajout du code Youtube

  • 6 - Une fois que la réalisation de votre site Web est terminée, ouvrez le dossier « Public » de votre Dropbox
  • 7 - Collez le dossier de votre template dans ce dossier « Public ». Vous pouvez renommer le dossier si vous le souhaitez (par exemple Mon_Projet_Web)
  • 8 - Votre client Dropbox va automatiquement scanner votre dossier Dropbox local pour ajouter les nouveaux fichiers à votre compte
  • 9 - Une fois que tous les fichiers sont téléchargés, connectez-vous à votre compte Dropbox et naviguez jusqu’au dossier du site Web, comme illustré ci-dessous
  • Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Dossier du site Web de votre Dropbox

  • 10 - Maintenant, copiez l’adresse URL du fichier index.html conservée dans le dossier site Web et vous avez terminé
  • Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Lien Dropbox de la page d'accueil du site

Félicitation, votre site est maintenant en ligne sur le Web et vous pouvez le partager avec tous vos amis en leur envoyant le lien où est hébergé votre site Web. Une bonne idée serait de raccourcir les URL en utilisant l’un des service de raccourcisseur d’URL afin que l’URL soit plus facilement mémorisable. Je vous conseille ToUrl, un service gratuit et simple d’utilisation.

Ainsi mon URL, http://dl.dropbox.com/u/14357413/mon_site_dropbox_test/index.html, donné par Dropbox se résume à : http://tourl.fr/apnm. Beaucoup plus simple non ?

Comment faire pour utiliser Dropbox et héberger gratuitement un site Web - Site Web depuis Dropxbox

Modification de votre site web hébergé dans Dropbox

Si vous souhaitez modifier votre site qui est hébergé sur votre Dropbox, il vous suffit d’ouvrir tous les fichiers se trouvant dedans (pour rappel « Dropbox > Public > VotreSite »), puis dans un éditeur HTML modifier les fichiers que vous voulez. Une fois que vous aurez terminé tous vos changements, enregistrez les et c’est fini ! Votre client Dropbox va automatiquement apporter les modifications à tous les fichiers dans le même emplacement et les changements seront donc visibles directement sur votre site Web hébergé.

Vous pouvez utiliser cette astuce pour héberger plusieurs sites Web avec votre compte Dropbox, pour cela il suffit d’utiliser un dossier unique pour un nouveau site Web. Le plan libre de Dropbox permet à quiconque d’utiliser jusqu’à 2 Go d’espace libre qui est plus que suffisant même si vous avez quelques centaines de pages sur votre site Web.

Conclusion

La question que vous devez certainement vous poser : est-il légal d’utiliser Dropbox afin d’héberger votre site Web ? Dropbox propose aux utilisateurs d’héberger un site Web rapide avec Dropbox, il n’y aura donc aucun problème, sauf si vous abusez de cet hébergement avec des sites contenant des données sous copyright ou proposant des sites illégaux.

Au final, pour héberger un simple site sans vouloir payer un hébergeur et se prendre la tête pour la configuration cette solution peut vous être vraiment utile. Personnellement je la recommande à toute personne souhaitant rapidement mettre un site Web statique, notamment lors de votre cursus universitaire !

Que pensez-vous de cette solution ? Est-ce fiable et viable ? Si vous en avez une expérience n’hésitez pas à nous en faire part.

  • Simon

    ok j’arrive a avoir un site mais le site ne semble pas faire le lien avec le fichier d’image puisque les images ne se charge pas…que dois-je faire ?

    • http://www.blog-nouvelles-technologies.fr Yohann Poiron

      As-tu bien mis le lien vers tes images ? Est-il possible d’avoir le lien vers ton site ?

  • Pingback: Web development | Pearltrees()