# Jekyll Jekyll is a static site generator that uses markup text and layouts to create static websites. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Rewrote my blog with Zine DevFeed: [Rewrote my blog with Zine]() Original publisher: [Read original article]() Author: April Published: 2026-04-19T00:00:00Z Content type: article Language: en Sources: [Drew DeVault]() Topics: [Website](), [Hugo](), [Jekyll](), [Open Source]() Tags: [blog](), [blog-post](), [github-pages](), [hugo](), [jekyll](), [open-source](), [open-source-software](), [static-site-generator]() ### AI overview The author describes rewriting their blog from Hugo to Zine after frustrations with Hugo's complexity and backwards-incompatible changes. They also discuss porting nearly 400 archived posts and exploring Zine's SuperHTML and SuperMD tools. ### Source excerpt 15 years ago, on December 11th, 2010, at the bold age of 17, I wrote my first blog post on the wonders of the Windows Phone 7 on Blogspot. I started blogging as a kid at the behest of a family friend at Microsoft, who promised she'd make sure I would become the youngest Microsoft MVP if I started blogging. That never came to pass, though, because as I entered adulthood and started to grow independent of my Microsoft-friendly family I quickly began down the path to the free and open source software community. Early blog posts covered intriguing topics such as complaining about my parent's internet filter, a horrible hack to "replace" the battery of a dead gameboy game, announcing my friend's Minecraft guild had a new website (in PHP), and so on. After Blogspot, I moved to Jekyll on GitHub pages, publishing You don't need jQuery in 2013. For a long time this was the oldest post on the site. I'm pretty proud of my writing skills and have a solid grasp on who I am today, but the further back you go the worse my writing, ideas, values, and politics all get. I was growing up in front of the world on this blog, you know? It's pretty embarassing to keep all of this old stuff around. But, I decided a long time ago to keep all of it up, so that people can understand where I've come from, and that everyone has to start somewhere.1 At some point - I'm not sure when - I switched from Jekyll to Hugo, and I've stuck with it since. But lately I've been frustrated with it. I'd like my blog engine to remain relatively stable and simple, but Hugo is quite complex and over the past few years I've been bitten by a number of annoying and backwards-incompatible changes. And, as part of my efforts to remove vibe-coded software from my stack, I was disappointed to learn that Hugo is being vibe coded now, and so rewriting my blog went onto the todo list. Choosing the right static site generator (SSG) was a bit of a frustrating process. Other leading candidates, like Pelican or Zola, are also ## How I Made $360 by Serving Markdown to A.I. agents from My Jekyll Blog DevFeed: [How I Made $360 by Serving Markdown to A.I. agents from My Jekyll Blog]() Original publisher: [Read original article]() Author: Daniel Doubrovkine (dblock@dblock.org) Published: 2026-04-11T00:00:00Z Content type: opinion Language: en Sources: [Daniel Doubrovkine]() Topics: [Jekyll](), [Markdown]() Tags: [ai](), [blogging](), [jekyll](), [markdown](), [tech]() ### AI overview The author describes adding clean Markdown versions of Jekyll blog posts so AI agents can fetch them instead of parsing HTML. Thirty days later, a linked Monarch referral produced 18 signups, 12 paid conversions, and $360 in referral earnings, with no change in SEO traffic. ### Source excerpt In April 2025 I wrote Apologizing for My Obsessiveness Over Punctuation, a post about my various organizational compulsions. Near the end, almost as an aside, I mentioned that I obsessively categorize expenses in Monarch, a personal finance app, linking it with my referral code. That post earned me exactly one referral in the nine months that followed. Then, on January 15th, 2026, I wrote Serving Markdown for AI Agents. The idea is simple: for every post on this blog, there's now a .md version at the same URL. AI agents can discover and fetch clean markdown instead of parsing HTML. I didn't think much of it. Exactly thirty days later - the length of Monarch's free trial -- I started getting a stream of referral conversion notifications without any change in SEO traffic. Eighteen signups. Twelve converted to paid. At $30/referral, that's $360. We live in the future. How I Made $360 by Serving Markdown to A.I. agents from My Jekyll Blog was originally published by Daniel Doubrovkine at code.dblock.org | tech blog on April 11, 2026. ## Migrating an 11-Year-Old Blog from Jekyll to Astro with Kiro DevFeed: [Migrating an 11-Year-Old Blog from Jekyll to Astro with Kiro]() Original publisher: [Read original article]() Published: 2026-03-17T00:00:00Z Content type: opinion Language: en Sources: [Alex Korbonits]() Topics: [migration](), [Astro](), [Jekyll](), [Kiro](), [Claude](), [Artificial Intelligence](), [ide]() Tags: [ai](), [astro](), [blog](), [claude](), [commands](), [ide](), [jekyll](), [kiro](), [migration]() ### AI overview The author describes migrating an 11-year-old blog from Jekyll to Astro in one evening with help from Kiro and Claude. Kiro read the existing Jekyll files, generated Astro components, fixed build errors, and iterated on the redesign. ### Source excerpt A year ago this would have taken a week. How I migrated an 11-year-old Jekyll blog to Astro in one evening with two toddlers in the house. ## Serving Markdown for AI Agents in Jekyll DevFeed: [Serving Markdown for AI Agents in Jekyll]() Original publisher: [Read original article]() Author: Daniel Doubrovkine (dblock@dblock.org) Published: 2026-01-15T00:00:00Z Content type: tutorial Language: en Sources: [Daniel Doubrovkine]() Topics: [Jekyll](), [Markdown](), [Artificial Intelligence](), [GitHub Actions](), [GitHub]() Tags: [agents](), [ai](), [ai-agents](), [deployment](), [github-actions](), [jekyll](), [markdown]() ### AI overview The article explains how a Jekyll blog on GitHub Pages serves each post's source Markdown alongside its HTML so AI agents can access cleaner, structured content. A GitHub Actions workflow copies the Markdown files to matching .md URLs and adds an alternate link in the HTML head for discovery. ### Source excerpt Dries Buytaert recently wrote about The Third Audience. For decades, websites have targeted two audiences: humans and search engines. AI agents are now the third audience, and most websites aren't optimized for them yet. AI agents prefer clean, structured content over HTML. Markdown is ideal - it's readable, semantic, and free of navigation chrome. So I made this blog serve its source markdown files alongside the HTML. How It Works For every post like /2026/01/15/serving-markdown-for-ai-agents.html, you can now fetch the source at /2026/01/15/serving-markdown-for-ai-agents.md. AI agents can discover this via a tag in the HTML head: Implementation Since this is a GitHub Pages blog, custom Jekyll plugins don't work. Instead, I added a GitHub Actions workflow that builds Jekyll and copies the markdown source files to _site before deployment. The workflow extracts the date and slug from each post filename and copies it to the matching URL path with a .md extension. Should You Do This? Dries raises a valid concern: are we just making it easier for AI companies to use our content without sending traffic back? Perhaps. But AI agents are already crawling our sites. Giving them cleaner input might lead to better attribution and more accurate responses that reference our work. The web has always been about making information accessible. This is just the next evolution. Plus, we will soon all work for AI anyway, so might as well get on its good side. Meta This entire feature was implemented by Claude, and this post was written by it as well. Added GitHub Actions workflow to deploy and serve markdown. Use Ruby 3.4 in deploy workflow. Also serve page markdown files. Added link rel alternate for markdown discovery. Moved markdown link to post layout. Fixed markdown alternate URL to remove .html. Serving Markdown for AI Agents. Serving Markdown for AI Agents in Jekyll was o ## Why I Created a Personal Blog and Chose Zola with GitHub Pages DevFeed: [Why I Created a Personal Blog and Chose Zola with GitHub Pages]() Original publisher: [Read original article]() Author: Stanko Published: 2025-01-18T00:00:00Z Content type: opinion Language: en Sources: [Stanko Tadić]() Topics: [Jekyll](), [GitHub Pages](), [Website](), [static-site-generator](), [hosting](), [Programming](), [GitHub](), [WordPress]() Tags: [blog](), [github](), [github-pages](), [hosting](), [jekyll](), [programming](), [static-site-generator](), [website](), [wordpress]() ### AI overview The author explains why they created a personal blog, describing it as a way to maintain a personal website and share programming projects outside social networks. They discuss moving from Jekyll to Zola, keeping the site on GitHub Pages, and their interest in eventually building a static site generator with interactive posts and JSX. ### Source excerpt I've seen this challenge on Herman's blog. I liked it, so I decided to do my own version, even though I'm not using the bear blog. For the same reason, I slightly adapted the original questions. Why did you make the blog in the first place? # Since I first got online, I've wanted a personal website - a piece of internet I can call my own. I had a few websites over the years, but none of them are online anymore (and I don't have backups). Then, in my late twenties, I decided to try again. As someone who loves programming and making things, I've gathered plenty of material to share over the years. I also wanted to change the fact that I hadn't written much since high school. I've never been a fan of social networks, so starting a blog felt like the perfect thing for me -- I could have my own website and share the things I'm working on. This blog has been up since 2016, and I'm really proud of it. While the frequency of my posts has gone down, I like to think the quality has gone up. Why did you choose Bearblog Zola and GitHub Pages? # Before Zola, I used Jekyll, which is tightly coupled with GitHub Pages. GitHub Pages restricts you to the default Jekyll configuration, so I couldn't customize all the stuff I wanted. I started looking for a replacement and stumbled on Zola. It seemed very nice -- fast, a single binary, with a sane templating language. After trying it, I really liked it and decided to stick with it. I kept it deployed on GitHub Pages because I think they're great. Free and fast hosting, and the fact that I don't have to mess with deployments myself -- thanks, GitHub folks! However, for a long time now, I've wanted to write my own small static site generator. It would support interactive posts/components and use JSXI think that JSX is a great templating language. If I ever do it, I'll open-source it. Have you blogged on other platforms before? # As mentioned above, this blog used to be a Jekyll blog. Before that, I tried keeping a blog a few times, but only ## How to automatically add WebP post banners to Jekyll for faster load times DevFeed: [How to automatically add WebP post banners to Jekyll for faster load times]() Original publisher: [Read original article]() Author: Jake Lee Published: 2024-11-30T00:00:00Z Content type: tutorial Language: en Sources: [Jake Lee's Programming Blog]() Topics: [Jekyll](), [Web Development](), [Accessibility](), [browsers](), [CSS]() Tags: [accessibility](), [how-to](), [images](), [jekyll](), [liquid](), [optimisation](), [times]() ### AI overview A tutorial on automating WebP banner generation and delivery in Jekyll. It explains configuring a conversion library, generating WebP files, serving them conditionally with Liquid and picture/source elements, and providing alternative text. The article also notes possible color-rendering issues with the converter. ### Source excerpt Most modern browsers can handle the smaller & speedier WebP versions of images, yet generating them manually can be a pain! Here's how to do it automatically in Jekyll. ## Website refresh DevFeed: [Website refresh]() Original publisher: [Read original article]() Author: info@jeroenmols.com (Jeroen Mols) Published: 2024-09-20T00:00:00Z Content type: opinion Language: en Sources: [Jeroen Mols]() Topics: [Website](), [Hugo](), [Jekyll](), [Web Development](), [modern web development](), [Netlify](), [Vercel]() Tags: [blogging](), [blogs](), [development](), [hugo](), [jekyll](), [migrate](), [netlify](), [platform](), [redesign](), [static-site-generator](), [vercel](), [web-development](), [website](), [website-refresh]() ### AI overview A personal account of migrating a seven-year-old Jekyll website to Hugo. It explains the old site's deployment setup and limitations, the motivations for the redesign, and the author's evaluation of static-site generators and hosting options. ### Source excerpt After 7 years, it was time to migrate my old Jekyll website to a new more modern platform. Read on to learn why, how, and what the main challenges were in this process. ## Meet Jekyll - The Static Site Generator DevFeed: [Meet Jekyll - The Static Site Generator]() Original publisher: [Read original article]() Author: Techno Tim Published: 2022-05-28T15:00:00Z Content type: tutorial Language: en Sources: [Techno Tim]() Topics: [Jekyll](), [GitHub Actions](), [Markdown](), [Docker Compose](), [Open Source]() Tags: [docker](), [git](), [github-actions](), [github-pages](), [jekyll](), [markdown](), [open-source](), [self-hosted](), [static-site-generator]() ### AI overview A practical tutorial on building a Jekyll documentation site with the Chirpy theme. It covers installation and configuration, Markdown pages, GitHub Actions builds, GitHub Pages hosting, self-hosting, Docker, production builds, and post formatting. ### Source excerpt Jekyll is a static site generator that transforms your plain text into beautiful static web sites and blogs.It can be use for a documentation site, a blog, an event site, or really any web site you like. It's fast, secure, easy, and open source.It's also the same site generator I use to maintain my open source documentation.Today, we'll be installing and configuring Jekyll using the Chirpy them... ## Using Google Forms for Jekyll Comments, Revisited DevFeed: [Using Google Forms for Jekyll Comments, Revisited]() Original publisher: [Read original article]() Author: JD Porterfield (jd.porterfield@alumni.rice.edu) Published: 2021-09-25T00:00:00Z Content type: tutorial Language: en Sources: [JD Porterfield | Articles]() Topics: [Jekyll](), [Forms](), [implementation](), [Code](), [GitHub]() Tags: [article](), [code](), [forms](), [free](), [github](), [guide](), [how-to](), [implementation](), [jekyll](), [update]() ### AI overview An updated guide to using Google Forms for comments on Jekyll sites. It describes changes to the original implementation, provides upgrade guidance, and introduces a dedicated GitHub project with labeled releases for maintaining the code. ### Source excerpt Displaying comments on your blog for free using Google Forms is now even easier! ## Testing Code Tabs DevFeed: [Testing Code Tabs]() Original publisher: [Read original article]() Author: JD Porterfield (jd.porterfield@alumni.rice.edu) Published: 2021-09-12T00:00:00Z Content type: tutorial Language: en Sources: [JD Porterfield | Articles]() Topics: [Jekyll](), [Markdown](), [CSS](), [Code]() Tags: [code](), [css](), [jekyll](), [markdown](), [plugin]() ### AI overview This article demonstrates the jdvp-codetabs-commonmark Jekyll plugin, which adds tabbed code blocks for showing multiple language snippets. It also describes optional code-copying controls and light/dark mode switching within code blocks. ### Source excerpt Testing the jdvp-codetabs-commonmark plugin's functionality ## I redesigned my site DevFeed: [I redesigned my site]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2021-06-24T00:00:00Z Content type: opinion Language: en Sources: [Monica Dinculescu]() Topics: [Website](), [generative art](), [Web Components](), [HTML](), [JavaScript](), [Jekyll](), [GitHub Pages]() Tags: [components](), [generative-art](), [github-pages](), [html](), [ibm](), [javascript](), [jekyll]() ### AI overview The author explains why they redesigned their personal website: they were publishing fewer blog posts, wanted to showcase generative art, and replaced an outdated emoji custom element with a simpler implementation. The site continues to use Jekyll through GitHub Pages without a build step or minification. ### Source excerpt The last time I changed something big on my site was 3+ years ago. I was really into gradient rainbow text and IBM Plex Mono. It was a mild increment over whatever I had before, which was just a cleaned up and colourful version of Left from like 6 years prior. Anyway, what I'm saying is: this website had hella split ends. Here's the before and after: ↓ But also, why? I used to write a lot of blog posts, so my website was very blog focused. Originally the home page was just a listing of posts with some copy sprinkled in. As the pandemic hit, I started writing fewer and fewer posts, so having the one post of 2020 show up as a listing was ridiculous. On top of that, this year I started focusing a lot more on making generative art and I thought it was sad I wasn't showing that anywhere on the site! The beauty of generative art is that you can just keep generating it over and over again, and my site was a long white column of text. No more! git diff Ok so hear me out, this looks bad and that's because: it is bad. One cute thing my old site had was a custom element. You pressed it and got a rain of emoji. Brilliant. The problem is that I wrote that in like 2017, and used the well deceased v0 version of the web components spec. As a result, it had a gazillion dependencies (rip bower_components) and polyfills and ancient trash. 23906 lines of trash to be exact. Gooood riddance. The added 1580 lines are a bit of a bore: 100 of these are this post. another 300 is the HTML Ipsum from CSS tricks because I'm always scared I'm going to break a style on some ancient post. 300 lines of JavaScript for the header art that I don't minify because I'd like to be able to read this in the future to fix whatever mistakes past Monica made, and I don't have a build step set up. I'm still using the Jekyll that comes out of the box with GitHub pages and I am never looking back. the rest is actual code that I touched! There was some really horrifying markup on the project/talks/tem ## Introducing Henry for Jekyll DevFeed: [Introducing Henry for Jekyll]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2021-03-20T07:00:00Z Content type: release Language: en Sources: [Kaushik Gopal's Site]() Topics: [Jekyll](), [CSS](), [HTML](), [Web Development]() Tags: [announce](), [blog-post](), [css](), [features](), [html](), [implementation](), [jekyll](), [open-source]() ### AI overview The article announces Henry, a free and open-source Jekyll theme. It describes customization through override files, footsidenotes, image display options, related-post links based on tags, and external URLs with commentary. ### Source excerpt Henry is a theme I first open-sourced for Jekyll. I've now recreated Henry for Hugo after migrated this blog to Hugo. You can read about it here. I've used Jekyll as my blog engine here and meticulously tweaked it over the years to support a bunch of features. Many folks have asked me if I would ever put my theme up for sale or distribute it more widely. I'm happy to announce that it's now available for free and open source. Introducing Henry - a Jekyll theme with a gorgeous reading experience, chock-full of features. Features # Customizability ## A blog theme is only useful if it is versatile enough to reflect your unique character and touch. Henry is extremely customizable. With simple scss override files you can customize the entire look of your blog. I've made sure the overrides get layered in, on top of Henry's base CSS making it easy to quickly add your own customizations. Take a look: Your browser doesn't support HTML5 video. Download the video instead. To see a demo of the difference, compare this blog (what you're currently reading) with my brother's. Both use Henry. You can push the boundaries by adding independent pages and nifty scripting. Take a look at this sample portfolio page I've started building for my brother's blog.1 FootSidenotes ## I picked this feature up from Tufte CSS2 - inspired by the legendary Edward Tufte. If you're reading this post on a wide screen you should notice the sidenote tips above. Go ahead and hover your cursor over it to see the sidenote highlighted. If you're on a narrower screen (or phone) the sidenote morphs into a traditional footnote with quick jump links. You can read more about this feature and its implementation in this blog post. Image display ## With Henry, you can display images in a variety of ways. Or use HTML directly with customized css tags: // Added this to my main_override.scss file .tac { margin: 0 auto } Courtesy: lawsofux ## Week 1: A personal update on returning to Magenta and rebuilding a Jekyll site DevFeed: [Week 1: A personal update on returning to Magenta and rebuilding a Jekyll site]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2021-01-04T00:00:00Z Content type: opinion Language: en Sources: [Monica Dinculescu]() Topics: [Development](), [Jekyll](), [GitHub](), [Code]() Tags: [code](), [development](), [github](), [jekyll]() ### AI overview A personal weekly update about rebuilding a Jekyll site with roughly 40 GitHub commits, returning to Magenta after a fellowship with the Trevor Project, and leading a team that classified suicidal ideation. The author also discusses broth, television, Animal Crossing, and returning to piano. ### Source excerpt I've been thinking for a while about setting this up, and this week seems as good as any. Both Alice and Frances have weekly updates that are a joy to read. Jenn has a live laugh blog. Maybe this is the year of long form tweets? I haven't touched my site in like 6+ months so when I tried to run jekyll locally it obviously didn't work, so what you're reading took like 40 commits on GitHub. In work news, I'm coming back to Magenta after 6 months of being a fellow with the Trevor project. I lead a team that worked on classifying suicidal ideation for one of their projects. The work was super interesting (though often sad), and in a shocking development i really enjoyed being a team lead. I think that even though I'm really good at writing actual code, I'm also good at herding cats and holding a lot of statuses and details in my head. I was worried at the beginning of the fellowship that TLs don't write any code and I would suddenly become a meeting chair, and even though I did have a ton of meetings, I also wrote a ton of code. I know it's weird to hear a woman assert things she's good at it. This is also a new thing I'm trying out. My notes, my rules! In personal news, I've gotten really into broth-as-a-savoury-afternoon tea. I used to make a lot of miso (and drink it out of a cup; this part is key), but to add some variety in my life, this week I started boiling a bunch of vegetables during meetings and making my own broth. Anything for variety in the apocalypse, amirite. Goldie moved in to my Animal Crossing island. I am exclusively watching serial killer shows right now (Des, I'll be gone in the dark, Ripper) which isn't exactly off brand but might be a little TOO on brand, you know? That's what I get for finishing Bridgerton in 2 days. For my birthday in November my mum got me some new books of piano sheet music, so I've started playing some piano again. Before I moved to America, I used to play every day and be actually good at it, but much like with everything e ## 2020 Recap: Projects, Blog Changes, Mechanical Keyboards, and TV DevFeed: [2020 Recap: Projects, Blog Changes, Mechanical Keyboards, and TV]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2021-01-01T07:00:00Z Content type: opinion Language: en Sources: [Kaushik Gopal's Site]() Topics: [Jekyll](), [CSS](), [User experience (UX)](), [Web Development](), [Hacking]() Tags: [apple](), [blog](), [css](), [hacking](), [jekyll](), [ux]() ### AI overview A personal 2020 recap covering slower development of Fragmented, a domain move and customizations to the author's blog, a CSS refactor and minimal Jekyll podcast theme, mechanical keyboard experiments, and increased television viewing. ### Source excerpt From my 2020 post: 2019 has been the year that's primed me the most for life changes. I imagine 2020 will the be the one where a lot of these changes materialize. ... that's cute. If you're reading this in the future and suprised why, I suggest this Netflix mockumentary. Contagion style blazing dumpster fire year aside, it's been hard to find the motivation to write this post. But reading my previous years' posts, I'm usually grateful past me took the time to capture my thinking, priorities and general frame of reference. So power on, I shall. 2020 Recap: # Fragmented ## Fragmented remains my proudest labor of love but I'm not kidding about the labor part of this statement. We're taking it much slower on Fragmented releasing as and when, our lives allow us. But with 2021 rolling around, the hope is that we can kick things back up atleast from the current dormancy. Stay tuned. jkl.gg ## Lot of changes here. I moved my primary domain and assets from kaush.co1 to jkl.gg. This blog saw a lot of tweaks and customizations. The joke goes: most people with custom blog setups spend more time customizing their blog than writing posts. This was true for me but I actually enjoy the process of customizing my blog. In addition to (pleasantly) reminding me of my WebDev days, it also helps me learn and understand my UX skills better. Posts like the one I wrote on sidenotes2 come from this process. Another change that was probably not evident was the entire CSS refactor of this blog. A lot of display:grid is now being used. No post on this but in the process of this refactor, I've actually started work on a minimal jekyll theme for podcasts .3 Mechanical keyboards and hacking ## Productivity has always been a theme for this blog. This year I played (and spent) a lot with Mechanical Keyboards. It was a fun experiment, learning to flash and customize keyboards. Eventually settled with tricking out existing apple keyboards with karabiner and goku. Lot of TV ## I watched a lot of TV. This ## Jekyll & GitHub Actions DevFeed: [Jekyll & GitHub Actions]() Original publisher: [Read original article]() Author: JD Porterfield (jd.porterfield@alumni.rice.edu) Published: 2020-11-07T00:00:00Z Content type: tutorial Language: en Sources: [JD Porterfield | Articles]() Topics: [GitHub Pages](), [Jekyll](), [GitHub Actions](), [GitHub]() Tags: [github](), [github-actions](), [github-pages](), [jekyll]() ### AI overview This tutorial explains the limitations of deploying Jekyll sites directly through GitHub Pages, including its restricted support for Jekyll plugins and gem versions. It presents GitHub Actions as a way to build the site automatically on commits and publish the generated content. ### Source excerpt The standard GitHub Pages process imposes limitations on which Jekyll plugins we can use. Let's avoid this issue using GitHub Actions instead. ## Jekyll footnotes as Edward Tufte inspired sidenotes DevFeed: [Jekyll footnotes as Edward Tufte inspired sidenotes]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2020-07-21T07:00:00Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Jekyll](), [CSS](), [JavaScript](), [jQuery](), [Web Development]() Tags: [browser](), [code](), [css](), [javascript](), [jekyll]() ### AI overview The article explains how to implement Tufte-inspired sidenotes in a Jekyll blog by adapting kramdown footnotes. It uses JavaScript and jQuery to position notes in the page margin and discusses handling image loading and browser resizing. ### Source excerpt I've been looking into Tufte CSS recently. Tufte CSS -inspired by the teachings of the legendary Edward Tufte1- provides suggestions and tools to style web articles for improved legibility. I've started to incorporate some of those principles here while still trying to keep the authenticity of my original design. Most of these changes have been in the realm of CSS however the sidenotes feature was a slightly trickier beast. I've implemented this feature in my blog theme "Henry" for both Hugo & Jekyll. Jekyll kramdown comes built in with a footnotes feature that I've used here for some time. It works pretty well for the most part. The only problem though is -as the names suggests- it displays the notes all the way at the bottom of the articles near the footer. Your browser doesn't support HTML5 video. Download the video instead. Edward Tufte instead suggests the use of "sidenotes": Sidenotes are like footnotes, except they don't force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. So my objective was to use the existing kramdown pipes and generate the footnotes, but display them off to the side in the margin instead of at the bottom. Pulling this off is tricky with pure CSS but is baby talk for javascript. So I pulled out my trusty old jQuery2 chops and got this fun side project done. source You can find the js source code here. As is the case with these things though, the devil is in the details. I got the basic functionality down in about an hour but adding the finishing touches took more testing and improving. Here's some of the ones I had to tackle: Image loading throws the position off: ## Since jQuery loads eagerly, it typically wouldn't wait for the images to load before calculating the position. This would cause the position to be off sometimes. Your browser doesn't support HTML5 video. Download the video instead. This is a one-line fix in jQuery: $(window).on("load", function() { // executes after e ## Migrating From Jekyll to Hugo, deploying with Github Pages DevFeed: [Migrating From Jekyll to Hugo, deploying with Github Pages]() Original publisher: [Read original article]() Author: brice.dutheil@gmail.com (Brice Dutheil) Published: 2020-04-20T21:42:10Z Content type: tutorial Language: en Sources: [The Coffee Workshop]() Topics: [Jekyll](), [Hugo](), [migration](), [GitHub Pages](), [Markdown](), [WordPress]() Tags: [github-pages](), [hugo](), [jekyll](), [markdown](), [migration](), [wordpress]() ### AI overview This tutorial describes migrating a blog from Jekyll to Hugo and deploying it with GitHub Pages. It discusses challenges including preserving article links and comments, adapting templates and themes, local generation, and importing existing Jekyll content. ### Source excerpt Moving away form Jekyll. Import is easy, but tackling important details (conserve links to article, conserve comments, migrate some jekyll liquid template, theme tweaking deployment) has been challenging sometime. Motivation When started this blog in 2010 I went like a lot other to Wordpress as this was the one of the most common and easy way to write and publish something, then I got pissed at Wordpress as it was a pain to maintain and to write code, not to mention the speed, it was bad, then Github announced Github Pages, this was a revelation : articles written in pure Markdown, no database or server to maintain, fast writing, fast page thanks to static files. There were quite a few things that were icky like theme modifications, and some Wordpress plugins that were simply not there, but once done it was a robust machine. ## Letters from Sarajevo DevFeed: [Letters from Sarajevo]() Original publisher: [Read original article]() Author: Stanko Published: 2020-03-26T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Website](), [Jekyll](), [Open Source](), [GitHub](), [Netlify](), [JavaScript](), [alt text]() Tags: [alt-text](), [code](), [github](), [javascript](), [jekyll](), [netlify](), [open-source](), [website]() ### AI overview A personal project presents Letters from Sarajevo, a web adaptation of a book based on authentic family letters from Sarajevo during the war in the 1990s. The article describes redrawn illustrations, the site's open-source Jekyll setup, separate English and Serbian deployments, limited JavaScript, Netlify hosting, translation contributions, and its CC BY-NC 4.0 license. ### Source excerpt Today I have a very personal project to share with you all. Letters from Sarajevo is a web adaptation of the book of the same name. My brother wrote the book using authentic letters our father sent us while being stuck in Sarajevo during the war in the nineties. For more information about the book, please check about page. Illustrations # In the process of publishing the book, my father's original letters got lost. We were left with only low resolution scans. That's why I asked my friend Ivan, to redraw (and digitalize) all of the illustrations using scans as a reference. Ivan did an amazing job, just check the comparison below: Tech # The website is open source and the code is available on GitHub. The site is powered by Jekyll, and follows a very similar setup to my blog. The build process is a little bit more complicated, because there are two different versions deployed on two different domains. English versionSoon to become the international version with more translations. Serbian version There is almost no JavaScript at all, except the fix for vh units. I will probably sprinkle some JavaScript goodness, but only as a progressive enchainment. I don't want this to become a single page app. Everything is deployed on Netlify's free plan. Contributing # If you want to contribute, help with translations or you just have a suggestion, please open an issue here or leave a comment on this post. For translations, please note that each image has alt text as well. I'm super happy to say, the website is already being translated to more languages. Special kudos to my colleague Felipe who volunteered to provide Brazilian Portuguese translation. Everything on the website, including the code, is under CC BY-NC 4.0 license. I think the license is fair, as it allows people to share and adapt content as long the appropriate credit is given and it is for non-commercial purposes. Thank you # This project means a lot to my parents and myself. Please let us know if you enjoyed reading ## Fixing Ruby's Invalid Option Error by Unsetting RUBYOPT DevFeed: [Fixing Ruby's Invalid Option Error by Unsetting RUBYOPT]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2020-03-24T00:00:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Ruby](), [Jekyll]() Tags: [jekyll](), [ruby]() ### AI overview This short troubleshooting post explains how an unexpected Ruby "invalid option -:" error prevented a Jekyll post from being created. Unsetting the RUBYOPT environment variable resolved the issue. ### Source excerpt This is a short one but a weird one. My main box rebooted today and when I went to create a blog post, I got this madness: ❯ jekyll post "A Social Media Marketing Strategy that Mom Would Approve" ruby: invalid option -: (-h will show valid options) (RuntimeError) In all my years of ruby, I've never seen -:. All the normal jiggery pokery of: which ruby rvm list etc failed to give me any insights. I finally found the answer on an obscure Github issue that said "unset RUBYOPT" so: ❯ unset RUBYOPT And that gave me back: blog on  gh-pages [🤷] via 💎 v2.3.1 on ☁ us-west-2 ❯ ruby --version ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin16] blog on  gh-pages [🤷] via 💎 v2.3.1 on ☁ us-west-2 ❯ jekyll post "A Social Marketing Strategy that Mom Would Approve" New post created at _posts/2020-03-24-a-social-marketing-strategy-that-mom-would-approve.md. And now, once again, I can (joyfully) write! ## You should CD your blog (Firebase Hosting + Circle CI + Docker) DevFeed: [You should CD your blog (Firebase Hosting + Circle CI + Docker)]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2020-01-29T07:00:00Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Jekyll](), [CI/CD](), [Firebase](), [Docker](), [GitHub]() Tags: [blog](), [code](), [commands](), [continuous-delivery](), [docker](), [firebase](), [git](), [github](), [hosting](), [jekyll]() ### AI overview A developer describes automating deployment of a Jekyll blog hosted on Firebase using CircleCI. The workflow builds the site, checks generated HTML, and deploys it after changes are pushed to GitHub; failures trigger an email notification. ### Source excerpt This blog now 1 uses Jekyll - a static blog generator that takes markdown as an input and pumps html as output. I then copy it over to my hosting server - Firebase, which then happily serves it to the interwebs. This setup has worked out swimmingly well thus far and has been rock solid. Even when my last post got high up the ranks of HN, my blog held steady. Not even the slightest of fears or signs of being fireballed or slashdotted. This is the beauty of HTML. To achieve the above, these are the actual steps: write my blog post in markdown git commit and push blog post to git(hub) (this entire blog is version controlled) run command "bundle exec jekyll build" (use jekyll to generate the html) run command "bundle exec htmlproofer ./site -check-favicon -check-html" (on generated html from step 3 to make sure I don't have broken links etc.) run command "firebase deploy -only hosting" That's 3 steps more than my lazy self is willing to do every single time. In software land, we've solved this problem with CD (Continuous Delivery). You have a server somewhere on the internet, that keeps checking your github repo every time you've made a change, then runs a sequence of commands for you. That's exactly what I did for this blog. I now use Circle CI 2 to ping github and run through steps 3-5. If all's well my blog is updated with my new post. If something didn't go well, I get an email notifying me about it which I can then promptly fix. Even when I'm just tweaking the appearance of this blog, I tend to make a lot of changes 3 to my css (it's like my happy place). Setting up CD has saved me huge amounts of time! If you're a developer, or savvy enough to dabble with some code, I highly recommend it! Here's what my circle ci config looks like: version: 2 jobs: build: working_directory: ~/repo # docker hub images https://hub.docker.com/ docker: - image: kaushikgopal/ruby-node:2.6.5_12.14.0 steps: - checkout # Download and cache dependencies - restore_cache: keys: # Find a cach ## MacOS Catalina, ruby bad interpreter error DevFeed: [MacOS Catalina, ruby bad interpreter error]() Original publisher: [Read original article]() Author: Stanko Published: 2019-12-11T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [macOS](), [Ruby](), [Homebrew](), [Jekyll](), [Development]() Tags: [bash](), [error](), [homebrew](), [issue](), [jekyll](), [macos](), [rbenv](), [ruby]() ### AI overview This troubleshooting article explains a Ruby "bad interpreter" error that prevented Jekyll from running after upgrading macOS to Catalina. The author found that Ruby gems were installed with the Homebrew Ruby, but the executable binaries were not linked correctly, and resolved the issue by adding the gems/bin directory to PATH. After a later Big Sur update, the author switched to rbenv because the same fix did not work. ### Source excerpt Another Catalina rant, this time about Ruby. As far as I know, on MacOS, it is advisable to leave system Ruby version to the OSFor example users don't have write permission on the system's gems folder. , and install a separate version for development. I had one installed via Homebrew, and never had any issues with it. But after Catalina upgrade, I couldn't run Jekyll. Every time it would fail with the following error: $ jekyll -bash: /usr/local/bin/jekyll: /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: bad interpreter: No such file or directory I checked my bash profile and run which ruby to make sure I'm using the one installed by brew, and everything seemed to be in order. # .bash_profile export PATH="/usr/local/opt/ruby/bin:$PATH" # bash $ which ruby /usr/local/opt/ruby/bin/ruby After quick internet search I learned a lot of people are having similar problems after system upgrade, but I couldn't find the solution. I've tried reinstalling ruby, setting GEM_HOME, altering PATH in /etc/profile and /etc/bashrc, removing and reinstalling gems, but nothing worked. Then I tried to see which Jekyll binary is used and realized - for some reason gems were installed using the correct ruby version, but binaries weren't linked properly. So the solution was pretty easy at the end, all I had to do is to find gems/bin folder and add it to my path. # Use ruby installed by brew export PATH="/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/2.6.0/bin/:$PATH" It looks like a common sense, but it took me a couple of hours to figure it out. Hopefully this will save time people facing the same issue. Big Sur update (December 2020) # I got the same error after updating to Big Sur, but this time I couldn't solve it. I still don't know what I was doing wrong. In the end I started using rbenv to manage ruby installations, and it works flawlessly. ## Making Your Jekyll Blog Searchable with HTML, JavaScript and Google DevFeed: [Making Your Jekyll Blog Searchable with HTML, JavaScript and Google]() Original publisher: [Read original article]() Author: Fuzzygroup Published: 2019-11-22T00:00:00Z Content type: tutorial Language: en Sources: [Scott Johnson]() Topics: [Jekyll](), [HTML](), [JavaScript](), [Web Development]() Tags: [blog](), [html](), [javascript](), [jekyll](), [search](), [usability]() ### AI overview A tutorial shows how to add site search to a Jekyll blog using an HTML form and JavaScript that sends site-restricted queries to Google. It explains the required template changes and notes the approach is free and simple, but offers limited control over result presentation and may include Google ads. ### Source excerpt So yesterday someone said this to me: You know the problem with your blog - you write so much and its not searchable. Poppycock. Balderdash. Fizzle Sticks. Ok. Maybe. Yes there's not search box at the top of my blog but anything on the Internet that has a distinct domain name is actually easily searchable just by using Google. For example, here's how you'd find anything I ever wrote about MySQL: site:fuzzyblog.io mysql If you copy and paste that into google then you're get a search of my site for anything I ever wrote about mysql. If we wanted to make this a "feature" of my blog then we would need to do the following: Create an HTML form which has a search box and a search button. We'd need some JavaScript to handle assembling the query and sending it to Google. We'd need to integrate it with Jekyll Step 1: A Basic HTML Form Here's a basic html form: Step 2: JavaScript Here's the JavaScript: What this does is take the query in the search field and assign it to a variable. It then merges it with the "site:fuzzyblog.io" bit of Google syntax. And, yes, there might be an issue with multi word queries needing to be joined with the + character (that's how HTML rolls but Google is generally pretty flexible). I'd test this now and rewrite the query but I'm in an aluminum tube at 35,000 feet without any access to Google (or most developer documentation). The final step is to set document.location to the google url for the search. That forces the query to execute and positions the user on the Google results page. Step 3: Jekyll Integration In order to integrate this with ## Introducing Jekyll URL Shortener DevFeed: [Introducing Jekyll URL Shortener]() Original publisher: [Read original article]() Author: {"twitter"=\>"hlaueriksson"} Published: 2018-11-01T06:00:00Z Content type: tutorial Language: en Sources: [Henrik Lau Eriksson]() Topics: [Jekyll](), [GitHub](), [hosting]() Tags: [building](), [dns](), [domain](), [github-pages](), [google-analytics](), [hosting](), [how-to](), [http](), [jekyll](), [plugin](), [repo]() ### AI overview A tutorial on creating a personal URL shortener with a Jekyll and GitHub Pages template repository. It covers domain configuration, repository setup, short-link creation, and tracking with Google Analytics, and explains that redirects use an HTML HTTP-REFRESH meta tag rather than HTTP redirect status codes. ### Source excerpt Building a URL Shortener with Jekyll and GitHub Pages ## How to Create a Free Static Website and Blog with Jekyll DevFeed: [How to Create a Free Static Website and Blog with Jekyll]() Original publisher: [Read original article]() Published: 2018-07-27T01:59:05Z Content type: tutorial Language: en Sources: [Emily Kager]() Topics: [Jekyll](), [Homebrew](), [macOS](), [Git](), [Package Management](), [Ruby](), [Command-line interface](), [GitHub](), [Atom]() Tags: [atom](), [command-line](), [free](), [git](), [github](), [homebrew](), [how-to](), [jekyll](), [macos](), [minutes](), [personal-website](), [writing]() ### AI overview This tutorial explains how to build a free personal static website with blog capabilities using Jekyll. It covers setting up a text editor, command-line tools, Homebrew, Ruby, Jekyll, Bundler, Git, and GitHub, with examples focused on macOS. ### Source excerpt Do you want a personal website? :computer: [Next page]()