Cloudflare Pages Social Landing Site

Overview

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.

Requirements

Example of what we will be creating

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

QR Codes that can be added to slides, websites, etc.. 

Step-by-step guide

Setup a Github account

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

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. 

Customize the content of the landing page:

Edit the Content of the project

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. 

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



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: