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

Introduction

Note (April 9, 2026): This post references a former photo page on the site. The gallery behind that page has since been retired.

A while ago, I got the idea to make a social media landing page for my website. The idea was to mimic the look of
Linktree, 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 their
set up redirects
documentation.

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!