What is Cloudflare Pages?
Cloudflare Pages is a platform for developers and website owners to easily build, preview and deploy static sites and web applications. Delivered via Cloudflare’s global CDN (Content Delivery Network), your site can be accessed quickly and easily from anywhere in the world.
Key Features
- Intuitive user interface: intuitive website setup and deployment
- GitHub integration: Simply push to the repository and it will automatically build and deploy.
- Free SSL Certificate: All pages are automatically secured with HTTPS.
- Custom Domain Support: You can publish your project using your own domain and it is easy to set up.
- Automatic scaling: Resources are automatically adjusted to accommodate visitor growth.
Benefits
- Fast load times: Cloudflare’s CDN allows you to deliver your content quickly from anywhere in the world.
- Security: Automatically provides SSL certificates and includes protection against DDoS attacks.
- Easy Deployment: Simply push your code to GitHub and it is automatically built and deployed.
- Cost-effective: Free for basic use and at no additional cost for many projects.
Cloudflare Pages is suitable for a variety of uses, including blogs, portfolio sites, small business websites, and product landing pages. It is also ideal for projects using a static site generator or deploying SPAs (Single Page Applications) using a front-end framework.
There is a repository on GitHub named test and a README.md file for practice.
I recently created a repository on GitHub because of the convenience of Cloudflare Pages; GitHub is like a big vault on the Internet. It’s as if the files I put on GitHub magically transformed into a website right away.
Let’s check it out for ourselves: log in to Cloudflare and click on “Workers & Pages” on the first page that appears. On the right side of the screen, select the Pages tab. You can upload files directly, or you can connect to Git and link to it. Authentication will also be completed.
The squiggle is selecting a specific repository, not all repositories.
If you are satisfied with this setup, start the setup.
The next step shows build commands, build output directory, and other things that are not clear to beginners.
The following is what you do in the build setup, but if you are only using README.md for practice, these are not necessary.
- Build command: If your project uses a static site generator (e.g. Hugo, Jekyll, Gatsby, etc.), the build command is required. It is used to generate static files for the site. However, if you are simply hosting static files (HTML, CSS, JavaScript), you do not need the build command. For example, a repository containing only README.md does not require a build process.
- Build output directory: This refers to the directory where the static files generated after the build process is complete will be stored. Depending on the static site generator used,
public,dist,build, etc. are commonly used. If you are not using the build process, or if you are hosting only simple static files, specify the directory where the files are located (often the root directory). - Root Directory (Advanced): Specify if the root directory is a specific subdirectory in the project where build commands should be executed. For example, if the project source code is located in the
/srcdirectory, it can be specified as the root directory. - Environment Variables (Advanced): Allows you to set arbitrary environment variables used during the build process and application execution, useful for storing API keys, distinguishing between development (development) and production (production) environments, etc.
If your GitHub repository is for practice and contains only the README.md file, there is no need for a build process and basically no need to specify a build output directory. Therefore, leave that field blank and click the “Save and Deploy” button. However, if you are considering deploying to other platforms such as GitHub Pages, you may need to configure settings according to that platform.
Deployment was successful and the following URL is displayed. If you continue to access the site, nothing will be displayed.
So, add README.md on GitHub to the URL.
https://test-11v.pages.dev/README.md
Now you can see the file on GitHub.
This explains the issue where nothing is displayed when you successfully deploy with Cloudflare Pages and access the root URL (https://test-11v.pages.dev/).
Normally, what you see when you access the root URL of a website is a file named index.html; Cloudflare Pages (or most web servers) will look for this file by default and display it if found. Since the index.html file does not exist in your repository, nothing is displayed when you access the root URL.
As a solution, you can consider one of the following
- Add
index.html: Create anindex.htmlfile that serves as the home page of your site and add it to the repository. Within this file, you can provide links to other pages and resources. - Set up redirects: Cloudflare Pages can be configured to automatically redirect visitors to a different URL. This can be used to set up a redirect from the root URL to
README.md. Redirects can be configured by creating a_redirectsfile in the root of the repository. For example, write the following/* /README.md 302
This setting will temporarily redirect all requests toREADME.md(302 means temporary redirect).
Which method you choose depends on the purpose of your site and what kind of content you want to provide your visitors. If you simply want to display README.md, setting up a redirect may be the quickest way to go. On the other hand, if you want to build a more complex site structure or a site with multiple pages, we recommend designing your site structure to include index.html.
Cloudflare Pages is a service to deploy and publish static pages (HTML, CSS, JavaScript files, etc.) hosted on GitHub. and distributed worldwide. The process works as follows
- Repository Setup: Prepare static files (e.g.,
index.html)and source code to build the site in a GitHub repository. - Connect with Cloudflare Pages: Login to Cloudflare Pages and select the GitHub repository you wish to deploy to. Configure build commands, build output directory, and other settings as necessary.
- Build and Deploy: Cloudflare Pages will automatically execute the configured build commands and deploy the files in the build output directory as a website each time it is pushed to the GitHub repository.
- Publish: If the build is successful, the website is distributed worldwide via Cloudflare’s CDN (Content Delivery Network) at high speed.
If only README.md exists in the repository and you want it to appear as a web page, you may need to take the step of converting README.md to HTML. However, if you include the index.html file directly in the repository, that file will automatically be treated as a web page accessible at the root URL.
So, we will create a simple HTML file, upload a simple HTML file to GitHub, and describe the process of deleting the existing README.md. First, an example of a basic HTML file is shown below. Save this HTML file as index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Awesome Site</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is the homepage of my site.</p>
</body>
</html> The steps to upload this HTML file to GitHub and remove the README.md are as follows. You must have Git for Windows installed in your local environment to perform this process.
- Prepare a local repository: Clone the repository from GitHub (this step is not necessary if you have already cloned it).
git clone https://github.com/username/repository_name.gitcd repository_name - Delete
README.md: Delete theREADME.mdfile locally.git rm README.md - Add HTML file: Save the
index.htmlfile created above in the repository root directory. - Commit changes: Commit all changes, including deletions and additions.
git add .git commit -m "Removed README and added index.html" - Push to GitHub: Push your changes to the GitHub repository
git push origin main
This command pushes to themainbranch. If your repository uses a different default branch (e.g.,master), replacemainwith that branch name as appropriate.
These steps will remove the README.md from the repository and add the new index.html to the GitHub repository. and the updated content will be published. If you are not comfortable with commands, GitHub Desktop may be easier.
You can use Windows Explorer to directly delete the README.md and place the new index.html in the repository directory. You can then use a command line tool such as Git Bash, Command Prompt, or PowerShell to begin by committing the changes. The steps are as follows
- Staging the changes: Stage the changes (in this case the removal of
README.mdand the addition ofindex.html). After manipulating the files in Explorer, use Git to track the changes.git add -A
This command stages both deleted and newly added files.-The-Aoption is used to stage all changes (added, deleted, and changed files) in the repository. - Commit changes: commits the staged changes to the local repository.
git commit -m "Removed README and added index.html"
After the-moption, specify the commit message in quotes. This message should be a concise description of the changes. - Push to GitHub: Push the committed changes to the GitHub repository.
git push origin main
This command pushes to themainbranch. If your repository defaults to themasterbranch, replacemainwithmaster.
Using Windows Explorer is an intuitive and easy method for those familiar with file manipulation. After adding or removing files, you can push changes to GitHub with just a few steps on the command line.
The next step is to make it accessible under your own domain. If you already had your domain set up with Cloudflare, the process of setting up your custom domain in Cloudflare Pages is very smooth. If you are already using Cloudflare nameservers, the required DNS records (in this case CNAME records) will be automatically added when you add your custom domain to your Cloudflare Pages project. I had already changed the nameservers for the domain to the address specified by Cloudflare, so I only needed to add a CNAME record.
Adding the CNAME record ensures that the custom domain is properly pointed to the Cloudflare Pages hosted site and that the site will display as expected when accessed from the outside. This setup allows you to centralize your domain management and website hosting with Cloudflare and take advantage of the many features Cloudflare has to offer, including security, performance optimization, and automated SSL/TLS encrypted connections.
During these processes, the message “Verification in progress. It may take up to 48 hours before your DNS records are updated and your site is visible to visitors.” But after about a minute, the domain is now active, and SSL is enabled.
It will now display when accessed by the domain.
Converting your WordPress site to a static file is going to create some sites, and by converting your WordPress site to a static file and deploying it on Cloudflare Pages, you can improve security, reduce load times, and lower your hosting costs. Plugins for converting WordPress sites to static files include WP2Static and Simply Static, which allow you to easily export your entire site as a static file.
However, if you export pages that contain dynamic functionality, such as comment fields or forms, as static files, the functionality may not work as expected. This is because server-side code cannot be executed on a static site.
There are several ways to use these features on a static site.
- Commenting: Third-party commenting systems such as Disqus and Staticman can be incorporated to provide commenting functionality on static sites. These services run as external services and can be incorporated into static files.
- Forms: Services such as Formspree and Netlify Forms can be used to implement forms on a static site. These forms receive input from the user and then an external service handles the processing, such as sending the data to a specified email address.
If you want to have dynamic functionality, you must either explore these static solutions or implement dynamic behavior on the client side using JavaScript. For example, you could use client-side JavaScript to call an API and display dynamic content on the page. Regarding the comments section and forms, the comments section can be hidden in the WordPress settings, so exporting it in this state would be a good solution.
As for the conversion and update process from a WordPress site to a static site, it would be time consuming and inefficient to reconvert and deploy the entire site each time. Unfortunately, however, many static site conversion plugins do not directly provide the ability to selectively convert and export only updated content. The typical workflow is to reconvert the entire site and upload it to GitHub.
However, there are several possible ways to streamline this process.
Use of automation scripts
Create an automation script to automate the process of converting and uploading your WordPress site to GitHub. This can be done using GitHub Actions, for example. This approach, however, does not target only updated articles, as it converts and deploys all the data of the site, but automating the process reduces the effort.
Use of Static File Generation Tools
Some static site generators support an incremental build feature that rebuilds only updated files; while it may be difficult to take advantage of this directly from WordPress, intermediate tools that generate static files using WordPress as the source (e.g., Gatsby’s gatsby-source-wordpress plugin), such functionality may be useful.
Manual Selective Updates
Each time you update an article, you can manually update only the static files related to that article and upload them to the GitHub repository. While this approach is feasible, it may not be practical for sites where many articles are updated frequently.
Use of External Services
Headless CMS or other content management systems can be used in conjunction with WordPress to update content on a static site. In this case, WordPress is mainly used for content creation, and another system takes care of publishing.
In fact, WordPress is converted to check its operation. According to the official page, this can be achieved by adding a plugin to WordPress.
https://developers.cloudflare.com/pages/how-to/deploy-a-wordpress-site/
Search for Simply Static in the plugin and install it; WordPress is created in a local environment; use Docker to save time.
The only part of the export that needs to be configured is the domain that will be used by Cloudflare Pages.
Also, since we are exporting as static HTML, we will be using this plugin to export with comment fields, forms, etc. disabled. Using a static site generator plugin such as Simply Static, all pages, posts, and layouts of your WordPress site will be generated as static HTML files according to the style of the currently active theme.
Unzip the generated compressed files and place them in your project folder; sync them locally with GitHub and your static WordPress site is ready to go.
