Migrating to GitHub Pages

Moving to GitHub Pages from Umbraco

I recently decided to move my site from Umbraco to GitHub Pages for various reasons - including wanting to learn it better and because I wasn't keeping up on updates as well. I'm hoping that this move will make it a little easier to keep up with.

The primary hurdle was the navigation. On my Umbraco site, if a user was on a project page it would highlight the top-level Projects link. I found a solution that would do it for regular top-level pages but it didn't work out of the box for subpages. After a lot of trial-and-error I managed to come up with a solution which shows all subpages. However, I didn't want to show all blog posts in the main menu so I included a toggle for that.

The final solution:

default.html

                
                    
                    <nav id="nav">
                        <ul>
                            {% for link in site.navigation %}
                            {% assign current = nil %}
                            {% if page.url == link.url or page.collection == link.collection and link.collection != nil %}
                                {% assign current = 'current' %}
                            {% endif %}

                            <li class="{{ current }}">
                                <a href="{{ link.url }}">
                                {% if link.collection and link.show_children %}
                                <i class="fas fa-angle-down"></i>
                                {% endif %}
                                    {{ link.text }}
                                </a>
                                {% if link.collection and link.show_children %}
                                {% assign items = site.collections | where: "label", link.collection | first %}
                                <ul>
                                    {% for sublink in site[items.label] %}
                                    <li>
                                        <a href="{{ sublink.url }}">{{ sublink.title }}</a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </li>
                            {% endfor %}
                        </ul>
                    </nav>
                    
                
            

_config.yml

                
                    
                    navigation:
                      - text: Home
                        url: /
                      - text: Projects
                        url: /projects/
                        collection: projects
                        show_children: true
                      - text: Blog
                        url: /blog/
                        collection: blog
                        show_children: false
                      - text: About
                        url: /about/