4 May 2017

Migrating promiscuousideas.com to GitHub Pages

In July 2016 I put a blog up on WiX at promiscuousideas.com. I loved the easy-to-use interface, huge feature set, and beautiful templates. I’ve thought and learned a lot since then about what I want promiscuousideas.com and idsx.co to do, and it’s time to move them to GitHub.

A few of my favorite things

The WiX site has a huge blue block up top that shouts at visitors:

BE PROMISCUOUS WITH YOUR IDEAS

The recent post titles and excerpts appear arranged in a way that I think makes sense for any screen size.

At the footer there are social media links and a questionably useful About Us blurb.

I want to port all these to GitHub Pages in a way that embraces the simplicity of the platform.

The hard part is …

The one piece of that I had no idea how to do was the dynamic layout of post excerpts. How to change the display from 3 columns, to 2, to 1 based on the width of the display?

First I studied several examples provided in 20 Amazing Examples of Using Media Queries for Responsive Web Design from designshack.com to find the handful of CSS that makes it work.

Then, starting with the Cayman theme for GitHub Pages, I added assets/css/style.scss to my repository:

---
---

@import 'jekyll-theme-cayman';

.posts-pane {
  list-style: none;
  list-style-type: none;
  padding: 0;
}

li.post-block {
  display: inline-block;
  padding: 1rem;
  text-align: left;
  vertical-align: top;
  @include large {
    width: 32.9505%;
  }
  @include medium {
    width: 49.42575%;
  }
  @include small {
    width: 98.8515%;
  }
}

h3.post-block {
  margin-bottom: 0;
}

Then I made a Recent Posts list for index.html using some examples I found on stackoverflow.com:

{% if site.posts.size > 0 %}
    <ul class="posts-pane">
    {% for post in site.posts limit:6 %}
        <li class="post-block">
            <h3 class="post-block"><a href="{{ post.url }}">{{ post.title }}</a></h3>
            {{ post.excerpt }}
        </li>
    {% endfor %}
    </ul>
{% else %}
    <p>No posts yet!</p>
{% endif %}

Taking advantage of the pre-existing styles in GitHub Pages it was simple to dynamically arrange the post excerpts.

Importing content from WiX and Blogger

I took these (with minor edits) from solvaholic.blogspot.com and WiX and posted them on my own blog, here, at solvaholic.github.io:

These I took from WiX straight to Promiscuous Ideas:

comments? | contribute | tags: notes