Building a Social Media Landing Page with Astro, Bulma, and Cloudflare

Image generated by ChatGPT

Introduction

A while ago, I got the idea to make a social media landing page for my website. The idea was to mimic the look ofLinktree, but maintain full control of the experience. My first exposure to this concept came from the, now archived, Software Ideas newsletter. The approach outlined in the newsletter was to create a competitor service, but for my own project I figured I'd start with a very limited scope.

Admittedly, I'm not a very big user of social media and creating something like this was just for getting the learning experience. Also, I thought it would be interesting to experiment with different experiences depending on where a user comes from. Right now, I most of my traffic comes from links to specific blog posts. For a while, I've been linking my home page on social media. However, I feel like that's a little too "old school" for the kinds of traffic one might get off of larger platforms.

With that being said, here's how I went about doing it.

Designing the Layout

As far as the design process was concerned, I didn't really put all that much effort into it. Since my goal was to mimic a Linktree page, I was able to look at guides like this one titled 4 Great Examples of Linktree in Action.

After looking at similar elements, I decided to include the following features:

• Centered photo at the top of the page.
• Vertical list of links with icons.

As far as to what links I would include, I decided on:

• My website's homepage.
• A direct link to my website's blog page.
• A direct link to my website's photo page.
• A link to my dev.to profile page.
• A link to my GitHub profile.

Of course, I came to the realization this is essentially just a different view of my website's navigation bar. The main advantage of this being I can customize the look and feel for people coming off of social media apps. A secondary advantage is that I could put custom code on it to emit metrics later on if I feel like it. For example, I could use it to track the number of visits I get off of social media. This could be achieved by creating a separate page in the codebase thus tying it to a distinct URL, as opposed to making it a specific view of the homepage. This leads us to the next section.

Developing the Social Landing Page

As implied by the title of this post, I ended up developing this as a separate page within my Astro project instead of creating a different layout for the homepage. The new page is called social, and is hidden from search engine indexing.

First, I created the page /src/pages/social.astro:

---
import { icon } from "@fortawesome/fontawesome-svg-core";

import ProfilePic from "../components/ProfilePic.astro";
import Page from "../layouts/Page.astro";

import { faGlobe, faNewspaper, faCamera } from "@fortawesome/free-solid-svg-icons";
import { faDev, faSquareGithub } from "@fortawesome/free-brands-svg-icons";

const webSiteIcon = icon(faGlobe).html;
const blogIcon = icon(faNewspaper).html;
const photosIcon = icon(faCamera).html;
const devToIcon = icon(faDev).html;
const gitHubIcon = icon(faSquareGithub).html;

const links = [
  {
    icon: webSiteIcon,
    title: "Logarithmic Spirals",
    url: "https://logarithmicspirals.com"
  },
  {
    icon: blogIcon,
    title: "Blog",
    url: "https://logarithmicspirals.com/blog"
  },
  {
    icon: photosIcon,
    title: "Photos",
    url: "https://logarithmicspirals.com/gallery"
  },
  {
    icon: devToIcon,
    title: "dev.to",
    url: "https://dev.to/logarithmicspirals"
  },
  {
    icon: gitHubIcon,
    title: "GitHub",
    url: "https://github.com/h93xV2"
  }
];
---

<Page title="Social | Logarithmic Spirals" description="Social landing page for Logarithmic Spirals" hasNavBar={false}>
  <div class="is-flex is-justify-content-center">
    <ProfilePic />
  </div>
  <div class="mt-6 is-flex is-justify-content-center">
    <div class="social-link-container">
      <ul>
        {
          links.map((link) => {
            return <li class="card">
              <span class="mb-5 card-content has-text-centered">
                <a href={link.url} class="nostyle social-link">
                  <span class="columns is-vcentered is-mobile"> 
                    <span class="column is-one-quarter">
                      <i class="social-icon-wrapper is-flex is-justify-content-center" set:html={link.icon} />
                    </span>
                    <span class="column has-text-centered">
                      {link.title}
                    </span>
                  </span>
                </a>
              </span>
            </li>
          })
        }
      </ul>
    </div>
  </div>
</Page>

The main idea here is the same core markup used on this page is the same markup used on all the other pages. Hence, there's a hasNavBar property on the Page component. This property allows me to use one common layout (head tags, common style classes, etc.). This reduced the amount of time it took me to develop this page since I didn't have to do it from scratch.

Additionally, I updated my public/robots.txt file:

User-agent: *
Disallow: /social

Lastly, I had to update the sitemap to not include the new page. To do this, I updated my astro.config.mjs file:

integrations: [
  mdx(),
  sitemap({
    filter: (page) => page !== 'https://logarithmicspirals.com/social/',
  }),
  react()
],

Creating a Subdomain

For the last part of this, I also wanted my page to be accessible through a subdomain simply because I think social.logarithmicspirals.com looks better than logarithmicspirals.com/social when visiting from a shortened URL. For example, the former might get truncated to social.logarithmic... whereas the latter might be logarithmicspiral...which hides the /social path.

Essentially, I just followed the instructions given by Cloudflare in theirset up redirectsdocumentation.

I'm sure it's possible to do this without a redirect, but the only other way I could find to do this would be with Cloudflare Workers. While this seems possible, I'm not very interested in it right now since that could incur costs and I'm trying to operate this site at $0 per month.

Conclusion

After completing the creation of my new landing page, I'm now able to direct visitors from social media apps to my different links via social.logarithmicspirals.com. This new setup not only enhances the user experience by providing a clean, dedicated interface for social media visitors but also gives me the flexibility to track and analyze traffic specifically coming from these platforms. With a custom subdomain, I can ensure a professional and seamless user journey, reflecting the unique branding of my website. This project has provided valuable insights into using Astro, Bulma, and Cloudflare, and I look forward to exploring more enhancements in the future. Whether you're looking to improve your own web presence or simply experimenting with new web development tools, I hope this guide has been informative and inspiring. Happy coding!