So my friend Josh and I have been building a website and online presence for the program we teach in (The PLTW Biomedical Sciences Program at Bel Air High School) for a few years. We were tasked this summer to do the same thing for the whole school. Because of URL availability, we decided to brand Bel Air High School as myBAHS.
I’ll write more about the overall process later, but today I am going to share a basic trick to make free branded links to any online resource using something called .htaccess.
We wanted to make a few standard social accounts under the myBAHS brand so we decided on Twitter, YouTube, and Flickr.
With varying success, we were able to jump through hoops to get custom URLs for the various sites, but we wanted a simpler and more streamlined way to share our profiles through signs and verbal communication.
We decided to investigate URL redirects as a solution.
After reaching out to our hosting provider Dreamhost (who is awesome) we got the advice to look into .htaccess redirects.
When I looked into this, it seemed like this type of thing was considered child’s play in web developer world so most of the information/directions I found actually had a few gaps. Eventually, I assimilated enough information to fill those gaps, so here is what I synthesized from all the different sources.
How To Create a 301 Redirect Using a .htaccess File
- I used my FTP client Transmit to connect to my server.
- Once connected, I entered the folder for my domain.
- Then I created folders in this folder for each link I wanted to create.
- This was a touch confusing and the name of the folders I created ended up being the “page” portion of my URL i.e., mybahs.com/youtube.
- See our 4 redirects here:
- Inside of each folder, I created a file called .htaccess
- I only needed one line of code in each of these files. Here is the code for our YouTube link (The color is only for explanation don’t try to change the color of your code):
Redirect 301 /youtube/ https://www.youtube.com/channel/UCz7JabRVcO06gPkahqKyBUQ
- The blue portion is the command. Redirect 301 tells the machine that it is going to be swapping out the URL of the red portion and replacing it with the URL found in the green portion.
- The spacing in between each color section matters (it is one space, but it needs to be there)
- I made sure to save this file correctly
- Only one .htaccess file per folder
- The correct .htaccess file is in the correct folder.
We now have a way to easily create “clean”, branded, and custom links to any resource we need to.
The four we have right now are:
This is great for consistency and also for dealing with errors if someone types in the wrong address they are still landing on our website!