SEO friendly URLs

[MartinMuzatko]

Right now, the only workaround is to create README.md files in folders, which are generated as index.html.

Since this is a static site generator to be deployed to almost all platforms (apache, node, nginx) this might be a bit more trickier to set up.

A start would be to have more fine-grained control about which file is used as an index.html (README.md is a bit github centric, which is fine for the start)

I don't know if the workaround should be entirely on the rendered output side. But maybe an alternative to providing a .htaccess file or node server with routes based on output, is to create folders for subpages and create subpage/index.html instead.

This is also related to the Blog support roadmap (#36)

[rafalolszewski94]

Wouldn't it be good idea to make reflecting names ?

For example: index.md would output index.html ?

[ulivz]

@MartinMuzatko

Don't know if it's what you want, assume you has following structure:

├── guide.md
├── help.md
└── README.md

The setting with .htaccess would be like this:

guide.md: '/guide/'
help.md: '/help/'

And if want to refer a anchor link e. g. #title from guide.md, At README.md, you can use /guide#title, That looks good.

[mdaffin]

Every static web server I have seen will serve index.html by default when you go to a directory with the URL. So generating slug/index.html should be enough for all major web servers to work with clean URLs (ie /slug/). Currently, you have to create slug/README.md which makes raw posts look a bit weird and makes managing them a little harder. It would be nicer if you could configure it so all slug.md files produced a slug/index.html instead of slug.html.

Note that with the current rules both README.md and index.md create index.html in a directory but if you have both then README.md takes precedence. Personally, I prefer to use index.md.

Note that not many web static servers support .htaccess files, notably Github pages and Gitlab pages and Netlify do not which I suspect will be a popular deployment platform for sites generated with vuepress. It is only Apache that supports .htaccess which makes it a terrible work around.

[mdaffin]

Small note: Although it looks like slug/index.md and slug/README.md both generate slug/index.html resolving links to /slug/ only looks for /slug/README.md and creates a warning if that does not exist:

File for relative link "/blog/archlinux-repo-in-a-git-repo/" does not exist.
(Resolved file: /home/mdaffin/projects/personal/disconnected.systems/site/blog/archlinux-repo-in-a-git-repo/README.md)

 @ ./node_modules/vuepress/lib/app/.temp/routes.js 36:8-113
 @ ./node_modules/vuepress/lib/app/app.js
 @ ./node_modules/vuepress/lib/app/clientEntry.js
 @ multi ./node_modules/vuepress/lib/app/clientEntry.js

[MartinMuzatko]

Will go for a folder + index.md for each and every page I write. This way, I can also encapsulate the required assets on that page.

A major concern left, is to make netlify redirect url/articles/building-a-blog-with-vuepress to url/articles/building-a-blog-with-vuepress/ in order for index.html to work.

Vuepress already does that, as it looks like on their website. https://vuepress.vuejs.org/guide redirects to https://vuepress.vuejs.org/guide/

~May I ask how that was realized @yyx990803 ? I wonder if that is something vuepress has to be concerned with or that netlify or other deployment platforms can take care of.~ Netlify takes care about the proper redirect. Wow!

[MartinMuzatko]

By the way: relative links in markdown are checked by vuepress. I get a warning for this: [Articles](/articles/) but not for [Articles](/articles/index.md). In order to use SEO friendly URLs, I should be able to either link to /articles/ or have it turned into /articles/ when I reference /articles/index.md

[yyx990803]

Relative check for index.md has been fixed in 52d6672

[TomPichaud]

It would also help to support NetlifyCMS if VuePress could generate a clean URL for any MD file. Instead of needing to generate a folder + an index.md

[ulivz]

We're closing this issue as stale as it's more than 20 days without activity, and without an associated Pull Request. Please feel free to continue discussion. We'll reopen this issue if anything actionable is posted.

[andreasvirkus]

Would this be ok as the default behaviour @ulivz? Can't really think of a downside for this. I'd like to take a crack at it if that's alright. Just to make sure, this'd be the expected outcome then, right?

index.md
about.md
contact.md
blog/
  post.md
  another.md

# post-build ↓
index.html
about/
  index.html
contact/
  index.html
blog/
  post/
    index.html
  another/
    index.html

[awulkan]

@andreasvirkus Looks good to me. It would be really nice to get some SEO friendly URLs, since Vuepress even lists SEO as a benefit over other Vue based generators.

[MartinMuzatko]

@andreasvirkus How will you handle about/index.md and about/readme.md clashes? Is there an order of files?

[andreasvirkus]

Well the clash exists currently as well, correct (they both generate about/index.html)? So that's either a separate issue to fix or an intended behaviour and something that the user simply shouldn't do.

[awulkan]

@andreasvirkus Hey, just wondering if you've made any progress so far, or if you've even gotten started for that matter. :)

Just really eager to get rid of these ugly and bad html extensions on the URL.

[dcastil]

Why not do it like Nuxt does it? https://nuxtjs.org/guide#static-generated-pre-rendering-

Then a file like docs/article.md would be rendered to docs/article/index.html.

[futagoza]

Is there any progress on this?