Hide index.html and .html extensions in Codeberg Pages #177

circlebuilder commented 2020年05月01日 21:05:17 +02:00

I created my first Pages site on codeberg and noticed that URL's show the default index.html page and .html extensions in the URL.

Though - due to #115 - I will only use the site as a staging location (if I can easily automate the deployment of my Jekyll _sites dir to GH Pages, where the live version will be)

It would be great if the default index pages and html extensions were hidden. Is there a way I can achieve this myself (my pages repo only contains plain html, js, css files), or does it need a change to Codeberg Pages itself?

I created my first Pages site on codeberg and noticed that URL's show the default `index.html` page and `.html` extensions in the URL. Though - due to #115 - I will only use the site as a staging location (if I can easily automate the deployment of my Jekyll `_sites` dir to GH Pages, where the live version will be) It would be great if the default index pages and html extensions were hidden. Is there a way I can achieve this myself (my pages repo only contains plain html, js, css files), or does it need a change to Codeberg Pages itself?

ashimokawa commented 2020年05月05日 00:15:03 +02:00

@circlebuilder

index.html is now hidden

I am not sure what you mean with hiding the .html extension, that would be very uncommon I thing. You mean if you explicitly specify /index.html you want the url to become /index ?

@circlebuilder index.html is now hidden I am not sure what you mean with hiding the .html extension, that would be very uncommon I thing. You mean if you explicitly specify /index.html you want the url to become /index ?

hw commented 2020年05月05日 00:19:39 +02:00

Is there a way I can achieve this myself?

Yes, if there is a directory folder containing an index.html, all these URLs should work:

https://codeberg.org/username/folder
https://codeberg.org/username/folder/
https://codeberg.org/username/folder/index.html

> Is there a way I can achieve this myself? Yes, if there is a directory `folder` containing an `index.html`, all these URLs should work: https://codeberg.org/username/folder https://codeberg.org/username/folder/ https://codeberg.org/username/folder/index.html

circlebuilder commented 2020年05月06日 08:28:55 +02:00

Thank you @ashimokawa @hw !

@ashimokawa after SPA and JS for a long time my plain html memory may be rusty and this is not possible, but I was aiming at e.g. a directory containing both an index.html and a my-page.html in the repo rootdir and then being able to:

https://pages.codeberg.org/username
https://pages.codeberg.org/username/my-page

@hw you mean pages.codeberg.org, right? Without it I get a credential popup and then an "Invalid credentials" displayed.

Thank you @ashimokawa @hw ! @ashimokawa after SPA and JS for a long time my plain html memory may be rusty and this is not possible, but I was aiming at e.g. a directory containing both an `index.html` and a `my-page.html` in the repo rootdir and then being able to: ``` https://pages.codeberg.org/username https://pages.codeberg.org/username/my-page ``` @hw you mean `pages.codeberg.org`, right? Without it I get a credential popup and then an "Invalid credentials" displayed.

hw commented 2020年05月06日 08:45:26 +02:00

@circlebuilder : yes, of course you are right, the URL has to start with subdomain pages.*!

To achieve your goal, you basically arrange your HTML content like this:

https://pages.codeberg.org/username/index.html
https://pages.codeberg.org/username/my-supercool-page/index.html
https://pages.codeberg.org/username/my-even-supercooler-page/index.html

Now, visitors can visit any of these URLs, they will all work by internally rendering the index.html file in the respective directory:

https://pages.codeberg.org/username
https://pages.codeberg.org/username/my-supercool-page
https://pages.codeberg.org/username/my-even-supercooler-page
https://pages.codeberg.org/username/
https://pages.codeberg.org/username/my-supercool-page/
https://pages.codeberg.org/username/my-even-supercooler-page/
https://pages.codeberg.org/username/index.html
https://pages.codeberg.org/username/my-supercool-page/index.html
https://pages.codeberg.org/username/my-even-supercooler-page/index.html

And, of course, you can pass state to process it for dynamic content in Javascript:

https://pages.codeberg.org/username/my-supercool-page?q=whatsup
https://pages.codeberg.org/username/my-supercool-page/?q=wasnlos&lang=de
https://pages.codeberg.org/username/my-even-supercooler-page/index.html?q=quetal&lang=es

@circlebuilder : yes, of course you are right, the URL has to start with subdomain `pages.*`! To achieve your goal, you basically arrange your HTML content like this: ``` https://pages.codeberg.org/username/index.html https://pages.codeberg.org/username/my-supercool-page/index.html https://pages.codeberg.org/username/my-even-supercooler-page/index.html ``` Now, visitors can visit any of these URLs, they will all work by internally rendering the `index.html` file in the respective directory: ``` https://pages.codeberg.org/username https://pages.codeberg.org/username/my-supercool-page https://pages.codeberg.org/username/my-even-supercooler-page https://pages.codeberg.org/username/ https://pages.codeberg.org/username/my-supercool-page/ https://pages.codeberg.org/username/my-even-supercooler-page/ https://pages.codeberg.org/username/index.html https://pages.codeberg.org/username/my-supercool-page/index.html https://pages.codeberg.org/username/my-even-supercooler-page/index.html ``` And, of course, you can pass state to process it for dynamic content in Javascript: ``` https://pages.codeberg.org/username/my-supercool-page?q=whatsup https://pages.codeberg.org/username/my-supercool-page/?q=wasnlos&lang=de https://pages.codeberg.org/username/my-even-supercooler-page/index.html?q=quetal&lang=es ```

hw commented 2020年05月06日 08:48:30 +02:00

additional note: of course you can have HTML files with other names in each directory. (and they are accessed with the full file name, and not abbreviated.)

additional note: of course you can have HTML files with other names in each directory. (and they are accessed with the full file name, and not abbreviated.)

circlebuilder commented 2020年05月06日 09:03:21 +02:00

Thanks once more for your help @hw !

Thanks once more for your help @hw !

circlebuilder commented 2020年05月10日 21:36:23 +02:00

I just noticed - while publishing my first blog post - that Jekyll does not generate blog posts as index.html but as my-blog-title.html. And this is a bit of a problem (which I could probably work around by tweaking templates everywhere they handle blog pages), because the URL's generated by the standard {{ post.url | relative_url }} in Jekyll do not include the .html part.

But I noticed that for Github Pages (and also on localhost) - where I have our Humane Tech Community website running, the .html extension is not needed in the url:

https://humanetech.community/2020/01/internet-of-beefs

Is referencing the generated internet-of-beefs.html in the folder /2020/01.

So the question is whether Codeberg could work in the same manner as Github pages (especially as Codeberg is my staging site, and I - after necessary Jekyll tweaks - don't want .html extension on just some pages in Live GH Pages if not needed)

I just noticed - while publishing my first blog post - that Jekyll does not generate blog posts as `index.html` but as `my-blog-title.html`. And this is a bit of a problem (which I could probably work around by tweaking templates everywhere they handle blog pages), because the URL's generated by the standard `{{ post.url | relative_url }}` in Jekyll do not include the `.html` part. But I noticed that for Github Pages (and also on localhost) - where I have our Humane Tech Community website running, the `.html` extension is not needed in the url: https://humanetech.community/2020/01/internet-of-beefs Is referencing the generated `internet-of-beefs.html` in the folder `/2020/01`. So the question is whether Codeberg could work in the same manner as Github pages (especially as Codeberg is my staging site, and I - after necessary Jekyll tweaks - don't want `.html` extension on just _some_ pages in Live GH Pages if not needed)

hw commented 2020年05月10日 22:12:05 +02:00

Do you have a link to the content repo and the command you are executing, so that we can reproduce the issue?

Do you have a link to the content repo and the command you are executing, so that we can reproduce the issue?

circlebuilder commented 2020年05月11日 08:17:37 +02:00

It is not yet publicly accessible. But a working version is the Humane Tech Community website, which is based on same Jekyll minimal mistakes theme and located here: https://github.com/humanetech-community/community-hub

It has the same issue. If I take one post of the blog, e.g. https://humanetech.community/2019/07/wechat-the-chinese-mega-app which is defined in _posts/2019-07-07-wechat-the-chinese-mega-app.md as follows:

---
title: "WeChat: the Chinese Mega App"
excerpt: "I still remember <snip/>"
header:
 image: /assets/images/blog/we-chat-the-chinese-mega-app/smartphone.jpeg
 teaser: /assets/images/blog/we-chat-the-chinese-mega-app/smartphone-ogimage.jpeg
 og_image: /assets/images/blog/we-chat-the-chinese-mega-app/smartphone-ogimage.jpeg
author: Cai Yuqian
last_modified_at: 2019年07月07日T07+02:00
comments: true
discourse_topic_id: 4201
---
**The age of QQ**
I still remember the day when a teenage girl helped me <snip/>

Then this generates _site/2019/07/wechat-the-chinese-mega-app.html with this as the generated html link on the blog generated as _site/blog/index.html:

<a href="/2019/07/wechat-the-chinese-mega-app" rel="permalink">WeChat: the Chinese Mega App</a>

Which was created by the archive-single.html include snippet:

 {% if post.link %}
 <a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | relative_url }}" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
 {% else %}
 <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
 {% endif %}

The relative_url filter does not strip the .html extension, but the standard post.url apparently does.

Is this enough information? If not, then later today or tomorrow I will clone the humanetech repo from GH to a temporary location on codeberg and copy the _sites files into another temporary Pages repo.

It is not yet publicly accessible. But a working version is the [Humane Tech Community](https://humanetech.community) website, which is based on same Jekyll [minimal mistakes](https://github.com/mmistakes/minimal-mistakes) theme and located here: https://github.com/humanetech-community/community-hub It has the same issue. If I take one post of the blog, e.g. https://humanetech.community/2019/07/wechat-the-chinese-mega-app which is defined in [_posts/2019-07-07-wechat-the-chinese-mega-app.md](https://raw.githubusercontent.com/humanetech-community/community-hub/master/_posts/2019-07-07-wechat-the-chinese-mega-app.md) as follows: ```markdown --- title: "WeChat: the Chinese Mega App" excerpt: "I still remember <snip/>" header: image: /assets/images/blog/we-chat-the-chinese-mega-app/smartphone.jpeg teaser: /assets/images/blog/we-chat-the-chinese-mega-app/smartphone-ogimage.jpeg og_image: /assets/images/blog/we-chat-the-chinese-mega-app/smartphone-ogimage.jpeg author: Cai Yuqian last_modified_at: 2019年07月07日T07+02:00 comments: true discourse_topic_id: 4201 --- **The age of QQ** I still remember the day when a teenage girl helped me <snip/> ``` Then this generates `_site/2019/07/wechat-the-chinese-mega-app.html` with this as the generated html link on the [blog](https://humanetech.community/blog/) generated as `_site/blog/index.html`: ```html <a href="/2019/07/wechat-the-chinese-mega-app" rel="permalink">WeChat: the Chinese Mega App</a> ``` Which was created by the [`archive-single.html`](https://github.com/humanetech-community/community-hub/blob/master/_includes/archive-single.html) include snippet: ```jekyll {% if post.link %} <a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | relative_url }}" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a> {% else %} <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a> {% endif %} ``` The [`relative_url`](https://jekyllrb.com/docs/liquid/filters/) filter does not strip the `.html` extension, but the standard [`post.url`](https://jekyllrb.com/docs/posts/) apparently does. Is this enough information? If not, then later today or tomorrow I will clone the humanetech repo from GH to a temporary location on codeberg and copy the `_sites` files into another temporary Pages repo.

hw commented 2020年05月11日 08:51:53 +02:00

What Jekyll options are you using for generation?

What is the commandline you run to generate the HTML?

What Jekyll options are you using for generation? What is the commandline you run to generate the HTML?

circlebuilder commented 2020年05月11日 09:01:56 +02:00

In _config.yml:

# _posts- scope:path:""type:postsvalues:permalink:/:year/:month/:sluglayout:singleauthor_profile:trueread_time:truecomments:falseshare:truerelated:true

Then just jekyll clean followed by jekyll build (and jekyll serve to run locally).

Note: If there is a setting in Jekyll to create blog pages as index.html, then I should change the desired URL scheme of /blog/[year]/[month]/title

PS. Note that the workaround in my case is not that hard, because post.url is not at many locations:

<a href="{{ post.url | relative_url }}.html" rel="permalink">{{ title }}</a>

Then only blog posts would have .html and other pages not. Not too big a concession maybe.

But I think - also for codeberg - it would be best that for Codeberg Pages you'd try to closely match what GH Pages is offering.

In `_config.yml`: ```yml # _posts - scope: path: "" type: posts values: permalink: /:year/:month/:slug layout: single author_profile: true read_time: true comments: false share: true related: true ``` Then just `jekyll clean` followed by `jekyll build` (and `jekyll serve` to run locally). Note: If there is a setting in Jekyll to create blog pages as `index.html`, then I should change the desired URL scheme of `/blog/[year]/[month]/title` PS. Note that the workaround in my case is not that hard, because `post.url` is not at many locations: ``` <a href="{{ post.url | relative_url }}.html" rel="permalink">{{ title }}</a> ``` Then only blog posts would have `.html` and other pages not. Not too big a concession maybe. But I think - also for codeberg - it would be best that for Codeberg Pages you'd try to closely match what GH Pages is offering.

hw commented 2020年05月11日 09:11:05 +02:00

OK, got it. This is nonstandard behavior introduced to mimic proprietary GH behavior, see https://github.com/jekyll/jekyll/pull/3452 for details.

I deployed a change to the pages renderer to mimic this behavior too. Please try and let us know whether this works for you.

Just as a note: please everybody try to write your code and content in a way that you do not get locked in into proprietary non-standard frameworks that intentionally deviate from standards in order to make it hard for users to migrate between platforms.

OK, got it. This is nonstandard behavior introduced to mimic proprietary GH behavior, see https://github.com/jekyll/jekyll/pull/3452 for details. I deployed a change to the pages renderer to mimic this behavior too. Please try and let us know whether this works for you. > Just as a note: please everybody try to write your code and content in a way that you do not get locked in into proprietary non-standard frameworks that intentionally deviate from standards in order to make it hard for users to migrate between platforms.

circlebuilder commented 2020年05月11日 09:26:57 +02:00

Wow, that is a great find. I just tested the change and it works perfectly! With and without a trailing slash at the end of the URL.

Thank you so much!

Wow, that is a _great_ find. I just tested the change and it works perfectly! With and without a trailing slash at the end of the URL. Thank you so much!

circlebuilder commented 2020年05月11日 09:48:39 +02:00

PS. I can understand why GH implemented this way. URL's are difficult beasts for non-techies and when in speech they have to mention mysite slash mypage is preferable to mysite slash mypage dot html, and frankly with all the SPA's and dynamic URL's the .html extension has been omitted in majority of cases. People have come to expect it to not be present.

PS. I can understand why GH implemented this way. URL's are difficult beasts for non-techies and when in speech they have to mention `mysite slash mypage` is preferable to `mysite slash mypage dot html`, and frankly with all the SPA's and dynamic URL's the `.html` extension has been omitted in majority of cases. People have come to expect it to not be present.

circlebuilder commented 2020年05月11日 10:07:32 +02:00

@hw I just made a last discovery, which - in hindsight - fixes my whole problem, and would not have needed the change you just made (though for compatibility, and to avoid future support issues, I suggest you keep it).

If in config.yml I add the trailing slash to the permalink setting, like so /:year/:month/:slug/, then Jekyll generates the page as follows: /2020/05/mypage-title/index.html

Which is of course the proper solution I must take.

@hw I just made a last discovery, which - in hindsight - fixes my whole problem, and would not have needed the change you just made (though for compatibility, and to avoid future support issues, I suggest you keep it). If in `config.yml` I add the trailing slash to the permalink setting, like so `/:year/:month/:slug/`, then Jekyll generates the page as follows: `/2020/05/mypage-title/index.html` Which is of course the proper solution I must take.