La página de inicio de desarrollo personal es Cloudflare + GitHub. Cómo crear un sitio estático actualizado con IA y el costo

Si está creando una aplicación usted mismo, además de desarrollar la aplicación en sí, también necesitará una página de inicio para presentar su negocio y brindar soporte.

SANGE Studio también necesita un sitio web para prepararse para obtener un número D-U-N-S y preparar una página de introducción para la aplicación. Quiero crear una configuración que cueste la menor cantidad de dinero posible y requiera menos tiempo para la gestión diaria. La opción es publicar un sitio estático con Cloudflare y administrar los archivos con GitHub.

Al actualizar un artículo, la IA ayuda a crear y modificar el HTML, y los humanos verifican el contenido y lo muestran antes de publicarlo. Creemos que esta configuración es suficiente en muchas situaciones para sitios comerciales personales.

En este artículo te explicaremos los motivos para elegir uno, el procedimiento de publicación y el coste. Precios y especificaciones son información al 27 de octubre de 2026.

1. Prepare el sitio después de obtener el número D-U-N-S e introducir la aplicación.

Un número D-U-N-S es un número de 9 dígitos que identifica una empresa o entidad comercial. Como regla general, necesitará este número al crear una cuenta organizacional de Google Play.

Además del número D-U-N-S, Google Play también requiere un "sitio web de la organización" como información de registro para una cuenta de la organización. [1]

Aquí es donde es fácil confundirse. Una cosa es que Google Play requiera un sitio web; Otra cosa es que un sitio web sea requerido de manera uniforme para todas las aplicaciones de números D-U-N-S. Para obtener la información que necesita para solicitar un número D-U-N-S, consulte las instrucciones del contador que utiliza.

En cualquier caso, una página que explique la realidad de tu negocio y una página de introducción/soporte de la aplicación te serán útiles para operaciones posteriores. Puedes empezar poco a poco preparando los siguientes contenidos:

No significa que simplemente preparar un sitio aprobará el examen. Es importante que la información que publique sea coherente con los detalles reales de la empresa y la solicitud.

2. Los sitios estáticos son una buena opción si desea reducir costos y esfuerzo de gestión.

Para tener una página de inicio no es necesario contratar un servidor de alquiler ni instalar WordPress.

Cloudflare Pages es un servicio que le permite publicar HTML, imágenes, etc. Está disponible en el plan gratuito y también se puede publicar utilizando la URL proporcionada por el servicio: ○○.pages.dev. [2]

GitHub se utilizará como un lugar para administrar los archivos de su sitio y el historial de cambios. Puedes comprobar cuándo y dónde se solucionó algo, y si hay algún problema, puedes dejar pistas para volver al estado anterior.

La organización de los roles se ve así:

Cloudflare no es el único servicio más barato que existe. También hay servicios disponibles de forma gratuita. Además, es una opción que se adapta a su propósito de iniciar un sitio de introducción al desarrollo personal a bajo costo.

1. IA + HumanoCreación y comprobación de artículos/HTML
2. GitHubAdministrar archivos e historial de cambios
3. Acciones de GitHubPublicar cambios aprobados
4. Páginas de CloudflareDistribuir HTML e imágenes a los lectores

Gestionado en GitHub y publicado en Actions. Cloudflare Pages entrega páginas a los lectores.

3. Diferencia entre hosting estático y CMS

El alojamiento estático es un sistema que ofrece HTML e imágenes creados previamente a los espectadores tal como están.

Un CMS es un sistema que facilita la gestión y actualización de artículos e imágenes. WordPress es un ejemplo típico. Puede escribir artículos y establecer la fecha y hora de publicación desde la pantalla de gestión.

Estrictamente hablando, los dos no son antónimos. También hay una configuración que gestiona artículos con un CMS y entrega páginas completas como un sitio estático. Para que sea más fácil de entender, aquí compararemos una configuración en la que HTML se administra en GitHub y una configuración en la que usted mismo instala y opera WordPress general.

HTML es un archivo que describe la estructura de una página. Tradicionalmente, tocar el código cada vez que se agregaba un artículo era una parte engorrosa de los sitios estáticos. Hacer que la IA te ayude con esa tarea hará que sea más fácil elegir.

4. Teniendo en cuenta la respuesta a las vulnerabilidades y la evolución de la IA, queremos reducir el mecanismo de divulgación.

Publicar un sitio web no es el final. Si se encuentra una vulnerabilidad en el software que utiliza, deberá actualizarlo o verificarlo. La documentación oficial de WordPress también explica cómo actualizar la unidad principal, los complementos, etc., y administrar los permisos y la autenticación. [3]

En el desarrollo personal, el tiempo disponible para el mantenimiento es limitado. Si la atención se centra en las presentaciones de negocios y de aplicaciones, quería reducir la necesidad de operar los programas y bases de datos que se ejecutan al navegar, así como la pantalla de inicio de sesión para editar artículos que está abierta al público.

Al centrarse en la distribución pura de archivos estáticos, puede reducir la cantidad de puntos de entrada para ataques dirigidos a dichas áreas. Sin embargo, incluso los sitios estáticos pueden resultar dañados si se secuestran cuentas de GitHub o Cloudflare o si se mezcla JavaScript malicioso. La seguridad está determinada tanto por la configuración como por el funcionamiento.

La razón por la que quiero elegir un sitio estático no es porque todas las vulnerabilidades hoy en día sean causadas por los CMS. Esto se debe a que hay menos que administrar para la funcionalidad que necesita.

Además, la IA ahora puede ayudar en la creación de HTML y CSS, reduciendo la carga de editar archivos directamente. Esto simplifica la configuración de seguridad y reduce el esfuerzo necesario para las actualizaciones. Esta combinación es atractiva a escala personal.

5. Los artículos se convierten a HTML mediante IA, los revisan humanos y luego se publican.

El flujo de actualización esperado consta de los siguientes seis pasos.

1. Organiza la temática del artículo, el contenido que quieres transmitir y la experiencia.
2. Pídale a AI que cree una página de artículo que coincida con el diseño existente.
3. Registre el cambio propuesto en GitHub.
4. Los humanos verifican el texto, la evidencia, la visualización en pantalla y los cambios.
5. Incorpore los cambios confirmados en la rama main para su publicación.
6. Las acciones de GitHub se publican en páginas de Cloudflare.

El mecanismo para verificar los cambios propuestos en GitHub se denomina "solicitud de extracción" y la operación de incorporar los cambios confirmados se denomina "fusión". Incluso si lo ejecuta solo, puede configurar un paso para verificar entre la creación y la publicación.

Por ejemplo, las solicitudes a AI se pueden especificar de la siguiente manera.

Convierta este manuscrito a HTML utilizando la página del artículo existente como referencia. Organice sus títulos, tablas y enlaces de referencia para que sean fáciles de leer en teléfonos inteligentes. Actualice también la lista de artículos y el mapa del sitio. No agregue ninguna experiencia o número que no esté en el manuscrito y señale cualquier declaración que requiera confirmación.

Antes de publicar, verificamos la exactitud del texto, la visualización en teléfonos inteligentes, los destinos de los enlaces, los derechos de imagen y si se mezcla información personal o confidencial. Las revisiones de IA también se pueden utilizar como ayuda, pero el simple hecho de que las IA se verifiquen entre sí no garantiza la precisión.

Si tiene más artículos, puede pasar a escribir el texto del cuerpo en Markdown y generar HTML. Creo que es mejor no crear un sistema grande desde el principio y simplemente introducirlo cuando las actualizaciones se conviertan en una carga.

1. 1. Prepara el manuscritoOrganiza el contenido que quieres transmitir
2. 2. Convierta a HTML con IACoincidir con el diseño existente
3. 3. Confirmación humanaVerificar texto, evidencia y visualización
4. 4. Reflejado en las principalesacciones publicadas en las páginas

Entre la creación por IA y la publicación, habrá una etapa en la que los humanos comprobarán el contenido y lo mostrarán.

6. Agregue servicios si necesita funciones de edición o reserva de publicación.

Para sitios estáticos, simplemente escribir una fecha futura en HTML no reserva el sitio para su publicación. Si carga un archivo, es posible que pueda verlo desde la URL incluso si no figura en la lista de artículos.

Si es necesaria la publicación programada, considere un CMS headless que pueda administrar la fecha y hora de publicación, o un servicio que admita la implementación programada. Un CMS headless es un CMS que proporciona funciones de gestión de artículos y se puede utilizar independientemente de la apariencia y distribución de la página.

En este caso, no debes incluir el artículo en el archivo de publicación hasta la fecha y hora especificadas, y combinarlo con el proceso de publicación en el momento especificado. Asegúrese también de que los manuscritos privados no estén expuestos en vistas previas o repositorios públicos.

También existe una forma de configurar la ejecución regular de GitHub Actions, pero la ejecución puede retrasarse, por lo que no es adecuada para aplicaciones que requieren garantías de tiempo estrictas. [8]

Si varias personas necesitan editar, aprobar, administrar imágenes y programar la publicación diariamente, un CMS será de gran valor. Planeamos revisar la configuración cuando aumenten las funciones de edición necesarias.

7. Del registro a Cloudflare a la publicación de la página web

Aquí, le mostraremos cómo publicar desde GitHub Actions usando la "Carga directa" de Cloudflare Pages. El funcionario de Cloudflare también proporciona instrucciones para esta combinación. [4]

Cloudflare también tiene una opción de distribución estática llamada Workers Static Assets, pero las configuraciones y comandos de este artículo son para páginas. El nombre de pantalla puede cambiar, así que verifique el nombre del servicio y la configuración antes de continuar.

Paso 1: crea cuentas de Cloudflare y GitHub

Cree una cuenta con Cloudflare y GitHub y complete la verificación por correo electrónico. Configure la autenticación multifactor en ambos.

Puedes comenzar con el plan gratuito. Incluso si tiene un dominio original existente, puede comenzar a verificar la publicación desde la URL proporcionada por Pages.

Paso 2: Consigue tu propio dominio

Un dominio personalizado es un nombre en la web que usted adquiere y continúa usando, como ejemplo.com. Este es un contrato independiente de Cloudflare Pages, que almacena los archivos de su sitio. Cuesta dinero adquirir su propio dominio y deberá pagar una tarifa de renovación para continuar usándolo después de adquirirlo. Puedes publicarlo con el pages.dev gratuito, pero si quieres seguir usándolo como sitio comercial, será más fácil guiarte si preparas un dominio único que coincida con el nombre de tu empresa. Si ya lo tienes, no necesitas conseguir uno nuevo.

Las fuentes incluyen Cloudflare Registrar y otros servicios de registro de dominios. Si deseas administrarlos todos a la vez con Cloudflare, puedes obtenerlos mediante el siguiente procedimiento. [11]

1. Inicie sesión en Cloudflare y abra "Registrar dominios" en "Registro de dominio".
2. Busque el nombre de dominio que desee y vea qué opciones están disponibles. Elija un nombre que se parezca al de su empresa y que sea breve y fácil de escribir.
3. Consulta la tarifa de adquisición, los años del contrato y la próxima fecha de renovación. Comparamos no sólo el bajo precio del primer año, sino también las tarifas de renovación, los impuestos y las monedas de pago.
4. Ingrese el nombre, la dirección, el número de teléfono y la dirección de correo electrónico del registrante con precisión y registre el método de pago. La información del registrante de Cloudflare debe ingresarse en caracteres ASCII, así que ingrese los nombres y direcciones japoneses en caracteres romanos, etc.
5. Revisa los términos y monto del pago y confirma tu compra.
6. Consulte su correo electrónico de confirmación de registro y complete la verificación de la dirección de correo electrónico solicitada. También verifique su configuración de renovación automática y la fecha de vencimiento de su método de pago.

Los dominios adquiridos con Cloudflare Registrar utilizan los servidores de nombres de Cloudflare. No es un servicio que le permita cambiar libremente al servidor de nombres DNS de otra empresa después de adquirirlo. Además, si la terminación de dominio deseada no está disponible, consígala de un servicio de terceros compatible. [11]

Tu página web no se mostrará con sólo adquirir un dominio. Después de esto, publique su sitio en Pages y conéctelo con su propio dominio en el paso 8. Incluso si adquirió su dominio con otra empresa, puede usarlo junto con Pages sin tener que transferir el registro de su dominio a Cloudflare.

Una suscripción de dominio no incluye necesariamente buzones de correo para ese dominio. Si desea enviar y recibir correos electrónicos a través de info@example.com, etc., considere un servicio de correo electrónico independiente.

Paso 3: crea un repositorio en GitHub

Un repositorio es un repositorio para los archivos de su sitio y el historial de cambios. Créelo desde el "Nuevo repositorio" de GitHub con el nombre, por ejemplo, sange-studio-web.

Si se trata de manuscritos privados, seleccionar Privado hará que sea más fácil de administrar. Sin embargo, incluso en un repositorio privado, los archivos colocados en la carpeta pública se entregarán al sitio.

Coloque sólo los archivos que desee hacer públicos en la carpeta public. Por ejemplo, public/index.html es la página principal, public/apps/index.html es la lista de aplicaciones y public/privacy/index.html es la política de privacidad. Esto le permite limitar el rango en el que los manuscritos y archivos de configuración se distribuyen por error en el sitio.

Puede comenzar simplemente con public/index.html. Haga que AI cree una página de presentación comercial y verifique la visualización en su navegador.

Paso 4: crea un proyecto de páginas de Cloudflare

En la pantalla de administración de Cloudflare, vaya a "Trabajadores y páginas" para crear una aplicación y seleccione Carga de archivos (Carga directa) para Páginas. Decide un nombre de proyecto y sube el contenido de la carpeta public para publicarlo por primera vez. [5]

Acceda a https://project name.pages.dev que se muestra en este punto y consulte la página superior. El nombre del proyecto y el ID de la cuenta se utilizarán en configuraciones posteriores.

Los proyectos creados mediante Carga directa no se pueden cambiar al tipo vinculado a Git más adelante. Si desea cambiar, deberá crear un nuevo proyecto. [5]

Paso 5: cree un token de API público

Los tokens API son credenciales para publicar desde GitHub Actions en Cloudflare.

Cree un token personalizado desde la pantalla Tokens API de Cloudflare y establezca los permisos en "Cuenta → Páginas de Cloudflare → Editar". Limite sus cuentas objetivo a las que necesita. [4]

Los tokens que crea no se escriben directamente en archivos HTML o GitHub.

Paso 6: registrar la información de autenticación en GitHub Secrets

En el repositorio de GitHub, abra "Configuración → Secretos y variables → Acciones" y agregue los dos siguientes como secretos del repositorio.

Secretos es una función que almacena información de autenticación utilizada en los procesos de publicación. [4]

Paso 7: Agregar configuraciones de visibilidad para GitHub Actions

Cree .github/workflows/deploy.yml en su repositorio y guarde el siguiente contenido: Reemplace your-pages-project con el nombre de su proyecto de 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

Según el ejemplo oficial, tenemos una configuración mínima que solo se expone cuando se actualiza main. [4] No existe un proceso de generación de HTML, por lo que no se requieren configuraciones de compilación. En este ejemplo, la verificación es solo para confirmar la existencia de la página superior, por lo que se realizará una revisión del contenido y la visualización por separado.

Asegúrese también de que la rama de producción en el lado de las páginas sea main por primera vez. Después de reflejar el archivo de configuración en main, verifique el resultado de la ejecución en "Acciones" de GitHub y abra el sitio después del éxito.

Lo anterior es una especificación de etiqueta de versión que prioriza la legibilidad. Para una operación continua, puede reforzar el control de la ruta pública fijando la acción a un SHA de confirmación confirmado y revisando las actualizaciones.

Paso 8: establezca el dominio original adquirido en Páginas

Agregue el dominio que desea utilizar desde "Dominios personalizados → Configurar un dominio" en el proyecto de Páginas. [6]

Los dominios adquiridos con Cloudflare Registrar están configurados para utilizar el DNS de Cloudflare. Si utiliza un dominio raíz, como example.com, adquirido por otra empresa, agregue el dominio a Cloudflare y cámbielo a los servidores de nombres especificados en la pantalla de administración de su registrador. Si está utilizando un correo electrónico existente, los registros DNS como MX y TXT también se transferirán antes del cambio.

Para subdominios como www.example.com, también puede configurar un CNAME en un servicio DNS externo. En cualquier caso, en lugar de simplemente agregar registros DNS, primero asócielos con dominios personalizados en Pages. [6]

Después de la activación, verifique que pueda abrir con HTTPS y que las imágenes, los enlaces y la visualización del teléfono inteligente sean correctos. Si desea que su propio dominio sea una URL oficial, incluya también las URL canónicas y de mapas del sitio.

También hay una manera de comenzar con menos configuraciones.

Si no necesita control de publicaciones con GitHub Actions, es más fácil integrar los repositorios de GitHub directamente con Pages, lo que requiere menos configuración. La configuración consiste en seleccionar importar repositorio Git en la pantalla de creación de páginas, establecer la rama de producción en main, sin marco, compilar el comando en exit 0 y el destino de salida en public. [9]

Con este método, Cloudflare detecta cambios en GitHub y los publica, por lo que puedes eliminar la necesidad de configurar acciones y tokens API públicos. No es necesario ejecutar la publicación automática del método Acciones y del método de enlace directo al mismo tiempo.

1. Dominio únicoEjemplo: ejemplo.com
2. Configuración de DNSEspecificar el destino de la conexión del dominio
3. Configurar páginasAsociar con dominios personalizados
4. Ver sitioVerificar publicación con HTTPS

Obtener un dominio y publicar una página son dos tareas diferentes. Alinee la configuración de DNS y las asociaciones en el lado de las páginas.

8. ¿Cuánto cuesta?

Si tiene un sitio pequeño como este artículo que distribuye HTML, CSS e imágenes, puede comenzar a alojar y administrar archivos por tan solo 0 yenes al mes.

Cloudflare dice que la cantidad de solicitudes y ancho de banda para las páginas es ilimitada, pero existen restricciones como la cantidad de archivos y las condiciones de uso. El plan gratuito permite 500 compilaciones vinculadas a Git por mes y un máximo de 20 000 archivos. Al procesar y cargar directamente con GitHub Actions, distinga entre el marco de compilación en el lado de Cloudflare y el marco de ejecución en el lado de GitHub. [2][7]

GitHub Actions se puede ejecutar de forma gratuita en el ejecutor estándar alojado en GitHub para repositorios públicos. Tenga cuidado de no exceder el nivel gratuito en repositorios privados. Otros requisitos son grandes patines y capacidad de almacenamiento. [10]

Por ejemplo, si ejecuta un proceso de publicación de 3 minutos cada uno en un repositorio privado 30 veces al mes, el tiempo total es de 90 minutos. Si no utiliza la cuota para otros fines y su capacidad de almacenamiento está dentro de la cuota, puede utilizar 2000 minutos por mes.

Si ya tienes tu propio dominio, no hay ningún costo por adquirir un nuevo dominio al agregar un sitio. Sin embargo, se seguirán aplicando tarifas de renovación para los dominios existentes. No juzgues simplemente el precio de tu propio dominio basándose en el descuento del primer año; Consulta también el precio de renovación.

Tenga en cuenta que el costo de agregar API, bases de datos, funciones de páginas, etc. no está incluido en esta estimación estática del sitio.

Para el desarrollo personal, elija una configuración que le permita seguir operando.

Introducción comercial, introducción de aplicaciones, soporte, blog actualizado por un pequeño número de personas. Para estos fines, ejecutar un sitio estático con Cloudflare y GitHub es una buena opción.

La IA ayuda a crear y modificar páginas, y los humanos revisan y aprueban el contenido, que luego se publica automáticamente. Cuando las funciones de edición necesarias aumenten, agregue un CMS o servicios externos en esa etapa.

Para una operación a escala personal como SANGE Studio, nos gustaría elegir una configuración que nos permita continuar entregando información comercial mientras aseguramos tiempo para el desarrollo de aplicaciones.

Materiales de referencia

1. Información necesaria para crear una cuenta de Google Play Console
2. Información del producto de las páginas de Cloudflare
3. Oficial de WordPress: Fortalecimiento de WordPress
4. Oficial de Cloudflare: carga directa e integración de CI
5. Oficial de Cloudflare: Carga directa
6. Oficial de Cloudflare: Dominios personalizados
7. Límites de páginas de Cloudflare
8. Oficial de GitHub: programar evento
9. Oficial de Cloudflare: HTML estático
10. precios y nivel gratuito de GitHub Actions
11. Oficial de Cloudflare: registre un nuevo dominio