Rotating BH banners for mods with more than one author

BH-banners.md

Last updated: June 2024

This is a guide on how to create your own rotating BH banner (or another other image) which can be used in mod description pages and anywhere else that supports loading images with URLs. This is especially useful if you have more than one author on a mod and want to split the BH ad traffic.

Example:

This banner will change periodically depending on how long the image is being cached for. It also redirects you to a random partner link when it is clicked.

Requirements

• An account at https://vercel.com/
• The Bun runtime - follow instructions at https://bun.sh/ to install

Note on Pricing

We will be setting up a Vercel edge function which serves as a server to redirect incoming image requests. Vercel currently offers 500,000 free execution units per month for edge functions, which roughly corresponds to 500,000 hits to the server. You should test your setup for a month to see if you are likely to go over this quota, in which case you will need to find another hosting service or pay for Vercel Pro.

Let's go!

1. Clone the copycats-site repository

I originally created this for the Create: Copycats+ mod, and instead of writing your own edge function from scratch, it is much easier to modify this existing solution to your needs.

Prepare an empty directory on your PC, then run:

git clone https://github.com/copycats-plus/copycats-site.git

After cloning, you need to rename the copycats-site folder to something specific. This is important because it decides the name of your Vercel project and the sub-domain name of your banner link.

2. Install dependencies

Bun is an all-in-one JavaScript runtime that will install all dependencies for us. If you are familiar with JS package management, feel free to use any other package manager. The JS runtime doesn't matter because the code is always executed in a Node runtime on Vercel.

In the same directory where you cloned copycats-site:

# Enter the folder
cd folder-name-of-your-site

# Install dependencies
bun i
bun i -g vercel

3. Modify code to suit your needs

You only need to care about two files for the typical use case:

• api/banner.ts decides which banner image to use when one is requested. Modify the list of image URLs there to return your banners.
• api/link.ts decides which URL to redirect to when a banner is clicked. Modify the list of URLs there to your partner links.

4. Deploy to Vercel

Make sure you are in the copycats-site folder (or whatever folder you renamed it to).

Run the following and sign in to Vercel when asked:

# Sign in to Vercel
vercel login

# Deploy to Vercel
# When asked, leave all options at default
vercel deploy

5. (Optional) Push code to GitHub

Vercel integrates with GitHub repositories seamlessly, so if you want to easily modify the code and redeploy in the future, you can push code to GitHub and select "Connect Git repository" at your Vercel homepage https://vercel.com/

6. Add the banner to your mod description

To get the link to your banner, go to your Vercel homepage https://vercel.com/

Click on your project and go to Settings > Domains, then copy the domain name you see on this page, which should look like name-of-your-site.vercel.app.

Your image link is https://name-of-your-site.vercel.app/api/banner.

Your partner link is https://name-of-your-site.vercel.app/api/link.

To add the banner to your markdown: [![BisectHosting](https://name-of-your-site.vercel.app/api/banner)](https://name-of-your-site.vercel.app/api/link)

If a website caches your image for too long, you can force an update by adding ?v=<random number> to your image link (e.g. https://name-of-your-site.vercel.app/api/banner?v=42)

Done!