Search code examples
cross-domainjekyllgithub-pages

How do I correctly configure the menu links of my gh pages after redirecting it to the Google domain?


After having successfully waited for the DNS check and setting up HTTPS requests, the redirection works as expected except for the menu in the jekyll website.

The links on the menu still display user.github.io/section1, user.github.io/section2, etc and not the domain/section1, domain/section2. If you were to copy the link the user.github.io/sectionx is copied.

So clicking on any section of the menu bar, including the webpage name or landing page, a new tab is opened.

The reason to it is treated as an external link which I defaulted as opening in a new window/tab.

So the question now is, how to have the relative part respected without the base user.github.io but the google domain name?

The navigation wrapper under the _includes folder as the _navigation.html file.

<div class="navigation-wrapper">
    <div class="site-name">
        <a href="{{ site.url }}">{{ site.title }}</a>
    </div><!-- /.site-name -->
    <div class="top-navigation">
        <nav role="navigation" id="site-nav" class="nav">
            <ul>
                {% for link in site.links %}
                <li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
                {% endfor %}
            </ul>
        </nav>
    </div><!-- /.top-navigation -->
</div><!-- /.navigation-wrapper -->

The YAML config file is pretty standard

title: webpage name
description: 
url: //user.github.io

links:
  - title: Section 
    url: /section1/
  - title: Section Prime
    url: /section2/


etc

Starting to get tunnel vision. What am I missing?


Solution

  • From what I get is you have a site hosted on GH pages accessible from user.github.io and you bought a custom domain from Google Domains. The redirection is setup successfully, but the links on the website's menu are still using user.github.io.

    This is because:

    1. You did not update the url field in the _config.yml file:

      # ...
      url: //user.github.io # Should be changed to https://yourdomain.extension
      # ...
      
    2. The liquid code in _navigation.html is incorrect:

      <nav role="navigation" id="site-nav" class="nav">
          <ul>
              {% for link in site.links %}
              <li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
              {% endfor %}
          </ul>
      </nav>
      

    In the YAML config's links block, for each element there is no external field defined. So the if block is useless. The else block is referring to site.url which is again the user.github.io one.

    Solution:

    1. Add external field to each link item in YAML:

      # ...
      
      links:
      - title: Section 
          url: /section1/
          external: true # this
      - title: Section Prime
          url: /section2/ 
          external: true # this
      
      # ...
      

    Or

    1. Update url in _config.yml to new domain. This way you can cut out the unnecessary if/else logic.

    In my opinion, the 2nd way is better. Your redirection will still work the same, but there will be no reference of user.github.io in your code, which is ideal.