Comment créer un site Web statique et personnel pour moins de 1 $ par mois

Le but de cet article est de vous montrer comment créer votre propre site Web personnel statique pour moins de 1 $ par mois. Je sais, vous pensez probablement : "Est-ce que je viens de lire, n'est-ce pas ?". Tu l'as fait! Bien sûr, il y a des mises en garde pour atteindre cet objectif, mais au début du parcours de votre site Web, l'hébergement de votre propre site Web statique ne devrait coûter que 0,01 $ par mois. Le public cible de cet article est toute personne ayant une certaine expérience de JavaScript et une compréhension générale du développement Web. Si vous n’avez pas cette expérience, ne vous inquiétez pas ! Je ferai de mon mieux pour expliquer les idées et les concepts contenus dans cet article afin que tout le monde puisse suivre !

Avant de commencer, définissons quelques définitions pour nous aider à comprendre les différents termes que nous utiliserons pour créer notre premier site. N'hésitez pas à vous référer à ces définitions au fur et à mesure du processus d'ajout de notre site à Google Cloud :

• Domaine du site Web : une adresse utilisée pour identifier un site Web sur Internet, comme yelp.com
• Fournisseur d'enregistrement de domaine : un fournisseur de domaines, où vous pouvez acheter un domaine personnalisé
• Site Web statique : un site Web créé avec un nombre fixe de toute combinaison de fichiers HTML, CSS et JavaScript
• Next.js : un framework React.js qui prend en charge le rendu côté serveur et la génération de sites statiques
• Objet de stockage : une entité utilisée pour le stockage, pensez aux photos ou aux vidéos ou à tout autre type de fichier.
• Google Cloud : une plateforme de cloud computing proposant de nombreux services, on se préoccupe du stockage
• Google Cloud Storage : le service de stockage d'objets de Google Cloud, nous l'utiliserons pour stocker les fichiers statiques de notre site Web.
• Bucket (Google Cloud Storage) : un conteneur qui contient les fichiers de votre site Web

Cet article suppose que le lecteur possède des connaissances de base en matière de développement et de programmation de sites Web. Je suppose que chaque lecteur possède les éléments suivants :

• Une compréhension de base du développement de sites Web - Introduction au développement Web (freecodecamp.org)
• Expérience avec NPM
• Connaissance débutante de React.js et Next.js
• Confort avec une CLI
• Un IDE installé sur votre ordinateur - VSCode est ce que j'utilise par exemple

J'ai tendance à mieux réfléchir en divisant un objectif en morceaux de travail progressifs. Encadrons nos tâches de cette façon lorsque nous créons notre site Web :

1. Installation
2. Code de démarrage pour notre site
3. Configuration d'un bucket pour notre site
4. Prochaines étapes 😎

Installation

Si vous souhaitez créer votre propre site Web personnel, vous aurez besoin d'un domaine pour commencer. Même si nous ne l'utiliserons pas au départ, cela vaut la peine de le faire maintenant afin que nous puissions utiliser le domaine personnalisé dans un article ultérieur . Pour moi, mon domaine était afro-cloud.com , mais vous pouvez vraiment choisir ce qui vous vient à l'esprit tant qu'un fournisseur d'enregistrement dispose du domaine. Il existe un certain nombre de fournisseurs d'enregistrement de domaine que vous pouvez utiliser, j'ai personnellement utilisé GoDaddy, mais voici un sous-ensemble d'options disponibles (je ne suis affilié à aucun de ces services) :

• Allez papa
• hôte bleu
• Espace carré

Maintenant que nous avons configuré notre domaine, créons un compte Google Cloud et activons la facturation.

1. Accédez à Google Cloud Console
2. Utilisez un compte Google existant ou créez-en un nouveau pour accéder à la console (cela est obligatoire pour utiliser Google Cloud)
3. Créez un nouveau projet en cliquant sur le menu déroulant de sélection de projet dans la barre supérieure de l'écran.
4. Accédez à "Facturation"
5. Créez un nouveau compte de facturation en suivant les instructions fournies par Google Cloud

Super! Désormais, la facturation étant activée, nous pouvons commencer à utiliser les services Google Cloud. Nous sommes tous prêts avec cet onglet pour le moment, mais nous reviendrons sur cette page plus tard dans l'article, alors gardez-la à portée de main.

Code de démarrage pour notre site

Si vous rencontrez des difficultés pour suivre les étapes décrites dans cet article, veuillez nous contacter et je ferai de mon mieux pour vous aider à déboguer le problème. Ok, une fois cela réglé, continuons. Nous utiliserons Next.js par opposition aux autres frameworks React.js (ou simplement React) en raison de leur prise en charge de l'exportation statique. Il existe un certain nombre d'options de déploiement différentes pour héberger une application React.js, mais j'ai choisi de partager l'approche Google Cloud Storage et Next.js en raison des avantages du référencement et des économies de coûts. Avec les exportations statiques Next.js, lorsqu'une version de production est réalisée, un fichier HTML est créé par route, ainsi que les ressources statiques (fichiers CSS et JS) qui correspondent au fichier HTML en morceaux distincts. Ceci est important car cela peut éviter de charger des bundles JavaScript inutiles pour la page consultée, ce qui signifie un chargement de page plus rapide. Tous les fichiers générés lors de l'exécution de "next build" seront exportés dans le dossier "out". Mais nous en reparlerons plus tard. Créons l'application.

Tout d’abord, installons un projet Next.js de démarrage sur notre machine. Heureusement, Next.js dispose d'un utilitaire « create-next-app », tout comme Create React App pour ceux qui l'ont utilisé. Pour lancer le workflow, nous pouvons exécuter la commande suivante :

npx create-next-app@latest

La commande nous guidera à travers quelques options de configuration pour notre projet (n'hésitez pas à choisir ce que vous voulez ; nous avons juste besoin de la génération de code). J'ai mis en gras les options que j'utiliserai pour cet article :

• Comment s’appelle votre projet ? mon-application
• Souhaitez-vous utiliser TypeScript ? Non Oui
• Souhaitez-vous utiliser ESLint ? Non Oui
• Souhaitez-vous utiliser Tailwind CSS ? Non Oui
• Souhaitez-vous utiliser le répertoire `src/` ? Non Oui
• Souhaitez-vous utiliser App Router ? (recommandé) Non / Oui
• Souhaitez-vous personnaliser l'alias d'importation par défaut (@/*) ? Non Oui

Bien, nous avons du code maintenant ! Vous remarquerez que notre dossier node_modules est rempli, nous avons donc installé toutes les dépendances dont nous avons besoin pour exécuter notre application. Dans la même fenêtre de terminal que vous avez utilisée pour créer le projet, exécutons la commande suivante : npm run dev . Cela lancera le workflow de développement Next.js afin que nous puissions visualiser notre application localement. Next.js fournira une URL pour afficher le projet sur votre ordinateur. Dans la plupart des cas, il s'agira de http://localhost:3000 , mais si une autre application Web est en cours d'exécution, elle peut sélectionner un autre port comme 3001. En cliquant sur le lien, vous devriez voir quelque chose comme ce qui suit :

Bon! Nous avons une application de démarrage opérationnelle ! Mais débarrassons-nous de la page de démarrage pour faire l'exemple plus classique de "Hello World". Mettez à jour le fichier src/app/page.tsx (ou page.jsx) pour qu'il contienne les éléments suivants :

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

Enregistrez le fichier, revenez à l'onglet du navigateur exécutant notre application et rechargez la page. Vous devriez voir « Hello World » sur votre écran ! Revenons maintenant au fonctionnement des exportations statiques. Nous devrons configurer notre fichier next.config pour activer la fonctionnalité. Mettez à jour la déclaration nextConfig comme suit :

const nextConfig = { output: "export", };

Cela demandera à Next.js pendant le processus de construction de créer des fichiers HTML individuels correspondant à chaque itinéraire au sein de notre application. Nous n'avons qu'une seule page pour le moment, ajoutons donc une autre page pour illustrer les avantages des exports statiques. Dans le répertoire app/, créez un nouveau répertoire appelé « test ». Dans le répertoire nouvellement créé, ajoutez un fichier page.tsx (ou page.jsx) et ajoutez le code suivant :

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

Maintenant que nous avons une page de test, ajoutons un lien vers celle-ci depuis notre page d'accueil. Ouvrez src/app/page.tsx (ou page.jsx) et mettez à jour le fichier pour qu'il ressemble à :

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

Enregistrez les fichiers nouvellement mis à jour, revenez à l'onglet du navigateur exécutant notre application et rechargez la page. Vous devriez voir un nouveau lien avec « Page de test ! » et en cliquant sur ce lien, le contenu à l'écran devrait changer pour afficher "Bonjour test !". Beau travail, nous avons maintenant deux itinéraires dans notre application. Voyons maintenant le résultat de la fonctionnalité d'exportation statique dont nous avons parlé. En revenant à la fenêtre de votre terminal, exécutez "npm run build". Cette commande exécutera la commande "next build" qui créera une version prête pour la production pour notre travail et stockera le résultat dans un répertoire appelé à la racine de notre projet. Si nous inspectons le répertoire out, nous devrions voir quelque chose comme ceci :

• _next : contient les éléments statiques dont nous avons besoin pour exécuter notre site, pensez à des morceaux de JavaScript et de CSS pour chaque page HTML (par exemple 404.html : est la page 404 par défaut que Next.js génère pour nous
• favicon.ico : l'icône du site pour notre site
• index.html : le fichier HTML de notre page racine (src/app/page.tsx ou page.jsx)
• index.txt : fichier contenant les mappages des ressources pour la page index.html
• test.html : le fichier HTML de notre page racine (src/app/test/page.tsx ou page.jsx)
• test.txt : fichier contenant les mappages des ressources de la page test.html

Excellent travail les gars. Passons maintenant à la vitesse supérieure pour télécharger notre code sur Google Cloud afin que nous puissions voir le site en direct.

Configuration d'un compartiment pour notre site

Maintenant que notre code est prêt, nous devons le télécharger sur Google Cloud Storage afin que Google Cloud puisse servir notre site sur Internet. Revenons à l'onglet Google Cloud.

Ouvrez le menu hamburger sur le côté gauche de l'écran et sélectionnez « Cloud Storage ». En haut de l'écran, vous devriez voir un bouton "CRÉER". Nous cliquerons sur ce qui lancera le workflow de création. Puisque nous n'utiliserons pas encore de domaine personnalisé, nommez le compartiment comme vous le souhaitez, mais soyez conscient de la restriction d'unicité. Pour moi, j'utiliserai "somerandombucket123". Nous utiliserons ensuite l'option multirégionale aux États-Unis (c'est là que j'écris cet article), mais n'hésitez pas à l'adapter à votre cas d'utilisation. Nous sélectionnerons ensuite l'option de classe standard par défaut qui doit être pré-remplie pour vous. L'option suivante consiste à déterminer si nous souhaitons ou non que notre compartiment soit accessible au public via Internet. Dans ce cas, puisque nous voulons servir ces fichiers à nos spectateurs, nous voudrons décocher la case « Appliquer la prévention de l'accès public sur ce compartiment » afin que tous les fichiers soient accessibles via Internet. Nous sélectionnerons le contrôle d'accès « Uniforme » et ne sélectionnerons pas les offres « Protection des données » pour maintenir les coûts à un niveau bas. Ensuite, nous cliquerons sur le bouton "Créer".

Maintenant que nous avons créé le compartiment, nous devrons ajouter une nouvelle autorisation afin que les utilisateurs puissent afficher nos fichiers de compartiment. Sélectionnez l'onglet "Autorisations" et cliquez sur le bouton "Accorder l'accès". Dans la zone "Nouveaux principaux", saisissez "allUsers" et sélectionnez le rôle sous "Cloud Storage" pour "Environment and Storage Object Viewer".

Une boîte de dialogue s'ouvrira nous demandant si nous voulons ou non rendre notre compartiment public, ce que nous faisons, alors sélectionnez « Autoriser l'accès public ». Sélectionnez donc « Autoriser l'accès public ». Désormais, les fichiers de ce compartiment seront accessibles au public. Revenez à la page de présentation en cliquant sur la flèche de retour de la page de détails de votre compartiment. Vous devriez voir votre bucket nouvellement créé avec les options de configuration que nous avons utilisées. Ensuite, nous devrons instruire le bucket de notre site Web et nous pouvons le faire en cliquant sur les trois points de la ligne du bucket nouvellement créé. Sélectionnez « Modifier la configuration du site Web » et vous devriez voir quelque chose comme ceci :

Pour l’entrée de la page d’index, tapez « index.html » et pour l’entrée de la page d’erreur, tapez « 404.html ». Vous remarquerez que ces fichiers correspondent à ceux de la sortie de construction de notre application Next.js, ce que nous voulons et que nous utiliserons sous peu. Terminez la modification en cliquant sur Enregistrer.

Nous devons maintenant télécharger nos fichiers contenus dans le répertoire out de notre code dans ce compartiment afin que notre site Web puisse être en ligne ! Nous pouvons le faire manuellement en accédant à la page de détails du compartiment pour notre compartiment et en sélectionnant chaque fichier ou dossier individuellement. Mais soyons programmatiques et écrivons du code pour ce faire. Revenez à votre IDE ou à l'endroit où vous effectuez des mises à jour de votre code et créons un nouveau fichier appelé upload.sh à la racine de notre projet. Ajoutez le contenu suivant :

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

Assurez-vous de remplacer « somerandombucket123 » par le nom de votre compartiment. Ne vous inquiétez pas trop de la sémantique du code ici. Essentiellement, ce que nous faisons est :

1. Suppression de toute version de production obsolète
2. Création d'une nouvelle version de production
3. Utiliser Google Cloud CLI pour télécharger le contenu de notre version de production dans notre bucket

Avant de pouvoir exécuter ce script, nous devrons télécharger Google Cloud CLI. Vous pouvez suivre les instructions ici . Après l'installation, vous devrez exécuter : gcloud auth login dans votre terminal. Cela nous autorisera à accéder à l'utilisation de Google Cloud CLI. Plus d'instructions et d'informations à ce sujet peuvent être trouvées dans leur documentation . Une fois que vous avez autorisé avec succès, ajoutons un nouveau script d'exécution à notre package.json. Ajoutez une nouvelle entrée de script dans l'objet "scripts" pour enregistrer notre script de téléchargement :

"upload": "sh upload.sh"

Ensuite, testons-le. Ouvrez à nouveau votre terminal et exécutez : "npm run upload". Cela exécutera notre script et vous devriez voir des résultats sur les téléchargements effectués dans votre compartiment. Si nous revenons sur la page Google Cloud Storage et ouvrons votre bucket, vous devriez voir les fichiers que nous venons de télécharger. Si vous accédez à : https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (où YOUR_BUCKET_NAME est le nom de votre compartiment), vous devriez voir le site. Mais vous remarquerez que le style Next.js par défaut a disparu et que le lien vers notre page de test est rompu. Des idées pourquoi ?

Si vous ouvrez la console de votre navigateur, vous devriez voir de nombreuses erreurs de ressources introuvables. En d’autres termes, le navigateur ne trouve pas les fichiers qu’il a été chargé de charger pour votre site. Si vous regardez attentivement, vous pouvez voir que l'URL de la ressource n'est pas tout à fait correcte, il manque le nom de notre bucket dans le chemin. Si nous avions utilisé un domaine personnalisé et configuré correctement le DNS, nous n'aurions pas rencontré ce problème. Mais pour les besoins de cet article, ajoutons du code supplémentaire pour corriger le routage. Ouvrez src/app/page.tsx (ou page.jsx) et mettez à jour le fichier pour qu'il ressemble à :

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

Assurez-vous de remplacer « somerandombucket123 » par le nom de votre bucket. Mettez ensuite à jour le fichier next.config pour qu'il ressemble à :

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

Encore une fois, assurez-vous de remplacer « somerandombucket123 » par le nom de votre bucket. Vous remarquerez dans l'extrait de code ci-dessus que nous avons ajouté une logique supplémentaire pour tenir compte du nom de notre bucket lorsque la variable d'environnement du nœud est production (définie par Next.js). Nous ajoutons un préfixe d'actif pour corriger les erreurs de ressource introuvable dans le fichier de configuration et prenons en compte l'erreur de routage dans notre page d'accueil en préfixant la route avec le nom de notre compartiment. Téléchargeons notre code maintenant et voyons s'il fonctionne. Encore une fois, lancez-vous : npm run upload. Revenez à votre site Web et rechargez la page. Comment avons-nous fait ? Le site devrait refléter ce que nous avons actuellement localement. Au début du processus, si nous devions créer le compartiment correspondant à notre nom de domaine, nous aurions des erreurs de ressources, mais nous aurions toujours le problème de routage client. Malheureusement, l'un des inconvénients de cette approche est le code supplémentaire nécessaire pour ajouter le suffixe .html aux routes pour le service de production.

Prochaines étapes 😎

Plus tard, j'aborderai l'ajout des enregistrements DNS et les modifications de configuration nécessaires à notre compartiment pour servir un domaine personnalisé, ainsi que la configuration de SSL pour notre site Web. J'espère que vous avez appris quelque chose aujourd'hui et qu'à l'avenir, je vous parlerai de quelques idées autour de :

• Utilisation de l'offre gratuite de Cloudflare pour les redirections de pages et SSL
• Configuration de Google Analytics et optimisation du référencement

Merci d'avoir lu et bravo !