First steps using Cloudflare Pages
My personal blog, jldec.me, is hosted on Netlify. Whenever I push markdown to GitHub, Netlify runs a build and publishes the HTML.
Cloudflare recently announced a similar offering called Cloudflare Pages. I was lucky enough to be given access to the Beta.
Unlike Netlify, Cloudflare Pages does not meter request traffic. š
Cloudflare Pages (Beta)
This is a walkthrough of setting up jldec.eu, a copy of jldec.me, on Cloudflare Pages.
If you have access to Cloudflare Pages, you will see this button when you login to Cloudflare.
The Pages button opens your Pages projects -- of which there are none at first -- and a button to Create a project.
This opens the GitHub form for granting repo access to the 'Cloudflare Pages' GitHub app. (Look for it later in your GitHub Settings to add more repos, or to revoke access.)
Back on Cloudflare, you can choose the repo for your new Cloudflare Pages project.
cloudflare-pages-test is a copy of my markdown source repo from jldec.me.
In the configuration form, I provided branch name, build command, and output directory.
The project name defaults to the repo name.
Submitting the form, triggers the first build and shows the log.
The project page also has a section for configuring custom domains. I used my own cloudflare-hosted domain jldec.eu. The docs can be a little confusing here. My CNAME points to cloudflare-pages-test.pages.dev not custom.pages.dev.
You can visit the deployed site at jldec.eu. šŖšŗ
Subsequent commits to this GitHub repo will trigger a fresh build and re-deploy.
GitHub Pages
For comparison, I set up jldec.uk, another copy of jldec.me using GitHub Pages.
First I created a new jldec.uk repo to host the GitHub Pages site. Since the output includes javascript bundles, fonts, etc., I prefer to keep it separate from the source.
I pushed the first generated website to this repo manually, using the output of a local build. The empty .nojekyll file is important to avoid a Jekyll build on GitHub.
Next I configured GitHub Pages in the repo settings (...looks familiar š)
You can visit the deployed site at jldec.uk. š¬š§
Finally I set up GitHub Actions to auto-build and auto-deploy the website when the source changes. This is triggered on push, does a checkout of both repos, and commits the new generated output, only when there are actual changes.
on:
push:
branches: [ main ]
workflow_dispatch:
jobs:
generate:
runs-on: ubuntu-latest
env:
JLDEC_UK: TRUE
steps:
- name: checkout source repo
uses: actions/checkout@v2
- name: checkout destination repo under ./out
uses: actions/checkout@v2
with:
repository: jldec/jldec.uk
token: ${{ secrets.GH_TOKEN }}
path: out
- name: generate output
run: |
npm ci
rm -r out/*
npm run generate
cd out
git config user.email "jldec@ciaosoft.com"
git config user.name "cloudflare-pages-test generate action"
git status
git add -A
if ! git diff-index --quiet HEAD ; then git commit -m 'https://github.com/jldec/cloudflare-pages-test/actions/runs/${{ github.run_id }}' && git push ; fi
echo done
Now every push triggers a new build and re-deploy.
Preserving the HTML site in git is useful for all kinds of reasons. E.g. here is part of a diff from a recent commit.
Conclusions
The developer experience of hosting a site with CloudFlare Pages is very similar to Netlify.
The Cloudflare Pages Beta does not yet support redirects and functions, but those are expected with the integration of Cloudflare Workers.
Automating builds and deploys onto GitHub Pages is more work, and requires knowledge of GitHub Actions if you're not using Jekyll. There are other gotchas with GitHub Actions if you want to support concurrent builds or preview builds.
The performance of all 3 platforms is excellent since they all serve static files from a CDN
šāāļø
To leave a comment
please visit dev.to/jldec
debug
user: anonymous
{
"path": "/blog/first-steps-using-cloudflare-pages",
"attrs": {
"title": "First steps using Cloudflare Pages",
"splash": {
"image": "/images/small-clouds.jpg"
},
"date": "2021-01-31",
"layout": "BlogPostLayout",
"excerpt": "This is a walkthrough of my first Cloudflare Pages (Beta) site, and a comparison with GitHub Pages."
},
"md": "# First steps using Cloudflare Pages\n\nMy personal blog, [jldec.me](https://jldec.me), is hosted on [Netlify](https://netlify.com). Whenever I push markdown to GitHub, Netlify runs a build and publishes the HTML.\n\nCloudflare recently [announced](https://blog.cloudflare.com/cloudflare-pages/) a similar offering called [Cloudflare Pages](https://pages.cloudflare.com/). I was lucky enough to be given access to the Beta.\n\nUnlike [Netlify](https://www.netlify.com/pricing/#features), Cloudflare Pages [does not meter](https://pages.cloudflare.com/#pricing) request traffic. š\n\n## Cloudflare Pages (Beta)\n\nThis is a walkthrough of setting up [jldec.eu](https://jldec.eu), a copy of [jldec.me](https://jldec.me), on Cloudflare Pages.\n\nIf you have access to Cloudflare Pages, you will see this button when you login to Cloudflare.\n\n\n\nThe Pages button opens your Pages projects -- of which there are none at first -- and a button to `Create a project`.\n\n\n\n This opens the GitHub form for granting repo access to the 'Cloudflare Pages' GitHub app. (_Look for it later in your [GitHub Settings](https://github.com/settings/installations) to add more repos, or to revoke access._)\n\n\n\nBack on Cloudflare, you can choose the repo for your new Cloudflare Pages project. \n[cloudflare-pages-test](https://github.com/jldec/cloudflare-pages-test) is a copy of my markdown source repo from [jldec.me](https://jldec.me).\n\n\n\nIn the configuration form, I provided branch name, build command, and output directory. \nThe project name defaults to the repo name.\n\n\n\nSubmitting the form, triggers the first build and shows the log.\n\n\n\nThe project page also has a section for configuring custom domains. I used my own cloudflare-hosted domain [jldec.eu](https://jldec.eu). The [docs](https://developers.cloudflare.com/pages/getting-started#add-a-custom-cname-record) can be a little confusing here. My CNAME points to `cloudflare-pages-test.pages.dev` not `custom.pages.dev`.\n\n\n\nYou can visit the deployed site at [jldec.eu](https://jldec.eu). šŖšŗ \nSubsequent commits to this GitHub [repo](https://github.com/jldec/cloudflare-pages-test) will trigger a fresh build and re-deploy.\n\n\n\n## GitHub Pages\n\nFor comparison, I set up [jldec.uk](https://jldec.uk), another copy of [jldec.me](https://jldec.me) using [GitHub Pages](https://pages.github.com).\n\nFirst I created a new jldec.uk [repo](https://github.com/jldec/jldec.uk/) to host the GitHub Pages site. Since the output includes javascript bundles, fonts, etc., I prefer to keep it separate from the source.\n\nI pushed the first generated website to this repo manually, using the output of a local build. The empty `.nojekyll` file is important to avoid a Jekyll build on GitHub.\n\n\n\nNext I configured GitHub Pages in the repo settings ([...looks familiar š](https://github.blog/2016-08-17-simpler-github-pages-publishing/))\n\n\n\nYou can visit the deployed site at [jldec.uk](https://jldec.uk). š¬š§ \n\nFinally I set up [GitHub Actions](https://github.com/jldec/cloudflare-pages-test/blob/main/.github/workflows/generate.yaml) to auto-build and auto-deploy the website when the source changes. This is triggered on push, does a checkout of both repos, and commits the new generated output, only when there are actual changes.\n\n```yaml\non:\n push:\n branches: [ main ]\n workflow_dispatch:\njobs:\n generate:\n runs-on: ubuntu-latest\n env:\n JLDEC_UK: TRUE\n\n steps:\n - name: checkout source repo\n uses: actions/checkout@v2\n\n - name: checkout destination repo under ./out\n uses: actions/checkout@v2\n with:\n repository: jldec/jldec.uk\n token: ${{ secrets.GH_TOKEN }}\n path: out\n\n - name: generate output\n run: |\n npm ci\n rm -r out/*\n npm run generate\n cd out\n git config user.email \"jldec@ciaosoft.com\"\n git config user.name \"cloudflare-pages-test generate action\"\n git status\n git add -A\n if ! git diff-index --quiet HEAD ; then git commit -m 'https://github.com/jldec/cloudflare-pages-test/actions/runs/${{ github.run_id }}' && git push ; fi\n echo done\n```\nNow every push triggers a new build and re-deploy.\n\n\n\nPreserving the HTML site in git is useful for all kinds of reasons. E.g. here is part of a diff from a recent [commit](https://github.com/jldec/jldec.uk/commit/0efb3e73ea2de797f9201b69803c70299be05a28).\n\n\n\n## Conclusions\n\nThe developer experience of hosting a site with CloudFlare Pages is very similar to Netlify.\n\nThe Cloudflare Pages Beta does not yet support redirects and functions, but those are expected with the integration of [Cloudflare Workers](https://workers.cloudflare.com).\n\nAutomating builds and deploys onto GitHub Pages is more work, and requires knowledge of GitHub Actions if you're not using Jekyll. There are other gotchas with GitHub Actions if you want to support concurrent builds or preview builds.\n\n> The performance of all 3 platforms is excellent since they all serve static files from a CDN \n> šāāļø\n\n\n_To leave a comment \nplease visit [dev.to/jldec](https://dev.to/jldec/first-steps-using-cloudflare-pages-40gp)_\n\n\n",
"html": "<h1>First steps using Cloudflare Pages</h1>\n<p>My personal blog, <a href=\"https://jldec.me\">jldec.me</a>, is hosted on <a href=\"https://netlify.com\">Netlify</a>. Whenever I push markdown to GitHub, Netlify runs a build and publishes the HTML.</p>\n<p>Cloudflare recently <a href=\"https://blog.cloudflare.com/cloudflare-pages/\">announced</a> a similar offering called <a href=\"https://pages.cloudflare.com/\">Cloudflare Pages</a>. I was lucky enough to be given access to the Beta.</p>\n<p>Unlike <a href=\"https://www.netlify.com/pricing/#features\">Netlify</a>, Cloudflare Pages <a href=\"https://pages.cloudflare.com/#pricing\">does not meter</a> request traffic. š</p>\n<h2>Cloudflare Pages (Beta)</h2>\n<p>This is a walkthrough of setting up <a href=\"https://jldec.eu\">jldec.eu</a>, a copy of <a href=\"https://jldec.me\">jldec.me</a>, on Cloudflare Pages.</p>\n<p>If you have access to Cloudflare Pages, you will see this button when you login to Cloudflare.</p>\n<p><img src=\"/images/cf-pages-beta.png\" alt=\"Cloudflare Pages Beta button on dashboard\"></p>\n<p>The Pages button opens your Pages projects -- of which there are none at first -- and a button to <code>Create a project</code>.</p>\n<p><img src=\"/images/cf-pages-create-a-project.png\" alt=\"Pages - Create a project\"></p>\n<p>This opens the GitHub form for granting repo access to the 'Cloudflare Pages' GitHub app. (<em>Look for it later in your <a href=\"https://github.com/settings/installations\">GitHub Settings</a> to add more repos, or to revoke access.</em>)</p>\n<p><img src=\"/images/cf-pages-github-app.png\" alt=\"Authorize Cloudflare Pages app on GitHub\"></p>\n<p>Back on Cloudflare, you can choose the repo for your new Cloudflare Pages project.<br>\n<a href=\"https://github.com/jldec/cloudflare-pages-test\">cloudflare-pages-test</a> is a copy of my markdown source repo from <a href=\"https://jldec.me\">jldec.me</a>.</p>\n<p><img src=\"/images/cf-pages-select-repo.png\" alt=\"Select repo for the Cloudflare Pages project\"></p>\n<p>In the configuration form, I provided branch name, build command, and output directory.<br>\nThe project name defaults to the repo name.</p>\n<p><img src=\"/images/cf-pages-configure-build.png\" alt=\"Configure the build command and output directory\"></p>\n<p>Submitting the form, triggers the first build and shows the log.</p>\n<p><img src=\"/images/cf-pages-build-log.png\" alt=\"First build and deploy showing log\"></p>\n<p>The project page also has a section for configuring custom domains. I used my own cloudflare-hosted domain <a href=\"https://jldec.eu\">jldec.eu</a>. The <a href=\"https://developers.cloudflare.com/pages/getting-started#add-a-custom-cname-record\">docs</a> can be a little confusing here. My CNAME points to <code>cloudflare-pages-test.pages.dev</code> not <code>custom.pages.dev</code>.</p>\n<p><img src=\"/images/cf-pages-custom-domain.png\" alt=\"Cloudflare Pages custom domain\"></p>\n<p>You can visit the deployed site at <a href=\"https://jldec.eu\">jldec.eu</a>. šŖšŗ<br>\nSubsequent commits to this GitHub <a href=\"https://github.com/jldec/cloudflare-pages-test\">repo</a> will trigger a fresh build and re-deploy.</p>\n<p><img src=\"/images/cf-pages-deployments.png\" alt=\"More deployments\"></p>\n<h2>GitHub Pages</h2>\n<p>For comparison, I set up <a href=\"https://jldec.uk\">jldec.uk</a>, another copy of <a href=\"https://jldec.me\">jldec.me</a> using <a href=\"https://pages.github.com\">GitHub Pages</a>.</p>\n<p>First I created a new <a href=\"http://jldec.uk\">jldec.uk</a> <a href=\"https://github.com/jldec/jldec.uk/\">repo</a> to host the GitHub Pages site. Since the output includes javascript bundles, fonts, etc., I prefer to keep it separate from the source.</p>\n<p>I pushed the first generated website to this repo manually, using the output of a local build. The empty <code>.nojekyll</code> file is important to avoid a Jekyll build on GitHub.</p>\n<p><img src=\"/images/gh-pages-repo.png\" alt=\"GitHub Pages repo\"></p>\n<p>Next I configured GitHub Pages in the repo settings (<a href=\"https://github.blog/2016-08-17-simpler-github-pages-publishing/\">...looks familiar š</a>)</p>\n<p><img src=\"/images/gh-pages-settings.png\" alt=\"GitHub Pages settings\"></p>\n<p>You can visit the deployed site at <a href=\"https://jldec.uk\">jldec.uk</a>. š¬š§</p>\n<p>Finally I set up <a href=\"https://github.com/jldec/cloudflare-pages-test/blob/main/.github/workflows/generate.yaml\">GitHub Actions</a> to auto-build and auto-deploy the website when the source changes. This is triggered on push, does a checkout of both repos, and commits the new generated output, only when there are actual changes.</p>\n<pre><code class=\"language-yaml\">on:\n push:\n branches: [ main ]\n workflow_dispatch:\njobs:\n generate:\n runs-on: ubuntu-latest\n env:\n JLDEC_UK: TRUE\n\n steps:\n - name: checkout source repo\n uses: actions/checkout@v2\n\n - name: checkout destination repo under ./out\n uses: actions/checkout@v2\n with:\n repository: jldec/jldec.uk\n token: ${{ secrets.GH_TOKEN }}\n path: out\n\n - name: generate output\n run: |\n npm ci\n rm -r out/*\n npm run generate\n cd out\n git config user.email "jldec@ciaosoft.com"\n git config user.name "cloudflare-pages-test generate action"\n git status\n git add -A\n if ! git diff-index --quiet HEAD ; then git commit -m 'https://github.com/jldec/cloudflare-pages-test/actions/runs/${{ github.run_id }}' && git push ; fi\n echo done\n</code></pre>\n<p>Now every push triggers a new build and re-deploy.</p>\n<p><img src=\"/images/gh-pages-builds.png\" alt=\"GitHub Pages builds using GitHub Actions\"></p>\n<p>Preserving the HTML site in git is useful for all kinds of reasons. E.g. here is part of a diff from a recent <a href=\"https://github.com/jldec/jldec.uk/commit/0efb3e73ea2de797f9201b69803c70299be05a28\">commit</a>.</p>\n<p><img src=\"/images/gh-pages-diff.png\" alt=\"GitHub Pages diff\"></p>\n<h2>Conclusions</h2>\n<p>The developer experience of hosting a site with CloudFlare Pages is very similar to Netlify.</p>\n<p>The Cloudflare Pages Beta does not yet support redirects and functions, but those are expected with the integration of <a href=\"https://workers.cloudflare.com\">Cloudflare Workers</a>.</p>\n<p>Automating builds and deploys onto GitHub Pages is more work, and requires knowledge of GitHub Actions if you're not using Jekyll. There are other gotchas with GitHub Actions if you want to support concurrent builds or preview builds.</p>\n<blockquote>\n<p>The performance of all 3 platforms is excellent since they all serve static files from a CDN<br>\nšāāļø</p>\n</blockquote>\n<p><em>To leave a comment<br>\nplease visit <a href=\"https://dev.to/jldec/first-steps-using-cloudflare-pages-40gp\">dev.to/jldec</a></em></p>\n"
}