search

daattali / beautiful-jekyll

✨ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com
https://beautifuljekyll.com
MIT License
5.38k stars 16.23k forks source link

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

Closed aisbergde closed 3 years ago

aisbergde commented 3 years ago

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:

issue:

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

aisbergde commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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

the only required adaption is:

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

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

daattali commented 3 years ago

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 commented 3 years ago

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

daattali commented 3 years ago

@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 commented 3 years ago

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

daattali commented 3 years ago

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

aisbergde commented 3 years ago

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 commented 3 years ago

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 https://github.com/daattali/beautiful-jekyll/issues/510 :)

aisbergde commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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.