markjgsmith
About Portfolio Contact Feeds
Archives ↓

2015/10/25

Minimal Setup for Blogging with Jekyll

This initial post is to document how to configure the base Jekyll installation so that it's ready for blogging, with posts displaying on the main page, an archives page that lists all the posts, an about page for a personal description and social media info in the footer.

Jekyll customized for blogging

The actual Jekyll installation is covered in the docs. It's pretty straight forward. Setting up free hosting with Github is covered here.

For details of the modifications I made to the vanilla install have a look through the commits in the Github repo up to this commit.

Jekyll new install git commits

I'm using Prose.io to edit posts in my web browser. Prose knows about Jekyll so you can create drafts and publish posts, it's also open source.

blogging jamstack static site generators

Poole - A diligent and noble steward for building Jekyll sites - The Jekyll Butler getpoole.com #

Our Digital Nomad Life: Your Questions Answered neverendingvoyage.com #

3 Years of Travelling with Hand Luggage Only: Our Packing List Update neverendingvoyage.com #

Meet the Deities of Travel dauntlessjaunter.com #

2015/10/23

Welcome to Jekyll!

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll’s dedicated Help repository.

jamstack static site generators blogging

The struggles of publishing a JavaScript library (Reasons not to be a Javascript author) nolanlawson.com #

Front-end Handbook - The resources and tools for learning about the practice of front-end development gitbook.com #

Using Git to Manage Todos jezenthomas.com #

Prose.io: The Missing Content Editor for Jekyll markwk.com #

2015/10/22

Lazy Loading Images on the Web developer.telerik.com #

Don’t Wait for ServiceWorker: Adding Offline Support with One-Line davidwalsh.name #

Surge - Static web publishing for Front-End Developers surge.sh #

Style tiles - A visual design process for clients and the responsive web styletil.es #

Scalable and Modular Architecture for CSS (Online book) - Flexible guide to developing small and large sites smacss.com #

ImageOptim is a free app that makes images take up less disk space and load faster, without sacrificing quality imageoptim.com #

Web Developer Reading List: Clients, Contracts and Portfolios thenewcode.com #

2015/10/20

Mattermost is an open source, on-prem Slack-alternative mattermost.org #

LibreStock - search the best 30 free stock photo websites in one place, high quality do-what-ever-you-want stock photos librestock.com #

Blend - Generate simple and beautiful CSS3 gradients colinkeany.com #

Dave Rupert from the ShopTalk podcast is building DayTrip a micro social network daverupert.com #

Be Forest - Totem II vimeo.com #

Containerize Your Local Dev in Minutes with DevLab blog.fluidbyte.net #

2015/10/19

Classical Inheritance is Obsolete - How to Think in Prototypal OO vimeo.com #

Functional programming in JavaScript - surprisingly entertaining video tutorial series by mpjme youtube.com #

The Art of Debugging - javascript debugging tips from Remy Sharp remysharp.com #

2015/10/08

CORS for Concern - Paul reflects on the issues of building a podcast player app using Web technologies aerotwist.com #

What's new in Chrome DevTools? speakerdeck.com #

Browser Rendering Optimization - Building 60 FPS Web Apps udacity.com #

Master/Mind - New technologies are beginning to unlock the brain’s true potential, but at what cost to our humanity? vimeo.com #