This article shows you how to create a simple prank site that redirects to Rick Astley's Never Gonna Give You Up on YouTube. You don't even need to know how to code. (Seriously. Zero skills required. But having some wouldn't hurt.)
Step 1: Create a repository on GitHub
Go to your list of repositories in GitHub and click the "New" button. You'll be sent to a form where you'll enter some basic info:
Pick a name for your repository. Try not to choose something that screams "this is totally a prank" (unlike what I did in the screenshot). But honestly, it won't matter if you complete Step 4 (optional).
Make sure the repo is Public so it can be accessed on the web. We'll talk more about that in Step 2.
Step 2: Make the repository web-accessible
Congrats! You made a repository. But you're not going to prank anyone if they can't visit it, right? Let's put it out into the world. Head to the Settings tab and look for the Pages section in the left-hand menu:
All you need to do is select a branch and hit Save. Once that's done, a new option will show up asking about a custom domain. You don't need one, but having something slicker than a github.io URL can really sell the joke (more on that in Step 4).
After this step, the page is live! Congratulations (again)! You can now access it at: https://[YOUR_GITHUB_USER].github.io/[YOUR_REPOSITORY_NAME]. Example: Mine's https://alvaromontoro.github.io/prank-web/. (Yes, it works. And no, it doesn't redirect to the rick roll... yet!)
Step 3: Create a fake landing page
This is where the fun begins. Don't worry, you still don't need to know how to code —though it would help you understand what's going on. But hey, I'm not here to judge. Just to prank.
Go back to the repo and click "Add file". You'll see —yep, you guessed right— another form:
When naming the file, go with something like: [PRANK_NAME]/index.html. This is important: [PRANK_NAME] should be meaningful and believable. It becomes part of the URL, and like with your repo name, you want it to sound believable and legit.
The index.html file is what web servers look for by default. Copy the following code in the textarea:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="[KEYWORDS]" />
<meta name="description" content="[DESCRIPTION]" />
<meta property="og:title" content="[TITLE]" />
<meta property="og:type" content="website" />
<meta property="og:url" content="[URL]" />
<meta property="og:image" content="[IMAGE]" />
<meta property="og:description" content="[DESCRIPTION]" />
<meta name="twitter:card" content="[TITLE]" />
<meta name="twitter:url" content="[URL]" />
<meta name="twitter:title" content="Home" />
<meta name="twitter:description" content="[DESCRIPTION]" />
<meta name="twitter:image" content="[IMAGE]" />
<title>[TITLE]</title>
<meta http-equiv="refresh" content="0;URL='https://www.youtube.com/watch?v=dQw4w9WgXcQ'" />
<script>window.location.href='https://www.youtube.com/watch?v=dQw4w9WgXcQ';</script>
</head>
<body>
[CONTENT]
</body>
</html>Now, swap in the real values. Remember they will beused to populate the media card on social media:
- [TITLE]: Keep it short and direct. Make it sound official. [DESCRIPTION]: Make it longer: 2-4 sentences. Enough to populate the card and sell the prank.
- [IMAGE]: This must be an absolute URL (e.g., https://alvaromontoro.github.io/prank-web/image.jpg) pointing to a real image hosted online. Maybe have AI generate something and upload it.
- [URL]: The full URL that social media should preview. It should match the URL that you will be sharing.
- [KEYWORDS]: Optional. Old-school SEO vibes. Why not?
- [CONTENT]: Not really necessary (the redirect will happen instantly so no one will see it), but good to have in case something breaks. Plus, it gives SEO points.
Oh, and the two YouTube links at the bottom? They both lead to the same video. Rick Astley's Never Gonna Give You Up in glorious 4K. Because we're classy like that.
If you want to see an example with all the fields filled in, check the source code of msft.media/vibecodes on GitHub.
Step 4 (Optional): Use a custom domain
Now we're getting into gray territory. This is the same trick phishing campaigns use. The kind of thing that your company's security team begs you to avoid. But hey, we're doing it for laughs... right?
Thanks to the explosion of new top-level domains (TLDs), it's easier than ever to mimic legit sites. Take Medium, for example:
- Legit: medium.com, help.medium.com, miro.medium.com...
- Fake: medium.news, com.medium.help, medium.support...
Creepy.
A few years ago, I bought msft.media to post fake April Fools' stories about Microsoft. It's not affiliated with Microsoft (and when I started working at a Microsoft subsidiary, I thought I could get in trouble), but it looks legit enough to fool a few people. And hey, if your grandma believed the giant bread horse was real, she'll believe msft.media is the real deal, too!
Again, this is not a good practice and is what phishing campaigns do. Don't use this knowledge for evil... do pranks count as evil?
So, if you don't want to buy a domain, don't buy it. And if you want to buy one, go for it. Then go back to Step 2 and update your GitHub Pages settings. You'll get a list of DNS records. Plug those into your domain provider's settings, wait a bit, and voilà: your prank site will be running on your own domain.
Step 5: Share on social media
You've got a working site. It's public. It's polished. It's perfect. Now go to your favorite social platform, write something catchy, and share your link.
But when someone clicks on it... Rickroll!
Let me know if you try this prank, or if you want help making it even more mischievous.