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
Cloudflare account
Github account
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!
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:
https://www.the-qrcode-generator.com/
Paste your url into the enter url field
Click the download button above the QR code to save an image file.