Easily redirect to your social profiles with Netlify

Imagine having all your social media link under your domain, makes it so easy to remember and you can easily list all of them when talking to folks.

You can easily leverage the redirect options given by Netlify.

If you were to do it in your framework or a web server, it needs changes in config flies like .htaccess or adding code to your routing in your app.

Netlify solves this in two ways while keeping it simple.

1. The _redirects File

In a _redirects file, each redirect rule must be listed on a separate line, with the original path followed by the new path or URL. Any line beginning with # will be ignored as a comment.

Lets say your website is hosted on thelostdev.com and you have an active youtube, Instagram and a hashnode blog

Here is an example how you would setup your _redirects file:

# we can add :splat to open the right blog article 
# when you open /blog/article-slug
/blog/*           https://blog.thelostdev.com/:splat    301
# Social redirects 
/instagram/*      https://instagram.com/thelostdev      301
/youtube/*        https://youtube.com/thelostdev        301

You can customize and alter the redirect behavior by adding options to the end of each line such as HTTP status code, country conditions, or language conditions.

2. The Netlify config (netlify.toml) file

If you specify your redirect rules in your Netlify configuration file, you can use a more structured configuration format with additional capabilities such as signed proxy redirects.

[[redirects]]
  from = "/instagram/*"
  to = "https://instagram.com/thelostdev"
  status = 301

[[redirects]]
  from = "/youtube/*"
  to = "https://youtube.com/thelostdev"
  status = 301

[[redirects]]
  from = "/blog/*"
  to = "https://blog.thelostdev.com/"
  status = 301

## This rule redirects to an external API, signing requests with a secret
[[redirects]]
  from = "/search"
  to = "https://api.mysearch.com"
  status = 200
  force = true # COMMENT: ensure that we always redirect
  headers = {X-From = "Netlify"}
  signed = "API_SIGNATURE_TOKEN"

Testing the redirects

A great way to see these redirects in action before deploying them to the live site would be to test them locally with the CLI.

To install Netlify CLI, make sure you have Node.js version 12.20.0, 14.14.0, 16.0.0, or later.

Then, run this command from any directory in your terminal:

npm install netlify-cli -g

And the Get Started with using the CLI. Before using Netlify Dev, you must authenticate and make sure your site is linked to a Netlify siteID. You can do that by setting up continuous deployment with netlify init or linking your site with netlify link.

To start a local development server for the build tool you’re using, run the following command from the root of your linked repository:

netlify dev

And typically you would have your app running on localhost:8888 and you can open /instagram to see the magic happen.

Time to deploy

We'll you have used netlify already, so no point me telling you how, you can either push the site to your main branch, your 'pr' branch, or just push it directly to netlify. To get started with manual deploys, run the following command from your project directory:

netlify deploy

Wait for it to deploy and profit...

Are you an Open Source Enthusiast? Please consider subscribing to my newsletter. Join many other enthusiasts on a journey in building and advancing open-source projects

Prikesh Savla