netlify deployment - Links to Home doesn't work, it is not possible to get back to the home page

[aisbergde]

the template works fine on Github-pages, but it doesn't work correctly when the same repository is published to netlify. On netlify the generated links to the homepage are wrong, they point to the current page.
to reproduce:

• fork the original template
• add to the Gemfile: `gem "jekyll"
• deploy to netlify
• visit the about site, or any other page, for example a post
• check the link which is used on the upper left side (or on the logo if it is enabled)

issue:

• when the page is hosted on github pages, the link always linkes to the hompage. This is the desired link
• on netlify the link links to the current page, it is not possible to get back to the homepage

I will try if there are other Gemfiles required to make it work.
`

[aisbergde]

As a workaround I found only to add a "Home" in the menu structure. But it should be possible somehow that the template works with both github pages and netlify. The problem seems to be something with nav.html.

I also tried a bit with baseurl: /, but this has no effect.
And I really don't know where to search for a solution.

navbar-links:
  Home: "index"
  Àbout me: "aboutme"
``

[daattali]

I don't know what it means to "deploy to netlify". This isn't something I would know hot to fix but I'd be happy to get insights if you're able to troubleshoot and better understand the issue.

[aisbergde]

@daattali
The issue with Github pages:
https://docs.github.com/en/github/working-with-github-pages/about-github-pages#prohibited-uses

GitHub Pages is not intended for or allowed to be used as a free web hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS).

But there are free alternatives:

https://www.netlify.com/

An intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps

it is a very popular service, because the starter package is free and contains all required:
https://www.netlify.com/pricing/

They also support easy deployment of several static site generators:
https://jamstack.org/generators/

beautiful-jekyll is listed only in the description, there is no "Deploy to netlify"
https://jamstack.org/generators/beautiful-jekyll/

But plain jekyll has a "Deploy to netlify"
https://jamstack.org/generators/jekyll/

It is very easy to set up a build also for beautiful-jekyll, using the settings for "plain" jekyll

Build settings

• Repository
  github.com/xxxxx/beautiful-jekyll
• Base directory
  Not set
• Build command
  jekyll build
• Publish directory
  _site/
• Deploy log visibility
  Logs are public
• Builds
  Active

the only required adaption is:

• add to the Gemfile: gem "jekyll"

All works fine, but the generated links on the site title in the upper left and on the round avatar are wrong. They link to the currently selected page, not to the site home page.

Here is the same site content from the same repository

• github pages: http://datahandwerk.aisberg.de/2021-03-23-datahandwerk-toolkit-mssql/
• netlify: https://wonderful-archimedes-335f59.netlify.app/2021-03-23-datahandwerk-toolkit-mssql/

now you can compare the link on the site title o the upper left:

• github pages: http://datahandwerk.aisberg.de/ (the right link is generated on all pages)
• netlify: https://wonderful-archimedes-335f59.netlify.app/2021-03-23-datahandwerk-toolkit-mssql/ (the wrong link is generated on all pages, including the current site)

[daattali]

Thanks for all the details. This theme was indeed created as a github-first theme and github is the priority, because I wanted it to be very accessible to beginners.

I myself am not a ruby developer and however 0 experience with ruby except for the few hours creating a gem. So this sort of troubleshooting is unfortunately outside of my expertise.

[aisbergde]

Then I will ask in the jekyll community, if someone could help to solve.

[daattali]

@aisbergde please do update with more details if you found a solution, and whether this is a problem for only this theme or all jeyll github themes

[aisbergde]

I did not find a solution and just try to host this kind of sites not on netlify but as github pages.

[daattali]

Do you know if this is a problem with only this theme, or with other jekyll github themes?

[aisbergde]

I only used this theme to create my own site and some sites for some friends. One of this site I wanted to publish on netlify, because it is a commercial site. And only then I found this issue. But I was able to reproduce with other sites using this theme on netlify. Maybe it is a netlify issue.
I could try to use gitlab pages. In general gitlab is a good alternative, the allow commercial sites, they support asciidoc better than github. And I already use gitlab pages for my open source project, because they support netlify style redirect, and github doesn't.

[daattali]

Thanks for letting me know. I'm going to close this issue, I would be very happy if you try to use gitlab -- please do report back with results. If it doesn't work, let me know. If it does, perhaps you can help with #510 :)

[aisbergde]

I tested on gitlab and I have the same issue as on netlify. The link on the upper left points to the current page but not to the homepage.

[aisbergde]

I found a solution make it work on gitlab (maybe it will work also on netlify, I did not test again)

In _includes/nav.html I changed in the line 4 and 6
from
href="{{ '' | absolute_url }} to href="{{ '/index' | relative_url }}

<nav class="navbar navbar-expand-xl navbar-light fixed-top navbar-custom {% if page.nav-short %}top-nav-short-permanent{% else %}top-nav-regular{% endif %}">

  {%- if site.title-img -%}
    <a class="navbar-brand navbar-brand-logo" href="{{ '/index' | relative_url }}"><img alt="{{ site.title }} Logo" src="{{ site.title-img | relative_url}}"/></a>
  {%- elsif site.title -%}
    <a class="navbar-brand" href="{{ '/index' | relative_url }}">{{ site.title }}</a>
  {%- endif -%}

[daattali]

Thanks for your input. I'm glad you found the issue and please do make that change yourself in your website, but I'm very conservative about making such changes without knowing 100% the full ramifications. I don't know if something like this will break other people's existing sites and if 'index' is always the correct place to go.

[OZ7UP]

I found a solution make it work on gitlab (maybe it will work also on netlify, I did not test again)

In _includes/nav.html I changed in the line 4 and 6 from href="{{ '' | absolute_url }} to href="{{ '/index' | relative_url }}

<nav class="navbar navbar-expand-xl navbar-light fixed-top navbar-custom {% if page.nav-short %}top-nav-short-permanent{% else %}top-nav-regular{% endif %}">

  {%- if site.title-img -%}
    <a class="navbar-brand navbar-brand-logo" href="{{ '/index' | relative_url }}"><img alt="{{ site.title }} Logo" src="{{ site.title-img | relative_url}}"/></a>
  {%- elsif site.title -%}
    <a class="navbar-brand" href="{{ '/index' | relative_url }}">{{ site.title }}</a>
  {%- endif -%}

Late reply is late, but as a fellow netlify user, I can confirm that this works.

[daattali]

@OZ7UP if this solution doesn't break other sites (served with jekyll, or github user sites, or github project sites), I would love a PR

[OZ7UP]

I don't really have the time to do any extensive testing, especially with other sites (besides, I'm really new to GitHub, having only started in late October), but perhaps someone else who has the time to spare could do so, using the code provided by Aisbergde.

Speaking of which, the changes that Aisbergde has suggested for lines 4 and 6 should also be applied to line 53 if people want their avatar to link back to the home page.