Table of Contents
Static website design is a popular approach for building websites that don't require dynamic content or complex functionality. In this article, we will explore how to deploy a static HTML website using Cloudflare Pages. Whether you are managing your website without a framework or static site generator, or your framework is not listed in the framework guides, this guide will help you deploy your static website with ease.
Getting Started with Git
Before we dive into deploying our static website, it's important to have a fundamental understanding of Git. If you're new to Git, you can refer to this summarized Git handbook for guidance on setting up Git on your local machine. It's essential to generate SSH keys if you clone with SSH, as this allows you to push or pull from GitHub on multiple computers. For more information, you can consult the GitHub documentation and Git documentation.
Creating a GitHub Repository
The first step in deploying your static website is to create a GitHub repository. You can visit the GitHub website and use the "repo.new" shortcut to create a new repository. Once you have created the repository, navigate to your project directory and run the following commands in your terminal:
shell $ git init $ git remote add origin https://github.com/<your-gh-username>/<repository-name> $ git add . $ git commit -m "Initial commit" $ git branch -M main $ git push -u origin main
These commands initialize a new Git repository, connect it to your GitHub repository, add your files to the repository, commit the changes, set the branch to "main," and push the changes to GitHub.
Deploying with Cloudflare Pages
Now that you have set up your GitHub repository, it's time to deploy your static website using Cloudflare Pages. Follow these steps:
Log in to the Cloudflare dashboard and select your account.
In the Account Home, navigate to Workers & Pages > Create application > Pages > Connect to Git.
Select the GitHub repository you created earlier.
In the "Set up builds and deployments" section, provide the following information:
Configuration option: Value
Production branch: main
Build command (optional): exit 0
Build output directory:
Note: The build command and build output directory for your site may vary depending on your setup. If you don't need to build your site, you can use "exit 0" as your build command. This allows you to access features such as Pages Functions. The build output directory is where your application's content resides.
Once you have configured your site, you can initiate your first deployment. Cloudflare Pages will run your custom build command (if provided) and deploy your static site. For a comprehensive guide on deploying your first site to Cloudflare Pages, refer to the Get Started guide.
After deploying your site, you will receive a unique subdomain for your project on "*.pages.dev". Cloudflare Pages will automatically rebuild and deploy your project. Additionally, you'll have access to preview deployments on new pull requests, allowing you to preview changes before deploying them to production.
If you encounter 404 errors on "*.pages.dev" domain, ensure that your website has a top-level file named "index.html". This file will be served by Pages on your apex domain when no specific page is specified.
Learn More
Congratulations! You have successfully deployed your site to Cloudflare Pages using the static HTML approach. To explore deploying sites with other frameworks, refer to the list of Framework guides.
Static website design is an efficient and straightforward way to create websites without the need for complex functionality. By following the steps outlined in this guide, you can easily deploy your static HTML website using Cloudflare Pages. Start building your static website today and enjoy the benefits of simplicity and ease of deployment. Visit https://www.therealsocialcompany.com to learn more about static website design and other web development topics.
