Cloudflare Pages based Social Landing Site

David Pacold

• 3 min read

I was in a workshop where one of my colleagues had shown in a presentation a QR code to scan and follow him on LinkedIn. As we are now all over different social media networks, I wanted to create a landing page using Cloudflare pages to link out to all my various social media sites.

This tutorial uses Cloudflare pages and a Hugo-based site to aggregate all the links.

This workflow will also be an introduction into to the concepts of continuous development and continuous integration or "DevOps" model where we are managing a code repository and when we commit our updated code to your github repository, a workflow will automatically run, which will build the pages with your latest code changes deploy them to Cloudflare Pages.

Example of what we will be creating

My site is at: https://connectwith.davidpacold.dev 

My generated QR code to embed in presentations or share in other places

Setup a Github account

If you don't have a GitHub account, now is the time to set one up! 

  • Begin by registering for a new account if you don't have one
  • https://github.com/signup
  • A free account is all you need for this project, so when setting it up you can take the basic defaults for everything.

Create a fork of the repository:

Once your account is set up, or if you have one already, we will create a fork of my project. 

  • Head to: https://github.com/davidpacold/social-media-landing
    • In the upper right click Fork
    • Accept the default name, or give it a new name as you wish
    • Click Create fork
    • This will create your own copy of the project in your personal GitHub repository that we will update 

Customize the content of the landing page:

Edit the Content of the project

  • This project contains a Google Analytics tag, and links to Social media pages like Twitter, Linkedin, Github, and email.
  • With the repository in your own Github profile you will want to update the links to your own accounts. 
  • Select the hugo.toml file and click the pencil to open the web editor.
  • update things like title, subtitles, descriptions, and the link addresses

Setup a Cloudflare account if you don't have one yet:

If you don't have a Cloudflare account, just like with Github, now is the time to get one! Like Github, at this point all we need is a free account. 

  • Start by registering for an account:
  • https://dash.cloudflare.com/sign-up

Link Cloudflare Pages to your Github repository and deploy your page: 

When you have the Hugo.toml file updated we want to publish the site via Cloudflare Pages

Log into your Cloudflare dashboard and out the account level select Workers & Pages

  • Create Application → Pages
  • Connect to Git
  • Authorize Cloudflare and Git to talk with each other 
  • Select your Repository
  • Begin Setup
  • Use hugo as the template
  • Production Branch: Main
  • Build Command: hugo
  • build directory: public
  • Save and Deploy
  • This will deploy using a unique sub domain for your site in the Pages.dev domain. You can preview your site and verify your links and text are all as you wish. 
  • Your site may not look correct at this point, like the theme hasn't really loaded. Let's fix that. 
  • Copy the domain field from the Cloudflare dashboard
  • Go back to github and like before edit your hugo.toml file
  • Select the hugo.toml file and click the pencil to open the web editor.
  • update the baseurl field, to be the url we just copied in the previous step
  • Click the green Commit changes button, add any notes if you wish, with the commit directly to the main branch selected click Commit changes again.
  • With the change committed Cloudflare will pick up the new update to the hugo file and automatically rebuild and redeploy your site
  •  Monitor deployment
  • In the Cloudflare Dashboard, you will see a new deployment in progress when it is complete you can refresh your page tab and see the updated site, at this point it should look complete! 
  • Make any other changes as you wish -
  • Following the same steps above, you can change link address, text, etc.. and it will always push the latest changes to your site automatically.

Generate your QR Code:

To generate your QR code that you can embed into your presentations, add to business cards, etc.. open a new browser tab and go to: