If you want to build a custom-coded website without managing servers, Cloudflare Pages combined with GitHub is an excellent solution. You get free hosting, automatic deployments, global CDN, and a professional development workflow—all without the complexity of traditional hosting.

This approach is perfect for static websites, JAMstack applications, and custom-coded sites built with HTML, CSS, and JavaScript. Whether you're building a portfolio, documentation site, or a custom web application, this workflow gives you enterprise-grade infrastructure for free.

Why Cloudflare Pages + GitHub?

This combination offers several advantages over traditional hosting:

• Free hosting: Cloudflare Pages is free for personal and commercial use
• Global CDN: Your site is served from Cloudflare's edge network worldwide
• Automatic SSL: Free SSL certificates with automatic renewal
• Git-based workflow: Deploy by pushing to GitHub—no FTP or manual uploads
• Preview deployments: Get preview URLs for pull requests before merging
• Fast builds: Cloudflare's infrastructure builds and deploys quickly
• No server management: No need to configure servers, databases, or maintenance
• Scalable: Handles traffic spikes automatically

What You Can Build

Cloudflare Pages works great for:

• Static websites: HTML, CSS, and JavaScript sites
• JAMstack applications: Sites built with frameworks like React, Vue, Next.js, Nuxt, etc.
• Documentation sites: Using tools like Docusaurus, MkDocs, or custom setups
• Portfolio websites: Custom-coded portfolios and personal sites
• Landing pages: Marketing pages and product launches
• Blogs: Static site generators like Jekyll, Hugo, Eleventy, or custom solutions

Prerequisites

Before you start, you'll need:

• GitHub account: Free account at github.com
• Cloudflare account: Free account at dash.cloudflare.com
• Git installed: On your local machine (git-scm.com)
• Code editor: VS Code, Sublime Text, or your preferred editor
• Basic knowledge: HTML, CSS, JavaScript basics, and Git fundamentals

Step 1: Create Your Website Locally

Start by creating your website files locally on your computer. Create a new folder for your project:

mkdir my-website
cd my-website

Create a basic HTML file to start:

# index.html



    
    
    
    


    
Welcome to My Website
    
This is my custom website hosted on Cloudflare Pages.
    

Add CSS and JavaScript files as needed. You can use any structure you prefer—this is your custom website, so organize it however makes sense for your project.

Step 2: Initialize Git Repository

Initialize a Git repository in your project folder:

git init
git add .
git commit -m "Initial commit"

Step 3: Push to GitHub

Create a new repository on GitHub:

1. Go to github.com/new
2. Name your repository (e.g., "my-website")
3. Choose public or private (both work with Cloudflare Pages)
4. Don't initialize with README, .gitignore, or license (you already have files)
5. Click "Create repository"

Then push your local code to GitHub:

git remote add origin https://github.com/yourusername/my-website.git
git branch -M main
git push -u origin main

Replace yourusername with your GitHub username and my-website with your repository name.

Step 4: Connect to Cloudflare Pages

Now connect your GitHub repository to Cloudflare Pages:

1. Go to dash.cloudflare.com
2. Navigate to Workers & Pages in the sidebar
3. Click Create application
4. Select Pages tab
5. Click Connect to Git
6. Authorize Cloudflare to access your GitHub account
7. Select your repository
8. Click Begin setup

Step 5: Configure Build Settings

For a simple static site (HTML, CSS, JS), you typically don't need build settings. Cloudflare Pages will serve your files directly. However, if you're using a framework or static site generator, configure the build settings:

For Static HTML/CSS/JS Sites

• Build command: Leave empty (or use echo "No build needed")
• Build output directory: / (root of your repository)

For Framework-Based Sites

If you're using a framework, set the appropriate build command:

• Next.js: Build command: npm run build, Output: .next
• React (Create React App): Build command: npm run build, Output: build
• Vue (Vite): Build command: npm run build, Output: dist
• Hugo: Build command: hugo, Output: public
• Jekyll: Build command: bundle exec jekyll build, Output: _site

Click Save and Deploy. Cloudflare Pages will build and deploy your site. You'll get a URL like your-site.pages.dev where your site is live.

Step 6: Add Custom Domain

To use your own domain:

1. In Cloudflare Pages, go to your project settings
2. Click Custom domains
3. Click Set up a custom domain
4. Enter your domain (e.g., example.com)
5. Follow the DNS configuration instructions

If your domain is already on Cloudflare, DNS is configured automatically. If not, you'll need to add a CNAME record pointing to your Cloudflare Pages URL. Cloudflare provides free SSL certificates automatically for custom domains.

Workflow: Making Updates

The workflow for updating your site is simple:

1. Edit locally: Make changes to your files on your computer
2. Commit changes: git add . then git commit -m "Update content"
3. Push to GitHub: git push
4. Automatic deployment: Cloudflare Pages detects the push and automatically builds and deploys
5. Live in minutes: Your changes are live within 1-2 minutes

Preview Deployments

One of the best features of Cloudflare Pages is preview deployments. When you create a pull request on GitHub, Cloudflare automatically creates a preview URL where you can see your changes before merging. This is perfect for:

• Reviewing changes before going live
• Sharing previews with clients or team members
• Testing changes in a production-like environment

Best Practices

File Organization

Organize your files logically:

my-website/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
├── images/
│   └── logo.png
└── README.md

Version Control

• Commit frequently with descriptive messages
• Use branches for features or experiments
• Keep your main branch stable and production-ready

Performance

• Optimize images (use WebP format when possible)
• Minify CSS and JavaScript for production
• Use lazy loading for images
• Leverage Cloudflare's CDN caching

Security

• Don't commit sensitive information (API keys, passwords) to GitHub
• Use environment variables for sensitive config (Cloudflare Pages supports these)
• Keep dependencies updated

Advanced Features

Environment Variables

You can set environment variables in Cloudflare Pages settings for things like API keys, configuration values, or build settings. These are available during build and at runtime.

Custom Headers

Configure custom headers for security, caching, or other purposes through Cloudflare Pages settings.

Redirects and Rewrites

Set up redirects and URL rewrites using a _redirects file or through Cloudflare Pages settings.

Limitations and Considerations

Cloudflare Pages is excellent for static sites, but has some limitations:

• No server-side code: Can't run PHP, Python, Node.js server code (but you can use Cloudflare Workers for serverless functions)
• No databases: For database needs, use external services or APIs
• Build time limits: Free tier has build time limits (usually sufficient for most projects)
• Bandwidth: Free tier has generous limits, but very high-traffic sites may need paid plans

When to Use This Approach

Cloudflare Pages + GitHub is perfect when:

• You want to build a custom-coded website
• You don't need server-side processing
• You want free, reliable hosting
• You prefer a Git-based workflow
• You want automatic deployments
• You need global CDN performance

Consider traditional hosting (like 330 Hosting) when:

• You need WordPress or a CMS
• You require server-side processing (PHP, databases)
• You need email hosting
• You want managed support for setup and configuration

Conclusion

Building custom websites with Cloudflare Pages and GitHub gives you a professional, modern workflow with free hosting and automatic deployments. It's perfect for developers who want to focus on code rather than infrastructure management.

The combination of Git-based version control, automatic deployments, global CDN, and free SSL certificates makes this an excellent choice for static sites, JAMstack applications, and custom-coded websites. Start simple, and you can always add complexity as your needs grow.

If you need help getting started or want hosting with more support for WordPress or other CMS platforms, check out 330 Hosting for managed WordPress hosting with full support.

Related Articles:

← How to Build Your Own Website in 2026