Jekyll
When it comes to blogging platforms, WordPress is hard to beat, claiming to power over 35% of websites, and recently announcing a $300 million Series D from Salesforce. Alternatively, Static Site Generators like Jekyll and GatsbyJS are becoming more prevalent, as they are less opinionated and more developer-friendly. They offer greater customization, simplicity, and ease of deployment with free services like GithubPages, as opposed to paid Virtual Private Servers such as DigitalOcean Droplets or Amazon Lightsail. Here are some takeaways on the benefits and drawbacks of these different setups, and my experience setting Jekyll up.
Hosting
GithubPages allows you to host your static site repository for free, secure it with HTTPS, and use your own custom domain. The cost savings when compared to hosting a dynamic WordPress website on Virtual Private Servers like DigitalOcean or Amazon Lightsail are however negligible, but require some technical know how to be able to manage it using a terminal and SSH client.
Speed
Static Site Generators like Jekyll don’t require a database, as opposed to dynamic CMSs that typically use MySQL, making page speed blazing fast, which Google considers in its ranking algorithm. Crawlers are influenced by loading times, and consequently faster loading sites have higher conversion rates and lower bounce rates.
WYSIWYG editors have their benefits, but can feel bloated and distracting, and the more closely I can get to writing on a piece of paper, the better. Markdown offers a consistent, simple to use plain text format, converting to structurally valid HTML. The main draw for a tech-focused blog is being able to use a code editor to easily format syntax highlighting in its respective language:
Liquid Tags
Shopify has a wealth of Open Source Software projects, including Liquid, the programming logic that tells templates what to do, which is very similar to working with Rails’ .erb templates.
{% if site.title %}
{{ site.title }}
{% endif %}Live Reload
Developing is much more streamlined when you don’t have to refresh the page every time you make an update. I enabled Live Reload by adding an alias to my .zshrc config with Jekyll’s --livereload flag.
alias jekyllStart="jekyll serve --livereload"
Plugins
These are must-have Jekyll gems that cover the basic tenets of a functional blog. They can be installed in the :jekyll_plugins namespace in the Gemfile, and then included in _config.yml.
group :jekyll_plugins do gem 'jekyll-compose' gem 'jekyll-feed' gem 'jekyll-paginate' gem 'jekyll-seo' gem 'jekyll-seo-tag' end plugins: - jekyll-compose - jekyll-feed - jekyll-paginate - jekyll-seo - jekyll-seo-tag
Composing
jekyll-compose comes with some handy commands that can be executed from the terminal, to quickly scaffold posts or drafts, and generate the necessary front matter.
jekyll post 'New Post' jekyll draft 'New Draft' jekyll publish 'New Draft'
Pagination
jekyll-paginate makes the paginator object available in the view, which iterates over the posts and generates the appropriate links.
{% for post in paginator.posts %}
...
{% endfor %}
<div class="pagination">
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">
Previous
</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="next">Next</a>
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>Excerpts
By default, Jekyll displays an excerpt of the first paragraph if there is a <!--more--> tag present in the post, which can be customized to be whatever you choose in _config.yml.
---
excerpt_separator: <!--more-->
---
<article class="post-content">
{% if post.excerpt %}
{{ post.excerpt }}
<a href="{{ post.url }}">Read More</a>
{% else %}
{{ post.content }}
{% endif %}
</article>Editors
Initially I was hesitant to commit to writing content solely in Markdown, that is until I discovered Typora, “A truly minimal markdown editor”. Before discovering the app, I attempted to use Sublime Text with stripped down options, changing the font to something more readable, and the theme to appear like this website, however it still felt like I was writing code, not a blog post. With Typora, Markdown is magically turned into its preview, and I’m able to manage my files with their powerful organization tools.
Images
Last but not least, is how to include images. CMSs typically have rich image editors, and that’s probably the biggest trade-off going with a Static Site Generator. Typora has an excellent interface to include images in Markdown, but its features don’t stretch much further than that. While you could include a javascript library, I’ve yet to come across a user-friendly way to build thumbnail galleries and image carousels like you would find on WordPress. Regardless of how you include images, there are always necessary optimizations you would need to make so they load fast, and are SEO friendly.
If you are using a CDN like Amazon S3, their CLI makes it easy to transfer and manage images. Before uploading images to S3, it’s advisable to reduce their size by compressing them using ImageOptim, removing bloated metadata, saving disk space & bandwidth.
imageoptim * aws s3 sync . s3://bucket/folder --acl public-read aws s3 ls
