Pretty URLs and .htaccess rewrite rules
OK. So, now that you’ve gotten plenty of experience with query strings and building your own PHP portfolio framework, you probably want to show it to people. And you probably thought those funky URLs were a bit funky.
Well, here’s how you can make em pretty as a pig.
What are we doing?
The code you'll need.
<?php define('BASE_URL', 'http://portfolio.site:8888');
This would be an untracked file that you wouldn’t have in your repo. This is because each developer and each version of the code will be in a different place. A common way to do this is to have an
example-config.php or something so they know what to do. This file would be in the root of your project (the way we’ve done it).
(and remember / don’t commit this to git / ignore it)
(and you need one for each server too, right?)
<html lang='en'> <head> <meta charset='utf-8'> <base href="<?=BASE_URL?>" /> ...
However you have your
<head> partialed out – that’s where it would be.
<nav class='site-menu'> <ul> <li> <a href='/'>Home</a> </li> <li> <a href='/about'>About</a> </li> <!-- and for for detail pages --> <a href='projects/<?=$slug?>'>Visit</a>
Your links will go back to how they were before the querystring links.
# comment # turn rewriting on RewriteEngine On # /page-name → ?page=page-name RewriteRule ^([0-9a-zA-Z_-]+)$ ?page=$1 [NC,L] # /projects → ?page=projects # getting tangled up with the next one? # /projects/project-name → ?page=projects&slug=project-slug RewriteRule ^projects/([0-9a-zA-Z_-]+)$ ?page=project&slug=$1 [NC,L]
This is where you’ll write the rewrite rules. When you click the
/about link, it will rewrite the HTTP request to be
?page=about behind the scenes. This file will be in the root of your project. You can use the project details example to fit your needs.
Note: So far, we haven’t figured out a way to deal with
/projects as a link – and also
/projects as a real folder with the projects inside of it. There seems to be some confusion there and it will try and visit the folder and ignore the redirect? We’re not totally sure. Trying to get a better answer for why this is a problem. Our solution so far was to rename the folder to
_projects or something else. (in that case any reference to it in the includes etc. would need to be updated as well).
Another helpful video
Semantic URL htaccess Tutorial SEO Friendly Clean Links Rewrite
Adam has a much nicer voice than Derek.
Derek mentioned those [NC, L] things in the video. Here’s some info about what those do.
Unfortunately, there’s no anchor link to get to that part of the page, but here’s what it looks like – and here’s the link: https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html
Watch Derek go through it and hit lots of confusion
Internet and FTP is being insane / so – gotta wait on this to get the code up on the server…