Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for How to make URLs pretty using Netlify
Victor Eke
Victor Eke

Posted on • Originally published ateke.hashnode.dev

     

How to make URLs pretty using Netlify

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 toWikipedia 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 orhashnode.com/about.

Here's what the URL looks like by default
not-so-pretty.gif

Want to know how you can rewrite them in your static html, css, and/or Javascript site and make them look pretty usingNetlify? 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 toStep 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'sparody site. 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

Visithttps://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

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

deploy-settings.png

Underpost processing, scroll down toasset optimization, click theedit settings button, and check onlypretty URLs then hit save.

asset-optimizations.png

Now refresh the page to see the pretty URL. 🙂

https://tangerine-kitten-8b320c.netlify.app

pretty-url.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

GitHub Repo
Netlify Parody Site
Netlify Drop

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Frontend developer who is passionate about building ideas and projects in open source communities. Interested in learning, sharing, and collaborating with people.
  • Location
    Remote
  • Education
    University of the People
  • Work
    Software Engineer
  • Joined

More fromVictor Eke

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp