La page d'accueil du développement personnel est Cloudflare + GitHub. Comment créer un site statique mis à jour avec l'IA et le coût

Si vous créez vous-même une application, en plus de développer l'application elle-même, vous aurez également besoin d'une page d'accueil pour présenter votre entreprise et fournir une assistance.

SANGE Studio a également besoin d'un site internet afin de préparer l'obtention d'un numéro D-U-N-S et de préparer une page d'introduction à l'application. Je souhaite créer une configuration qui coûte le moins d'argent possible et prend moins de temps pour la gestion quotidienne. L'option consiste à publier un site statique avec Cloudflare et à gérer les fichiers avec GitHub.

Lors de la mise à jour d'un article, l'IA aide à créer et à modifier le code HTML, et les humains vérifient le contenu et l'affichent avant de le publier. Nous pensons que cette configuration est suffisante dans de nombreuses situations pour les sites professionnels personnels.

Dans cet article, nous expliquerons les raisons d’en choisir un, la procédure de publication et le coût. Les prix et spécifications sont des informations en date du 27 octobre 2026.

1. Préparez le site après avoir obtenu le numéro D-U-N-S et introduit l'application.

Un numéro D-U-N-S est un numéro à 9 chiffres qui identifie une entreprise ou une entité commerciale. En règle générale, vous aurez besoin de ce numéro lors de la création d'un compte organisationnel Google Play.

En plus du numéro D-U-N-S, Google Play requiert également un « site Web d'organisation » comme informations d'inscription pour un compte d'organisation. [1]

C'est là qu'il est facile de se tromper. C'est une chose queGoogle Play exige un site Web ; c'est une autre chose qu'un site Web soit uniformément requis pour toutes les demandes de numéro D-U-N-S. Pour obtenir les informations dont vous avez besoin pour demander un numéro D-U-N-S, veuillez consulter les instructions du guichet que vous utilisez.

Dans tous les cas, une page expliquant la réalité de votre entreprise et une page de présentation/support de l’application seront utiles pour les opérations ultérieures. Vous pouvez commencer petit en préparant le contenu suivant :

Cela ne signifie pas que le simple fait de préparer un site réussira l'examen. Il est important que les informations que vous publiez soient cohérentes avec les détails réels de l'entreprise et de l'application.

2. Les sites statiques sont une bonne option si vous souhaitez réduire les coûts et les efforts de gestion.

Pour avoir une page d'accueil, vous n'avez pas nécessairement besoin de louer un serveur ou d'installer WordPress.

Cloudflare Pages est un service qui vous permet de publier du HTML, des images, etc. Il est disponible dans le forfait gratuit et peut également être publié en utilisant l'URL fournie par le service : ○○.pages.dev. [2]

GitHub sera utilisé comme endroit pour gérer les fichiers de votre site et l'historique des modifications. Vous pouvez vérifier quand et où quelque chose a été réparé, et s'il y a un problème, vous pouvez laisser des indices pour revenir à l'état précédent.

L'organisation des rôles ressemble à ceci :

Cloudflare n'est pas le seul service le moins cher du marché. Il existe également des services disponibles gratuitement. De plus, c’est une option qui convient à votre objectif de démarrer un site d’introduction au développement personnel à faible coût.

1. IA + HumainCréation et vérification d'articles/HTML
2. GitHubGérer les fichiers et l'historique des modifications
3. Actions GitHubPublication des modifications approuvées
4. Pages CloudflareDistribuez du HTML et des images aux lecteurs

Géré sur GitHub et publié sur Actions. Cloudflare Pages fournit des pages aux lecteurs.

3. Différence entre l'hébergement statique et le CMS

L'hébergement statique est un système qui fournit du code HTML et des images pré-créés aux spectateurs tels quels.

Un CMS est un système qui facilite la gestion et la mise à jour des articles et des images. WordPress est un exemple typique. Vous pouvez rédiger des articles et définir la date et l'heure de publication depuis l'écran de gestion.

À proprement parler, les deux ne sont pas des antonymes. Il existe également une configuration qui gère les articles avec un CMS et délivre les pages complétées sous forme de site statique. Pour faciliter la compréhension, nous comparerons ici une configuration où le HTML est géré sur GitHub et une configuration où vous installez et exploitez vous-même WordPress général.

HTML est un fichier qui décrit la structure d'une page. Traditionnellement, toucher au code à chaque fois que vous ajoutiez un article était une partie fastidieuse des sites statiques. Si l’IA vous aide dans cette tâche, il sera plus facile de choisir.

4. Compte tenu de la réponse aux vulnérabilités et de l’évolution de l’IA, nous souhaitons réduire la taille du mécanisme de divulgation.

La publication d'un site Web n'est pas la fin. Si une vulnérabilité est détectée dans le logiciel que vous utilisez, vous devrez la mettre à jour ou la vérifier. La documentation officielle de WordPress explique également comment mettre à jour l'unité principale, les plugins, etc., et gérer les autorisations et l'authentification. [3]

En développement personnel, le temps disponible pour l’entretien est limité. Si l'accent est mis sur les présentations d'entreprises et d'applications, je voulais réduire le besoin d'utiliser les programmes et les bases de données qui s'exécutent lors de la navigation, ainsi que l'écran de connexion pour éditer des articles ouverts au public.

En vous concentrant sur la distribution de fichiers purement statiques, vous pouvez réduire le nombre de points d'entrée pour les attaques ciblant ces zones. Cependant, même les sites statiques peuvent être endommagés si des comptes GitHub ou Cloudflare sont piratés ou si du JavaScript malveillant est mélangé. La sécurité est déterminée à la fois par la configuration et par le fonctionnement.

La raison pour laquelle je souhaite choisir un site statique n’est pas parce que toutes les vulnérabilités de nos jours sont causées par les CMS. En effet, il y a moins de choses à gérer pour les fonctionnalités dont vous avez besoin.

De plus, l’IA peut désormais aider à la création de HTML et CSS, réduisant ainsi la charge de l’édition directe des fichiers. Cela simplifie la configuration de la sécurité et réduit les efforts requis pour les mises à jour. Cette combinaison est attractive à une échelle personnelle.

5. Les articles sont convertis en HTML à l'aide de l'IA, vérifiés par des humains, puis publiés.

Le flux de mise à jour attendu comprend les six étapes suivantes.

1. Organisez le thème de l'article, le contenu que vous souhaitez transmettre et l'expérience.
2. Demandez à AI de créer une page d'article qui correspond au design existant.
3. Enregistrez la modification proposée sur GitHub.
4. Les humains vérifient le texte, les preuves, l’affichage à l’écran et les modifications.
5. Incorporez les modifications confirmées dans la branche main pour publication.
6. Les actions GitHub sont publiées sur les pages Cloudflare.

Le mécanisme de vérification des modifications proposées sur GitHub est appelé « pull request » et l'opération d'incorporation des modifications confirmées est appelée « fusion ». Même si vous l'exécutez seul, vous pouvez mettre en place une étape de vérification entre la création et la publication.

Par exemple, les requêtes adressées à AI peuvent être spécifiées comme suit.

Veuillez convertir ce manuscrit en HTML en utilisant la page d'article existante comme référence. Organisez vos titres, tableaux et liens de référence pour les rendre faciles à lire sur les smartphones. Veuillez également mettre à jour la liste des articles et le plan du site. Veuillez ne pas ajouter d'expériences ou de chiffres qui ne figurent pas dans le manuscrit et signaler toute déclaration qui nécessite une confirmation.

Avant la publication, nous vérifions l'exactitude du texte, son affichage sur les smartphones, les destinations des liens, les droits à l'image et si des informations personnelles ou confidentielles sont mélangées. Les avis de l'IA peuvent également être utilisés pour nous aider, mais le simple fait que les IA se vérifient mutuellement ne garantit pas l'exactitude.

Si vous avez plus d'articles, vous pouvez passer à la rédaction du corps du texte dans Markdown et à la génération de HTML. Je pense qu'il est préférable de ne pas créer un gros système dès le début et de simplement l'introduire lorsque les mises à jour deviennent un fardeau.

1. 1. Préparez le manuscritOrganisez le contenu que vous souhaitez transmettre
2. 2. Convertir en HTML avec l'IAAdapter au design existant
3. 3. Confirmation humaineVérifier le texte, les preuves et l'affichage
4. 4. Reflété dans lesActions principales publiées sur Pages

Entre la création par l’IA et la publication, il y aura une étape où les humains vérifieront le contenu et l’afficheront.

6. Ajoutez des services si vous avez besoin de fonctions de réservation ou d'édition de publication.

Pour les sites statiques, le simple fait d'écrire une date future dans le code HTML ne réserve pas le site à la publication. Si vous téléchargez un fichier, vous pourrez peut-être le visualiser à partir de l'URL même s'il n'est pas répertorié dans la liste des articles.

Si une publication planifiée devient nécessaire, envisagez un CMS sans interface capable de gérer la date et l'heure de publication, ou un service prenant en charge le déploiement planifié. Un CMS headless est un CMS qui fournit des fonctions de gestion d'articles et peut être utilisé séparément de l'apparence et de la distribution des pages.

Dans ce cas, vous ne devez pas inclure l'article dans le fichier de publication avant la date et l'heure spécifiées et le combiner avec le processus de publication à l'heure spécifiée. Assurez-vous également que les manuscrits privés ne sont pas exposés dans des aperçus ou des référentiels publics.

Il existe également un moyen de configurer l'exécution régulière des actions GitHub, mais l'exécution peut être retardée, elle ne convient donc pas aux applications qui nécessitent des garanties de temps strictes. [8]

Si plusieurs personnes doivent quotidiennement modifier, approuver, gérer des images et planifier leur publication, un CMS sera d’une grande valeur. Nous prévoyons de revoir la configuration lorsque les fonctions d'édition nécessaires augmenteront.

7. De l'inscription à Cloudflare à la publication de pages Web

Ici, nous allons vous montrer comment publier à partir de GitHub Actions à l'aide du « téléchargement direct » de Cloudflare Pages. Le responsable Cloudflare fournit également des instructions pour cette combinaison. [4]

Cloudflare propose également une option de distribution statique appelée Workers Static Assets, mais les paramètres et commandes de cet article concernent les pages. Le nom d'écran peut changer, veuillez donc vérifier le nom et les paramètres du service avant de continuer.

Étape 1 : Créer des comptes Cloudflare et GitHub

Créez un compte avec Cloudflare et GitHub et effectuez la vérification des e-mails. Configurez l’authentification multifacteur sur les deux.

Vous pouvez commencer avec le forfait gratuit. Même si vous disposez d'un domaine d'origine existant, vous pouvez commencer à vérifier la publication à partir de l'URL fournie par Pages.

Étape 2 : Obtenez votre propre domaine

Un domaine personnalisé est un nom sur le Web que vous acquérez et continuez à utiliser, tel que example.com. Il s'agit d'un contrat distinct de Cloudflare Pages, qui stocke les fichiers de votre site. L'acquisition de votre propre domaine coûte de l'argent et vous devrez payer des frais de renouvellement pour continuer à l'utiliser après l'avoir acquis. Vous pouvez le publier avec le pages.dev gratuit, mais si vous souhaitez continuer à l'utiliser comme site professionnel, il sera plus facile de vous guider si vous préparez un domaine unique qui correspond au nom de votre entreprise. Si vous l’avez déjà, vous n’avez pas besoin d’en acheter un nouveau.

Les sources incluent Cloudflare Registrar et d'autres services d'enregistrement de domaine. Si vous souhaitez les gérer tous en même temps avec Cloudflare, vous pouvez les obtenir en suivant la procédure suivante. [11]

1. Connectez-vous à Cloudflare et ouvrez « Enregistrer les domaines » sous « Enregistrement de domaine ».
2. Recherchez le nom de domaine souhaité et voyez quelles options sont disponibles. Choisissez un nom proche du nom de votre entreprise, court et facile à saisir.
3. Vérifiez les frais d’acquisition, les années de contrat et la prochaine date de renouvellement. Nous comparons non seulement le prix bas de la première année, mais également les frais de renouvellement, les taxes et les devises de paiement.
4. Entrez le nom, l'adresse, le numéro de téléphone et l'adresse e-mail du participant avec précision et enregistrez le mode de paiement. Les informations du titulaire de Cloudflare doivent être saisies en caractères ASCII, saisissez donc les noms et adresses japonais en caractères romains, etc.
5. Vérifiez les conditions et le montant du paiement et confirmez votre achat.
6. Vérifiez votre e-mail de confirmation d'inscription et complétez la vérification de l'adresse e-mail demandée. Vérifiez également vos paramètres de renouvellement automatique et la date d'expiration de votre mode de paiement.

Les domaines acquis avec Cloudflare Registrar utilisent les serveurs de noms de Cloudflare. Ce n'est pas un service qui vous permet de basculer librement vers le serveur de noms DNS d'une autre entreprise après l'avoir acquis. De plus, si le domaine souhaité n'est pas disponible, obtenez-le auprès d'un service tiers compatible. [11]

Votre page Web ne sera pas affichée simplement en acquérant un domaine. Après cela, publiez votre site sur Pages et connectez-le à votre propre domaine à l'étape 8. Même si vous avez acquis votre domaine auprès d'une autre société, vous pouvez l'utiliser conjointement avec Pages sans avoir à transférer l'enregistrement de votre domaine vers Cloudflare.

Un abonnement à un domaine n'inclut pas nécessairement les boîtes aux lettres pour ce domaine. Si vous souhaitez envoyer et recevoir des e-mails via info@example.com, etc., envisagez un service de messagerie distinct.

Étape 3 : Créer un référentiel sur GitHub

Un référentiel est un référentiel pour les fichiers de votre site et l'historique des modifications. Créez-le à partir du « Nouveau référentiel » de GitHub avec le nom, par exemple, sange-studio-web.

Si vous traitez des manuscrits privés, sélectionner Privé facilitera la gestion. Cependant, même dans un référentiel privé, les fichiers placés dans le dossier public seront livrés sur le site.

Placez uniquement les fichiers que vous souhaitez rendre publics dans le dossier public. Par exemple, public/index.html est la page d'accueil, public/apps/index.html est la liste des applications et public/privacy/index.html est la politique de confidentialité. Cela vous permet de réduire la plage dans laquelle les manuscrits et les fichiers de configuration sont distribués par erreur sur le site.

Vous pouvez commencer avec simplement public/index.html. Demandez à AI de créer une page d’introduction à l’entreprise et de vérifier l’affichage sur votre navigateur.

Étape 4 : Créer un projet Cloudflare Pages

Sur l'écran d'administration de Cloudflare, accédez à « Travailleurs et pages » pour créer une application, puis sélectionnez Téléchargement de fichiers (téléchargement direct) pour les pages. Choisissez un nom de projet et téléchargez le contenu du dossier public pour le publier pour la première fois. [5]

Accédez au https://project name.pages.dev qui s'affiche à ce stade et vérifiez la page d'accueil. Le nom du projet et l'ID de compte seront utilisés dans les paramètres ultérieurs.

Les projets créés à l’aide de Direct Upload ne peuvent pas être basculés ultérieurement vers le type lié à Git. Si vous souhaitez changer, vous devrez créer un nouveau projet. [5]

Étape 5 : Créer un jeton d'API public

Les jetons API sont des informations d'identification pour la publication de GitHub Actions vers Cloudflare.

Créez un jeton personnalisé à partir de l'écran Jetons de l'API Cloudflare et définissez les autorisations sur « Compte → Pages Cloudflare → Modifier ». Affinez vos comptes cibles à ceux dont vous avez besoin. [4]

Les jetons que vous créez ne sont pas écrits directement dans des fichiers HTML ou GitHub.

Étape 6 : Enregistrez les informations d'authentification dans GitHub Secrets

Dans le référentiel GitHub, ouvrez « Paramètres → Secrets et variables → Actions » et ajoutez les deux suivants en tant que secrets du référentiel.

Les secrets sont une fonction qui stocke les informations d'authentification utilisées dans les processus de publication. [4]

Étape 7 : Ajouter des paramètres de visibilité pour les actions GitHub

Créez .github/workflows/deploy.yml dans votre référentiel et enregistrez le contenu suivant : Remplacez your-pages-project par le nom de votre projet Pages.

name: Deploy website

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read

concurrency:
  group: production-website
  cancel-in-progress: false

jobs:
  deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Checkout
        uses: actions/checkout@v6

      - name: Check entry page
        run: test -f public/index.html

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v4
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy public --project-name=your-pages-project --branch=main

Sur la base de l'exemple officiel, nous avons une configuration minimale qui n'est exposée que lorsque main est mis à jour. [4] Il n'y a pas de processus de génération HTML, donc aucun paramètre de construction n'est requis. Dans cet exemple, la vérification vise uniquement à confirmer l'existence de la page d'accueil, un examen du contenu et de l'affichage sera donc effectué séparément.

Veuillez également vous assurer que la branche de production côté Pages est main pour la première fois. Après avoir reflété le fichier de configuration dans main, vérifiez le résultat de l'exécution dans les « Actions » de GitHub et ouvrez le site après succès.

Ce qui précède est une spécification de balise de version qui donne la priorité à la lisibilité. Pour un fonctionnement continu, vous pouvez renforcer le contrôle du chemin public en épinglant l'action à un SHA de validation confirmé et en examinant les mises à jour.

Étape 8 : définissez le domaine d'origine acquis sur Pages

Ajoutez le domaine que vous souhaitez utiliser depuis "Domaines personnalisés → Configurer un domaine" dans le projet Pages. [6]

Les domaines acquis avec Cloudflare Registrar sont configurés pour utiliser le DNS de Cloudflare. Si vous utilisez un domaine racine, tel que example.com, acquis par une autre société, ajoutez le domaine à Cloudflare et remplacez-le par les serveurs de noms spécifiés dans l'écran d'administration de votre registraire. Si vous utilisez une messagerie existante, les enregistrements DNS tels que MX et TXT seront également conservés avant la modification.

Pour les sous-domaines comme www.example.com, vous pouvez également définir un CNAME dans un service DNS externe. Dans les deux cas, au lieu de simplement ajouter des enregistrements DNS, associez-les d'abord à des domaines personnalisés dans Pages. [6]

Après activation, vérifiez que vous pouvez ouvrir avec HTTPS et que les images, les liens et l'affichage du smartphone sont corrects. Si vous souhaitez faire de votre propre domaine une URL officielle, incluez également les URL canoniques et celles du plan du site.

Il existe également un moyen de commencer avec moins de paramètres.

Si vous n'avez pas besoin de contrôle de publication avec GitHub Actions, il est plus facile d'intégrer les référentiels GitHub directement avec Pages, ce qui nécessite moins de configuration. La configuration consiste à sélectionner importer le référentiel Git sur l'écran de création de pages, à définir la branche de production sur main, pas de framework, la commande de construction à exit 0 et la destination de sortie à public. [9]

Avec cette méthode, Cloudflare détecte les modifications apportées à GitHub et les publie, vous permettant ainsi d'éliminer le besoin de configurer des jetons et des actions d'API publiques. Il n'est pas nécessaire d'exécuter simultanément la méthode Actions et la publication automatique par méthode de lien direct.

1. Domaine uniqueExemple : example.com
2. Paramètres DNSSpécifier la destination de la connexion au domaine
3. Configurer les pagesAssocier à des domaines personnalisés
4. Afficher le siteVérifier la publication avec HTTPS

Obtenir un domaine et publier une page sont deux tâches différentes. Alignez les paramètres DNS et les associations côté Pages.

8. Combien ça coûte ?

Si vous possédez un petit site comme cet article qui distribue du HTML, du CSS et des images, vous pouvez commencer à héberger et à gérer des fichiers pour aussi peu que 0 yen par mois.

Cloudflare indique que le nombre de requêtes et la bande passante pour les Pages sont illimités, mais il existe des restrictions telles que le nombre de fichiers et les conditions d'utilisation. Le plan gratuit autorise 500 builds liés à Git par mois et un maximum de 20 000 fichiers. Lors du traitement et du téléchargement direct avec les actions GitHub, faites la distinction entre le cadre de construction côté Cloudflare et le cadre d'exécution côté GitHub. [2][7]

GitHub Actions peut s'exécuter gratuitement sur le programme d'exécution standard hébergé par GitHub pour les référentiels publics. Veillez à ne pas dépasser le niveau gratuit dans les référentiels privés. Les grands patins et la capacité de stockage sont d'autres exigences. [10]

Par exemple, si vous exécutez un processus de publication de 3 minutes chacun sur un référentiel privé 30 fois par mois, la durée totale est de 90 minutes. Si vous n'utilisez pas le quota à d'autres fins et que votre capacité de stockage respecte le quota, vous pouvez utiliser 2 000 minutes par mois.

Si vous possédez déjà votre propre domaine, il n'y a aucun frais pour acquérir un nouveau domaine lors de l'ajout d'un site. Cependant, les frais de renouvellement pour les domaines existants continueront de s'appliquer. Ne jugez pas seulement le prix de votre propre domaine en fonction de la remise de la première année ; vérifiez également le prix de renouvellement.

Veuillez noter que le coût de l'ajout d'API, de bases de données, de fonctions Pages, etc. n'est pas inclus dans cette estimation statique du site.

Pour un développement personnel, choisissez une configuration qui vous permet de continuer à fonctionner.

Présentation commerciale, présentation d'application, support, blog mis à jour par un petit nombre de personnes. À ces fins, exécuter un site statique avec Cloudflare et GitHub est une option intéressante.

L'IA aide à créer et à modifier des pages, et les humains examinent et approuvent le contenu, qui est ensuite automatiquement publié. Lorsque les fonctions d'édition nécessaires augmentent, ajoutez un CMS ou des services externes à ce stade.

Pour une opération à échelle personnelle comme SANGE Studio, nous souhaitons choisir une configuration qui nous permet de continuer à fournir des informations commerciales tout en garantissant du temps pour le développement d'applications.

Documents de référence

1. Informations requises pour créer un compte Google Play Console
2. Informations sur le produit Cloudflare Pages
3. Officiel WordPress : Renforcement de WordPress
4. Officiel Cloudflare : téléchargement direct et intégration CI
5. Officiel Cloudflare : téléchargement direct
6. Officiel Cloudflare : domaines personnalisés
7. Limites des pages Cloudflare
8. Officiel GitHub : planifier un événement
9. Officiel Cloudflare : HTML statique
10. Tarifs GitHub Actions et niveau gratuit
11. Officiel Cloudflare : Enregistrez un nouveau domaine