How to make URLs pretty using Netlify
Tags: netlify, html, css, webdev
Published: 2022-04-22 11:02:33

When you visit a static site, by default the `.html` extension is visible in the URL, for example `/about.html`, or `/contact.html` however on modern sites we see today, the extension is hidden. These URLs that have the extension hidden are called pretty URLs, also known as user-friendly URLs.

Their purpose according to [Wikipedia](https://en.wikipedia.org/wiki/Clean_URL) is to improve the usability and accessibility of a website or web service by being immediately and intuitively meaningful to non-expert users. Example of these pretty URLs are: [netlify.com/about](https://netlify.com/about) or [hashnode.com/about](https://dev.to/about).

_Here's what the URL looks like by default_
![not-so-pretty.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1650574690545/Or7w4ydEL.gif)

Want to know how you can rewrite them in your static html, css, and/or Javascript site and make them look pretty using [Netlify](https://netlify.com)? Here are the steps on how to do that.

### Step 1. Create a Netlify Account
If you haven't already, navigate to their website, create an account and sign in. 

### Step 2. Import your project
If you have already uploaded your project to Netlify, then skip to **Step 3**. There are two ways of importing your project to Netlify, dragging and dropping or using a version control platform like GitHub, Gitlab, or BitBucket.

For simplicity, we'll be using the drag and drop feature and for the code, I'm using Netlify's [parody site](https://github.com/netlify/netlify-drop-demo-site/archive/master.zip). I updated it a little and added an about and contact page so we can see the changes when we switch between them. 

![netlify-drop.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650574884608/pNaR2yjm4.png)

Visit https://app.netlify.com/drop, drag the Netlify parody site, and drop it into the dashboard. 
This will propagate for a few minutes and when it's done, a link will be auto-generated by Netlify that we can visit to see our project live. 

![not-so-pretty-url.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650575338317/K7mVXKREy.png)

 ### Step 3. Enable Pretty URLs
To do this, click the **deploy** link on the top > **deploy settings**.

![deploy-settings.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650575799262/GbRQcMQX8.png)

Under **post processing**, scroll down to **asset optimization**, click the **edit settings** button, and check only **pretty URLs** then hit save. 

![asset-optimizations.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650576376292/3xOp4wcKF.png)

Now refresh the page to see the pretty URL. 🙂

[https://tangerine-kitten-8b320c.netlify.app](https://tangerine-kitten-8b320c.netlify.app/)

![pretty-url.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1650577546464/W0AyrdE4r.gif)

If you found this article helpful, leave a comment below or follow me for similar content and I'll see you in the next series, bye. 👋🏽

### Important Links
<a href="https://github.com/Evavic44/pretty-urls">GitHub Repo</a></br>
<a href="https://github.com/netlify/netlify-drop-demo-site/archive/master.zip">Netlify Parody Site</a></br>
<a href="https://app.netlify.com/drop">Netlify Drop</a>