Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Jekyll to site #60

Closed
wants to merge 11 commits into from
Closed

Add Jekyll to site #60

wants to merge 11 commits into from

Conversation

derrekchow
Copy link
Member

Note: we could merge this after the Summit

What

Jekyll is a light framework that allows you to extract repeated html to individual files and separate an element's data from its html. I've added Jekyll to the site, note that its not too big of a change. It mostly means I've changed our folder structure and extracted repeated parts of pages to individual files.

Why

  • To make it easier and quicker to make small changes
  • Help make development in general easier by grouping files by their use instead of by page
  • Reduce code size and repeated elements
  • Avoiding having to maintain consistency across pages with duplicate elements (like navbar and footer)

Changes

  • No more node_modules/ and package.json -> replaced with Gemfile and _config.yml
  • No more Gulp, just run jekyll serve - files are auto compressed and SASS auto generated with hot reloading
  • Less code per page

Below are the folders than contain the majority of the site's content and their use:

_data/

Speakers, team members, and nav items are represented as lists in _data/. That way don't have to repeat or edit html elements when modifying these entities, we just change the actual data and render each element like so:

{% for member in site.data.members %}
<a name="{{member.name}}" body="{{member.body}}" image="/assets/images/teamphotos/{{member.image}}" >
    <div>
        <img src="/assets/images/teamphotos/{{member.image}}" alt="{{member.name}}" />
        <h3 class="text-dark mt-3">{{member.name}}</h3>
    </div>
</a>
{% endfor %}

_includes/

HTML elements that persist across the entire site like the navbar, footer, and head tags are kept as individual files in _includes/ and "included" into _layouts/main.html. That way, editing every footer across the site means editing just a single file: /_includes/footer.html.

---
layout: compress
---
<!DOCTYPE html>
<html>
    <head>{% include head.html %}</head>
    <body>
        {% include nav.html %}
        <main>{{ content }}</main>
        {% include footer.html %}
        {% include scripts.html %}
    </body>
</html>

pages/

As shown in the section above, {{ content }} is the page specific html which remains the same as before. For example in pages/coalition.html, the file is prefixed with:

---
title: Impact Labs - Coalition
permalink: /coalition
---

This means when the user goes to impactlabs.io/coalition then the content in pages/coalition.html will be inserted in the place of {{ content }} in _layouts/main.html.

Setup

  1. Install Jekyll
  2. Run bundle install
  3. Run jekyll serve

Layout

.
├── _config.yml
├── _data
├── _includes -> Page elements that persist across the site (navbar, footer, head), inserted into main.html in /layouts
├── _layouts -> All pages are rendered through here
├── _sass -> main.scss (edit this and not /assets/scss/styles.scss)
├── _site -> Auto generated by Jekyll (ignore)
├── assets -> Static assets (images, CSS and JS files)
└── pages -> Body of each page, to be inserted in /layouts/main.html

TODO

  • Fully setup jekyll-seo-tag
  • Make sure Jekyll works for everyone
  • Decide together if this is preferable to the old site setup

@derrekchow derrekchow requested review from nikhilro and a user August 5, 2020 00:09
@derrekchow derrekchow removed their assignment Aug 5, 2020
@nikhilro nikhilro mentioned this pull request Aug 12, 2020
Merged
ghost
ghost approved these changes Sep 21, 2020
View reviewed changes
Copy link

@ghost ghost left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really hyped for this change overall! Noticing some build issues and had a few nits; otherwise lgtm 👍

.gitignore Show resolved Hide resolved
_data/fellowship_speakers.yaml
# image is located at `/assets/images/speakers`
# note: the first speaker must have active: true

- name: Amy Nelson
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love me some YAML 😍

assets/css/styles.scss Show resolved Hide resolved
assets/js/script.js Show resolved Hide resolved
pages/coalition.html Show resolved Hide resolved
pages/team.html Outdated Show resolved Hide resolved
@ghost
Copy link

ghost commented Oct 7, 2020

Closing this PR since it can't cleanly sit on top of master. I'm making a new branch called main which will replace the master shortly. It's a worthwhile change from a justice standpoint anyways!

@ghost ghost closed this Oct 7, 2020
@derrekchow derrekchow mentioned this pull request Oct 7, 2020
Merged
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nikhilro nikhilro Awaiting requested review from nikhilro

Assignees

@aaronmayer108 aaronmayer108

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@derrekchow @aaronmayer108