Website design and operation

Personal development homepage is Cloudflare + GitHub. How to create a static site updated with AI and the cost

After obtaining a D-U-N-S number and introducing the app, I prepared a business website for personal development. We will explain the difference between a static site and a CMS, updating articles with AI, publishing with GitHub Actions, and the registration procedure and cost of Cloudflare Pages.

public update
  • Cloudflare
  • GitHub
  • personal development

If you are creating an app by yourself, in addition to developing the app itself, you will also need a homepage to introduce your business and provide support.

SANGE Studio also needs a website in order to prepare for obtaining a D-U-N-S number and to prepare an introduction page for the app. I want to create a configuration that costs as little money as possible and takes less time for day-to-day management. The option is to publish a static site with Cloudflare and manage the files with GitHub.

When updating an article, AI helps create and modify the HTML, and humans check the content and display before publishing it. We believe that this configuration is sufficient in many situations for personal business sites.

In this article, we will explain the reasons for choosing one, the publishing procedure, and the cost. Prices and specifications are information as of October 27, 2026.

1. Prepare the site after obtaining the D-U-N-S number and introducing the app.

A D-U-N-S number is a 9-digit number that identifies a company or business entity. As a general rule, you will need this number when creating a Google Play organizational account.

In addition to the D-U-N-S number, Google Play also requires an "organizational website" as registration information for an organization account. [1]

This is where it's easy to get confused. It's one thing forGoogle Play to require a website; it's another thing for a website to be uniformly required for all D-U-N-S number applications. For the information you need to apply for a D-U-N-S number, please check the instructions for the counter you use.

In any case, a page that explains the reality of your business and an app introduction/support page will be useful for subsequent operations. You can start small by preparing the following contents:

pageContents to be posted
topInformation about the store name, the business we are involved in, and the app
Business introductionExplanation that does not contradict the application information, such as operator and business details
App introductionFeatures, screen images, links to Google Play
supportHow to contact us and frequently asked questions
Privacy PolicyExplanation based on actual data acquisition and use of external services

It does not mean that just preparing a site will pass the examination. It is important that the information you post is consistent with the actual business and application details.

2. Static sites are a good option if you want to reduce costs and management effort.

In order to have a homepage, you don't necessarily need to contract a rental server or install WordPress.

Cloudflare Pages is a service that allows you to publish HTML, images, etc. It is available from the free plan, and can also be published using the URL provided by the service: ○○.pages.dev. [2]

GitHub will be used as a place to manage your site's files and change history. You can check when and where something was fixed, and if there is a problem, you can leave clues to return to the previous state.

Organizing the roles looks like this:

roleWhat to use
Creating and modifying sentences and HTMLAI and humans
Manage files and change historyGitHub
Automate the publishing process after confirmationGitHub Actions
Delivering pages to viewersCloudflare Pages

Cloudflare isn't the only cheapest service out there. There are also services available for free. In addition, it is an option that suits your purpose of starting a personal development introduction site at a low cost.

Publication mechanism and each role
  1. AI + HumanCreating and checking articles/HTML
  2. GitHubManage files and change history
  3. GitHub ActionsPublishing approved changes
  4. Cloudflare PagesDistribute HTML and images to readers

Managed on GitHub and published on Actions. Cloudflare Pages delivers pages to readers.

3. Difference between static hosting and CMS

Static hosting is a system that delivers pre-created HTML and images to viewers as they are.

A CMS is a system that makes it easy to manage and update articles and images. WordPress is a typical example. You can write articles and set the publication date and time from the management screen.

Strictly speaking, the two are not antonyms. There is also a configuration that manages articles with a CMS and delivers completed pages as a static site. To make it easier to understand, here we will compare a configuration where HTML is managed on GitHub and a configuration where you install and operate general WordPress yourself.

Items to compareStatic site managing HTMLGeneral WordPress self-operation
How to updateModify and publish the fileEdit and publish from the management screen
Processing when viewingDeliver the prepared fileWorks with PHP, database, etc. Some configurations use cache.
maintenanceManage files, publishing routes, usage tools, etc.Manage the main unit, themes, plugins, execution environment, etc.
Scheduled postPrepare a separate mechanism to control publicationStandard scheduled posting function available
Applications suitable forBusiness introduction, app introduction, small group blogSites with many editors, frequent updates, and sites where editing functionality is important

HTML is a file that describes the structure of a page. Traditionally, touching the code every time you added an article was a burdensome part of static sites. Having AI help you with that task will make it easier to choose.

4. Considering the response to vulnerabilities and the evolution of AI, we want to make the mechanism for disclosure smaller.

Publishing a website is not the end. If a vulnerability is found in the software you use, you will need to update or check it. The official WordPress documentation also explains how to update the main unit, plugins, etc., and manage permissions and authentication. [3]

In personal development, the time available for maintenance is limited. If the focus is on business introductions and app introductions, I wanted to reduce the need for me to operate the programs and databases that run when browsing, as well as the login screen for editing articles that is open to the public.

By focusing on pure static file distribution, you can reduce the number of entry points for attacks that target such areas. However, even static sites can be damaged if GitHub or Cloudflare accounts are hijacked or malicious JavaScript is mixed in. Safety is determined by both configuration and operation.

The reason I want to choose a static site is not because all vulnerabilities these days are caused by CMSs. This is because there is less to manage for the functionality you need.

Furthermore, AI can now assist in the creation of HTML and CSS, reducing the burden of directly editing files. This simplifies the security configuration and reduces the effort required for updates. This combination is attractive on a personal scale.

5. Articles are converted to HTML using AI, checked by humans, and then published.

The expected update flow is the following six steps.

  1. Organize the theme of the article, the content you want to convey, and the experience.
  2. Ask AI to create an article page that matches the existing design.
  3. Register the proposed change on GitHub.
  4. Humans check the text, evidence, screen display, and changes.
  5. Incorporate the confirmed changes into the main branch for publication.
  6. GitHub Actions publish to Cloudflare Pages.

The mechanism for checking proposed changes on GitHub is called a "pull request," and the operation of incorporating the confirmed changes is called a "merge." Even if you run it alone, you can set up a step to check between creation and publication.

For example, requests to AI can be specified as follows.

Please convert this manuscript to HTML using the existing article page as a reference. Organize your headings, tables, and reference links to make it easy to read on smartphones. Please also update the article list and sitemap. Please do not add any experiences or numbers that are not in the manuscript, and point out any statements that require confirmation.

Before publishing, we check the accuracy of the text, display on smartphones, link destinations, image rights, and whether personal or confidential information is mixed in. AI reviews can also be used to assist, but just having AIs check each other does not guarantee accuracy.

If you have more articles, you can move on to writing the body text in Markdown and generating HTML. I think it's best not to create a big system from the beginning and just introduce it when updates become a burden.

From writing the article to publishing it
  1. 1. Prepare the manuscriptOrganize the content you want to convey
  2. 2. Convert to HTML with AIMatch to existing design
  3. 3. Human confirmationCheck text, evidence, and display
  4. 4. Reflected in mainActions published to Pages

Between creation by AI and publication, there will be a stage where humans will check the content and display.

6. Add services if you need publishing reservation or editing functions.

For static sites, simply writing a future date in the HTML does not reserve the site for publication. If you upload a file, you may be able to view it from the URL even if it is not listed in the article list.

If scheduled publishing becomes necessary, consider a headless CMS that can manage the publishing date and time, or a service that supports scheduled deployment. A headless CMS is a CMS that provides article management functions and can be used separately from page appearance and distribution.

In this case, you should not include the article in the publishing file until the specified date and time, and combine it with the publishing process at the specified time. Also make sure that private manuscripts are not exposed in previews or public repositories.

There is also a way to set up regular execution of GitHub Actions, but the execution may be delayed, so it is not suitable for applications that require strict time guarantees. [8]

If multiple people need to edit, approve, manage images, and schedule publishing on a daily basis, a CMS will be of great value. We plan to review the configuration when the necessary editing functions increase.

7. From registration to Cloudflare to web page publication

Here, we will show you how to publish from GitHub Actions using Cloudflare Pages' "Direct Upload." Cloudflare official also provides instructions for this combination. [4]

Cloudflare also has a static distribution option called Workers Static Assets, but the settings and commands in this article are for Pages. The screen name may change, so please check the service name and settings before proceeding.

Step 1: Create Cloudflare and GitHub accounts

Create an account with Cloudflare and GitHub and complete email verification. Set up multi-factor authentication on both.

You can start with the free plan. Even if you have an existing original domain, you can start checking the publication from the URL provided by Pages.

Step 2: Get your own domain

A custom domain is a name on the web that you acquire and continue to use, such as example.com. This is a separate contract from Cloudflare Pages, which stores your site's files. It costs money to acquire your own domain, and you will need to pay a renewal fee to continue using it after acquiring it. You can publish it with the free pages.dev, but if you want to continue using it as a business site, it will be easier to guide you if you prepare a unique domain that matches your business name. If you already have it, you don't need to get a new one.

Sources include Cloudflare Registrar and other domain registration services. If you want to manage them all at once with Cloudflare, you can obtain them using the following procedure. [11]

  1. Log in to Cloudflare and open "Register Domains" under "Domain Registration."
  2. Search for your desired domain name and see what options are available. Choose a name that is close to your business name and is short and easy to type.
  3. Check the acquisition fee, contract years, and next renewal date. We compare not only the low price for the first year, but also renewal fees, taxes, and payment currencies.
  4. Enter the registrant's name, address, phone number, and email address accurately, and register the payment method. Cloudflare registrant information must be entered in ASCII characters, so enter Japanese names and addresses in Roman characters, etc.
  5. Review the terms and payment amount and confirm your purchase.
  6. Check your registration confirmation email and complete the email address verification requested. Also check your auto-renewal settings and the expiration date of your payment method.

Domains acquired with Cloudflare Registrar use Cloudflare's name servers. It is not a service that allows you to freely switch to another company's DNS name server after acquiring it. Also, if the desired domain ending is not available, obtain it from a compatible third-party service. [11]

Your web page will not be displayed just by acquiring a domain. After this, publish your site to Pages and connect it with your own domain in step 8. Even if you acquired your domain with another company, you can use it in conjunction with Pages without having to transfer your domain registration to Cloudflare.

A domain subscription does not necessarily include mailboxes for that domain. If you want to send and receive emails via info@example.com, etc., consider a separate email service.

Step 3: Create a repository on GitHub

A repository is a repository for your site's files and change history. Create it from GitHub's "New repository" with the name, for example, sange-studio-web.

If you are dealing with private manuscripts, selecting Private will make it easier to manage. However, even in a private repository, files placed in the public folder will be delivered to the site.

Put only the files you want to make public into the public folder. For example, public/index.html is the top page, public/apps/index.html is the app list, and public/privacy/index.html is the privacy policy. This allows you to narrow down the range where manuscripts and configuration files are mistakenly distributed to the site.

You can start with just public/index.html. Have AI create a business introduction page and check the display on your browser.

Step 4: Create a Cloudflare Pages project

On the Cloudflare admin screen, go to "Workers & Pages" to create an application, and select File Upload (Direct Upload) for Pages. Decide on a project name and upload the contents of the public folder to publish it for the first time. [5]

Access https://project name.pages.dev that is displayed at this point and check the top page. The project name and Account ID will be used in later settings.

Projects created using Direct Upload cannot be switched to Git-linked type later. If you want to switch, you will need to create a new project. [5]

Step 5: Create a public API token

API tokens are credentials for publishing from GitHub Actions to Cloudflare.

Create a custom token from the Cloudflare API Tokens screen and set the permissions to "Account → Cloudflare Pages → Edit". Narrow down your target accounts to the ones you need. [4]

The tokens you create are not written directly to HTML or GitHub files.

Step 6: Register authentication information in GitHub Secrets

In the GitHub repository, open "Settings → Secrets and variables → Actions" and add the following two as Repository secrets.

nameValue to register
CLOUDFLARE_API_TOKENCreated API token
CLOUDFLARE_ACCOUNT_IDCloudflare account ID to publish to

Secrets is a function that stores authentication information used in publishing processes. [4]

Step 7: Add visibility settings for GitHub Actions

Create .github/workflows/deploy.yml in your repository and save the following content: Replace your-pages-project with your Pages project name.

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

Based on the official example, we have a minimal configuration that is only exposed when main is updated. [4] There is no HTML generation process, so no build settings are required. In this example, the check is only to confirm the existence of the top page, so a review of the content and display will be conducted separately.

Please also make sure that the production branch on Pages side is main for the first time. After reflecting the configuration file in main, check the execution result in GitHub's "Actions" and open the site after success.

The above is a version tag specification that prioritizes readability. For continued operation, you can tighten the control of the public path by pinning the Action to a confirmed commit SHA and reviewing updates.

Step 8: Set the acquired original domain to Pages

Add the domain you want to use from "Custom domains → Set up a domain" in the Pages project. [6]

Domains acquired with Cloudflare Registrar are configured to use Cloudflare's DNS. If you use a root domain, such as example.com, acquired by another company, add the domain to Cloudflare and change it to the nameservers specified in your registrar's admin screen. If you are using an existing email, the DNS records such as MX and TXT will also be carried over before the change.

For subdomains like www.example.com, you can also set a CNAME in an external DNS service. In either case, instead of just adding DNS records, first associate them with Custom domains in Pages. [6]

After activation, check that you can open with HTTPS and that images, links, and smartphone display are correct. If you want to make your own domain an official URL, also include canonical and sitemap URLs.

There is also a way to start with fewer settings.

If you don't need publication control with GitHub Actions, it's easier to integrate GitHub repositories directly with Pages, which requires less setup. The configuration is to select import Git repository on the Pages creation screen, set the production branch to main, no framework, build command to exit 0, and output destination to public. [9]

With this method, Cloudflare detects changes to GitHub and publishes them, so you can eliminate the need to set up public API tokens and Actions. There is no need to run the Actions method and the direct link method automatic publishing at the same time.

Connect your own domain and site files
  1. Unique domainExample: example.com
  2. DNS settingsSpecify domain connection destination
  3. Configure PagesAssociate with Custom domains
  4. View siteVerify publishing with HTTPS

Obtaining a domain and publishing a page are two different tasks. Align the DNS settings and the associations on the Pages side.

8. How much does it cost?

If you have a small site like this article that distributes HTML, CSS, and images, you can start hosting and file management for as little as 0 yen per month.

ItemcostSupplement
Cloudflare Pages Free0 USD per monthUsed for publishing static sites
GitHub Free0 USD per monthManage files and change history
GitHub Actions0 USD within the free limitGitHub Free private repositories are limited to 2,000 minutes per month and 500MB of artifact storage. Share your account with other uses
URL provided by PagesAdditional cost 0 yen○○.pages.dev
own domainSeparate acquisition/renewal fee requiredVaries depending on domain ending, registrar, and contract terms
AIDepends on the service usedFree plan, monthly contract, API usage fee, etc.
Reservation disclosure/form etc.Depends on the service usedAdd only the features you need

Cloudflare says that the number of requests and bandwidth for Pages is unlimited, but there are restrictions such as the number of files and usage conditions. The Free plan allows 500 Git-linked builds per month and a maximum of 20,000 files. When processing and Direct Uploading with GitHub Actions, distinguish between the build frame on the Cloudflare side and the execution frame on the GitHub side. [2][7]

GitHub Actions is free to run on the standard GitHub-hosted runner for public repositories. Be careful not to exceed the free tier in private repositories. Large runners and storage capacity are other requirements. [10]

For example, if you run a publishing process of 3 minutes each on a private repository 30 times a month, the total time is 90 minutes. If you don't use up the quota for other purposes and your storage capacity is within the quota, you can use 2,000 minutes per month.

If you already have your own domain, there is no cost to acquire a new domain when adding a site. However, renewal fees for existing domains will continue to apply. Don't just judge the price of your own domain based on the first year's discount; also check the renewal price.

Please note that the cost of adding APIs, databases, Pages Functions, etc. is not included in this static site estimate.

For personal development, choose a configuration that allows you to continue operating.

Business introduction, application introduction, support, blog updated by a small number of people. For these purposes, running a static site with Cloudflare and GitHub is a strong option.

AI helps create and modify pages, and humans review and approve the content, which is then automatically published. When the necessary editing functions increase, add a CMS or external services at that stage.

For a personal-scale operation like SANGE Studio, we would like to choose a configuration that allows us to continue delivering business information while securing time for application development.

Reference materials

  1. Information required to create a Google Play Console account
  2. Cloudflare Pages Product Information
  3. WordPress official: Hardening WordPress
  4. Cloudflare official: Direct Upload and CI integration
  5. Cloudflare official: Direct Upload
  6. Cloudflare official: Custom domains
  7. Cloudflare Pages limits
  8. GitHub official: schedule event
  9. Cloudflare official: Static HTML
  10. GitHub Actions pricing and free tier
  11. Cloudflare official: Register a new domain
← Go to list of development blog articles