fumes.jekyll

What?

Fumes is an online photography magazine broadcasting human interest stories mainly from South East Asia. Fumes project was started by two photographers. A metaphor to play with, delivering ideas via images.

♡ Fumes website is now refactored.

☯ Articles are structured as photographer|curator symbiotic work.

✿ This will bloom greener fumes soon...

Structure

• Now using the Source branch for development which is then deployed automagically to Netlify CDN at every update.

• 'Master branch' is redundant now. It's just the locally compiled _site folder pushed via rake script (not useful, just a compiled copy without source files... just an exercise, might even delete it someday!)

• More working branches maybe present at times...

Fumes website features

• microformats. example test here

• serious, maybe dated, responsive image.

• ultra simple codepen-geek responsive logo.

• smart inline svg icons.

• auto tag navigation.

• auto category navigation.

• post thumbs. Front-matter declared.

• chrome standalone web app functionality (android only :().

• photographer indexes and navigation.

• open graph.

• attribution footnotes "APPEND to copy action" via inlined vanilla js.

• twitter cards (tested here..).

• handy prev-next articles navigation.

• SSL/https thanks to Netlify.

• responsive videos without plugins thanks to eduardo boucas

• Reading time estimates. Using this gem liquid_reading_time

Not yet:

• print.css

• google authors

• Google Author Rich Snippets

• service workers.

Fumes development technologies

Stuff for development. Its happens in Source branch:

• Nmp

• Gulp

• Bundler

• plus various code clips & techniques taken here and there...

• Netlify CND and SSL/https.

Prerequisites, first setup:

A. Get started with bundler. Install it globally!

gem install bundler

B. Install gulp globally

npm install --global gulp

Dev prerequisites:

3. cd into local project's dir

cdf

2. Install gems dependencies into project's local dir

bundle install

1. Install node dependencies into project's local dir

npm install

Dev time:

0. cd in local project dir

cdf

1. Run Jekyll

bundle exec jekyll serve

2. Run gulp (optional)

Open a new terminal window and

gulp

Gems dependencies:

• gem 'rake'

• gem 'rmagick'

• gem 'jekyll', '3.0.1'

• gem 'jekyll-sitemap'

• gem 'liquid_reading_time'

• gem 'jekyll-responsive_image'

Plugins dependencies:

• categories_generator.rb

• tags_generator.rb

• responsive_image.rb

• imager.js

More credits

• github setup tips

To do

Urgent:

• licenses management: use licenses.yml

• icons slim diet

• publish some content!

Sometime soon:

• get rid of jquery

• refactor using Imager.js + gulp grinder, drop responsive_image.rb

• compress html

One day:

• install service workers

• disqus

• print.css

• mailchimp

• merchandise

• PDF | ebook

Purpose of open sourcing this project

Having the source files of the Fumes project website, the core of the project, out in the open will allow other people or organizations that want to produce journalism to get a head-start on their own sites and see some practices and methods that have worked well for Fumes.

Reasons for using Jekyll (or any other static site generator)

This project creates static HTML files using Jekyll. There are many main reasons for using a static site generator this way:

1. The site will hold up to high load without requiring any special caching techniques. It's just HTML.

2. Since the site is just static files without a CMS it can sit for years without needing any software updates or security patches, which is important for reference websites like Fumes that will sit without content changes for a long time.

3. Since it's all text files controlled by a Git repository, collaboration is made easy.

4. Stories can be produced extremely quickly. To produce the stories, just edit text files. A huge speed-up. With a little Markdown learning, everybody can quickly achieve full proficiency. Jekyll allows for include files, which separate content from presentation thus allows for changing already placed elements —like side images, interactives, etc.— without changing the story page. Huge speed-up during crunch time.

5. Fast and Secure. All static files so drastically reduced vulnerabilities compared to popular php CMS like WP.

6. Hosted on github pages. World class hosting on cdn for sharing.

Warning

Despite this repo being public, it doesn't mean that all these assets are open-source and/or copyright free, or even that you may use any of them.

Please, ask for permission first by contacting us: [email protected]

Thanks, Junglestar team.

Photo rights

All photos © the Authors. All photos rights reserved. Except as indicated on a per article basis.

In some Fumes Articles, photos are released under CC-BY Creative Commons license. Some other fumes photos are CC0. Everything else is GPL.