home ◅ Classes + teaching ◅ Digital and Emerging Media Design I ◅ Assignments

Self-publishing

GDES-220 spring 2018 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources

Sprawling software platforms like Facebook and Google domainate today’s networked society, but the web is deeply rooted in the idea of self-publishing and interoperability. This project lets you experiment with building your own publishing system, part of a larger media ecosystem for the class. It also gives you a place to write and to share ideas.

Create, design, and write for a blog, hosted on GitHub Pages and updated using Jekyll, which is built into GitHub Pages. This set of tools introduces the process of designing a template-based site, using Jekyll to insert content into HTML/CSS templates. (Jekyll is a static site generator, a type of software closely related to content management systems like WordPress and Craft CMS.)

Develop the habit of posting to the blog–you can write about what you like, but you’ll have to include material about the intersection of design, technology, and society. You’ll need to publish at least 25 posts over the semester. Posts might take many forms, some of them quite short, such as:

You may publish under a psuedonum. I will link to your site from the course site, but will only provide your initials. Know that your blog’s web address will incorporate your GitHub username, so choose that username with care.

Steps

A. Set up a GitHub repository/project

Do this through the GitHub web interface.

  1. If you haven’t done so already, create a fork of web1-sp.
  2. Set up your repository on the GitHub repository settings page: change the name to something more meaningful than web1-sp, and configure GitHub Pages to pull from the master branch.
  3. Edit _config.yml, changing title, description, baseurl, and url.
  4. Check that the live version of your site works. (The repository settings page contains a link to your site.)

B. Design the site and create static HTML/CSS templates

You’ll do this locally, working with files on your hard drive for greater speed in updating.

  1. Sketch out a design on paper, and decide on fonts and colors. (Use web fonts!)
  2. Download css/sitewide.css, _layouts/default.html (the template for each post), and _layouts/front.html (the template for the front page).
  3. Edit the CSS <link> tag so that it points to your CSS.
  4. Code a basic layout in your HTML and CSS.
  5. Test this layout in Safari and Firefox, at several window sizes.

The code inside double curly braces, like ({{ content }}, is Jekyll template tags . You can, if you wish, temporarily replace the template tags with dummy content.

You need two templates:

The unformatted versions of these templates already include template tags for generating a list of posts, and for inserting title, date, and content into individual post pages.

C. Convert your static HTML into Jekyll templates

Do this through the GitHub web interface.

  1. Update the CSS files on GitHub.
  2. Update the HTML template files on GitHub. You’ll need to replace any dummy content with template tags.
  3. Let the site rebuild (you might need to wait 5–10 minutes, or even to quit/restart your browser) and check.

D. Write for your blog

Write posts for the blog. Put files under the _posts folder. Post filenames need to follow the format yyyy-mm-dd-name.markdown, with a four-digit year, two-digit month, and two digit day. Be sure to preserve the triple dashes (---) that start the file and separate the front matter (metadata and variables) from the content of the post.

Submitting your work

Please send me an email (ramos@american.edu) with the address of your public-facing website, and the address for your repository on GitHub.

Markdown formatting

You can write posts in Markdown instead of HTML. Want to make paragraphs, headlines, and links? The code:

### This is an H3

First paragraph here.

I appreciated the eye images on 
[AIGA Eye on Design](https://eyeondesign.aiga.org).

produces this output:

This is an H3

First paragraph here.

I appreciated the eyes on AIGA Eye on Design.

Images

It’s possible to mix Markdown and HTML, and since you know HTML, the simplest way to add images is to use an HTML <img> tag. You’ll have to give the images root-relative paths (like /web1-sp/img/imagename.jpg, with an initial slash). Remember, most servers, GitHub’s included, are case-sensitive (so imagename.JPG is not the same as imagename.jpg), and it’s best to avoid spaces in filenames.

<img src="/web1-sp/img/imagename.jpg" alt="Alt text goes here">

Replace web1-sp with the folder for your site.

More

Jekyll documentation

Markdown documentation