diff options
Diffstat (limited to 'build/posts/openring')
| -rw-r--r-- | build/posts/openring/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/build/posts/openring/index.html b/build/posts/openring/index.html new file mode 100644 index 0000000..b4e799a --- /dev/null +++ b/build/posts/openring/index.html @@ -0,0 +1,138 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="color-scheme" content="dark light"> + <link rel="icon" href="data:,"> + <title>Building openring with Jekyll Build</title> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1 id="building-openring-with-jekyll-build">Building openring with Jekyll Build</h1> +<p>2022-12-02</p> +<p>I think it’s great when bloggers post their own personal “reading list” of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the “indie” web. This isn’t a new concept by any means, but I wanted something a little more “dynamic”[^1] for my own blog.</p> +<p>After some digging I came across <a href="https://sr.ht/~sircmpwn/openring/">openring</a> and it’s great. Fully customizable, lightweight and completely open source. What more could you ask for?</p> +<p>So, I thought others might be interested in how I’ve implemented openring through my own Jekyll build system.</p> +<h2 id="installing-openring">Installing openring</h2> +<p>You can pull the project <a href="https://sr.ht/~sircmpwn/openring/">directly via SourceHut</a> if you wish, but I would recommend installing through your default package manager. I’m running Arch, so for me it was as simple as running:</p> +<pre><code>yay -S openring +</code></pre> +<p>That’s it. I now have full local access to openring!</p> +<h2 id="jekyll-includes">Jekyll Includes</h2> +<p>You <em>could</em> setup a whole new directory specifically for your openring files, but that seems like overkill. Instead, we will simply add two new files to our existing <code>_includes</code> directory. We will name these files <code>openring-in.html</code> and <code>openring-out.html</code>.</p> +<h3 id="openring-in.html-contents">openring-in.html Contents</h3> +<pre><code><!-- License-Id: CC0-1.0 --> +<section class="webring"> + <h3>Articles from blogs I follow around the world wide web</h3> + <section class="articles"> + {{range .Articles}} + <div class="article"> + <h4 class="title"> + <a href="{{.Link}}" rel="noopener">{{.Title}}</a> + </h4> + <p class="summary">{{.Summary}}</p> + <small class="source"> + via <a href="{{.SourceLink}}">{{.SourceTitle}}</a> + </small> + <small class="date">{{.Date | datef "January 2, 2006"}}</small> + </div> + {{end}} + </section> + <p class="attribution"> + Generated by + <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> + </p> +</section> +<style> +.webring .articles { + display: flex; + flex-wrap: wrap; + margin: -0.5rem; +} +.webring .title { + margin: 0; +} +.webring .article { + flex: 1 1 0; + display: flex; + flex-direction: column; + margin: 0.5rem; + padding: 0.5rem; + background: #eee; + min-width: 10rem; +} +.webring .summary { + font-size: 0.8rem; + flex: 1 1 0; +} +.webring .attribution { + text-align: right; + font-size: 0.8rem; + color: #555; +} +</style> +</code></pre> +<blockquote> +<p>Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via <code>serve</code> or <code>build</code>. I don’t really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder.</p> +</blockquote> +<h3 id="openring-out.html-contents">openring-out.html Contents</h3> +<p>This will generate itself for us every time we rebuild our Jekyll website. It is important to note that any changes you make in this file will be overwritten the next time you rebuild! All custom styling or layout changes should be made in the <code>openring-in.html</code> file.</p> +<h2 id="our-new-build-script">Our “New” Build Script</h2> +<p>To simplify things, we are going to place our main commands in a single build script in the root directory of our Jekyll project. For my personal blog, I’ve named this file <code>build-site.sh</code>. I know - I’m extremely creative.</p> +<p>Place the following inside that file:</p> +<pre><code>openring \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + < _includes/openring-in.html \ + > _includes/openring-out.html +bundle exec jekyll build +</code></pre> +<h2 id="edit-">Edit <code>_config.yml</code></h2> +<p>Next we need to make sure we exclude our new <code>build-site</code> script file, since we really don’t need that pushed up to the main server:</p> +<pre><code># Includes / Excludes +exclude: + - build-site.sh +</code></pre> +<h2 id="almost-done">Almost Done…</h2> +<p>Now you just need to decide where you want your <code>openring</code> feed outputs to render. For this example, we will place them at the bottom of every blog post inside the <code>_layouts/post.html</code> file, like so:</p> +<pre><code>{% raw %}{% include openring-out.html %}{% endraw %} +</code></pre> +<h2 id="build-it-they-will-come">Build It & They Will Come</h2> +<p>This next step is only for those using <a href="https://srht.site">SourceHut Pages</a> to build and host their websites. If you use a different platform (ie Netlify, Vercel, GitHub Pages) the concept should be similar but will most likely require more tweaking on your end. Just a fair warning.</p> +<p>I won’t go into great detail about build script for SourceHut Pages, but feel free to take a look at my <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/.build.yml">very own build file for this website</a>. That <em>should</em> work out-of-the-box for most standard Jekyll websites. (Just be sure to edit with your own details!)</p> +<p><strong>That’s it</strong>. You now have links to blogs you enjoy that will update with each build. Of course, the “latest” blog posts shown will become out-of-date if you don’t blog (or at least re-build your website) on a regular basis. But for me, I see this as a good motivator to keep pushing out content!</p> +<p>Happy sharing!</p> +<h2 id="refs">Refs</h2> +<ol> +<li>Well, as dynamic as a static website can be!</li> +</ol> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br> + Maintained with ♥ for the web. <br> + Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br> + The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>. + </small> +</footer>
\ No newline at end of file |