123 lines
5.9 KiB
HTML
123 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>
|
||
[ Static Site Generators | easthighNerd ]
|
||
</title>
|
||
<link href="/res/css/default.css" rel="stylesheet">
|
||
<link href="/res/img/favicon.gif" rel="icon" type="image/gif">
|
||
<link rel="me" href="https://raru.re/@easthighNerd">
|
||
</head>
|
||
<body class="window">
|
||
<div class="window_bar">
|
||
<p>
|
||
Static Site Generators
|
||
</p>
|
||
<a href="/home/" class="close_button">
|
||
<img src="/res/img/close.png" width="48px" height="48px" alt="Close button">
|
||
</a>
|
||
<a href="/blog/" class="back_button">
|
||
<img src="/res/img/back.png" width="23px" height="23px" alt="Back button">
|
||
</a>
|
||
<div class="explorer_bar_top">
|
||
<img src="/res/img/explorer-bar.jpg" width="100%" height="88px">
|
||
<p>
|
||
https://www.easthighnerd.net/
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="window_content">
|
||
<h1 id="static-site-generators">Static Site Generators</h1>
|
||
<p>You’ve likely heard of static site generators before, there certainly
|
||
seems to be no shortage of them</p>
|
||
<p>Just to name a few off the top of my head, there’s
|
||
<a href="https://www.gohugo.io/" target="_blank">Hugo</a>,
|
||
<a href="https://www.jekyllrb.com/" target="_blank">Jekyll</a>, and
|
||
<a href="https://www.11ty.dev/" target="_blank">11ty</a></p>
|
||
<p>I personally have never found static site generators appealing,
|
||
primarily because I didn’t want to be constrained to what themes were
|
||
available to them, nor did I want to have to craft my website around how
|
||
a given static site generator functioned</p>
|
||
<p>I also am “one of those” types of people that like to remove as many
|
||
layers of abstraction as I can from what I am doing, and get down into
|
||
the nitty gritty of things, partially because I want to know how they
|
||
work, partially because I want to not be reliant on a layer of
|
||
abstraction that hides what’s going on under the hood from me</p>
|
||
<p>That said, at least for the ones that you generate from Markdown
|
||
files, I can see the appeal, since Markdown is easy to write, meaning
|
||
you can, say, publish blog posts more often and more easily, compared to
|
||
having to write out all the HTML each time you want to make a new one
|
||
(even if you have an HTML file saved somewhere that has most of what’s
|
||
needed in it already, ya still have to write the new HTML in there)</p>
|
||
<p>I personally like writing out the HTML, it allows me to fine-craft my
|
||
site to be exactly how I like it, although it can be rather time
|
||
consuming to do, even for something so simple as writing a blog post or
|
||
something (which I totally do on the regular…)</p>
|
||
<h2 id="where-i-was">Where I Was</h2>
|
||
<p>So the most recent version of my website (as of late June 2025) was
|
||
completely hand-crafted in HTML and CSS</p>
|
||
<p>I wrote everything in raw HTML, from the initial page where ya click
|
||
the power button on the monitor to get into the site proper, to any blog
|
||
posts I had written, which while fun, honestly did make it a slight
|
||
chore when I wanted to make a new page, or write a new blog post (same
|
||
difference for all intents and purposes)</p>
|
||
<h2 id="what-i-used-to-do">What I Used to Do</h2>
|
||
<p>Before the most recent (again, at the time of writing) redesign of my
|
||
website, I made a nice little Bash script I called WebGen</p>
|
||
<p>It’s a wrapper for a program called
|
||
<a href="https://www.pandoc.org/" target="_blank">Pandoc</a>, which can
|
||
take multiple kinds of document files (i.e. Markdown) as input, and
|
||
convert them into multiple other kinds of document files (i.e. HTML) as
|
||
output</p>
|
||
<p>Pandoc also has the ability to use ‘template’ files for the output,
|
||
allowing, say, an HTML file to be used as a template that the content
|
||
of, say, a Markdown file, can be slapped into at a specific place in the
|
||
HTML</p>
|
||
<p>So my little WebGen script would scour a directory for Markdown
|
||
files, convert them into HTML, put the converted HTML into the
|
||
designated spot in the template HTML file, and output that to an HTML
|
||
file where specified by the Markdown file</p>
|
||
<p>Twas pretty simple</p>
|
||
<h2 id="what-im-doing-now">What I’m doing now</h2>
|
||
<p>After doing the whole “I’m gonna write everything on this website
|
||
from complete scratch” thing for a while, I decided I’d take a look at
|
||
that old WebGen script of mine again</p>
|
||
<p>I modified it to source a config file that houses where the root
|
||
directory of the website is, where the Markdown files are kept, and
|
||
where the template HTML files are located</p>
|
||
<p>The Markdown files now contain the title of the page (which Pandoc
|
||
puts in the final output HTML), the name of the template HTML file to
|
||
use, and the location of the new page relative to the web root</p>
|
||
<p>So the script crawls the directory of Markdown files, one-by-one
|
||
parses the location and template from each Markdown file, and does the
|
||
aforementioned stuff, and bang, web pages!</p>
|
||
<h2 id="long-story-short">Long Story Short</h2>
|
||
<p>I cleaned up WebGen, made some new template HTML files from the two
|
||
main page styles of my website, and am using it again for non-bespoke
|
||
pages on my website, especially blog posts</p>
|
||
<h2 id="if-i-wanna-use-this-thing-of-yours-myself-where-can-i-get-it">If
|
||
I Wanna Use This Thing of Yours Myself, Where Can I Get it?</h2>
|
||
<p>I’ll have it up on my Gitea whenever I get around to spinning up a
|
||
new instance of it, and I’ll update this here post when I do</p>
|
||
<p>I also plan on rewriting WebGen in Python so that people on OSes
|
||
besides Linux can make use of it if they so wish</p>
|
||
<hr>
|
||
<p>
|
||
<img src="/res/img/badges/by-sa.svg" class="cc_badge">
|
||
<br>
|
||
CC BY-SA 4.0
|
||
</p>
|
||
<p>
|
||
This work is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/" class="external_link" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>
|
||
</p>
|
||
</div>
|
||
<div class="explorer_bar_bottom">
|
||
<img src="/res/img/explorer-bar-bottom.jpg" width="100%" height="23px">
|
||
<p>
|
||
https://www.easthighnerd.net/
|
||
</p>
|
||
</div>
|
||
</body>
|
||
</html>
|