338 lines
16 KiB
HTML
338 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="bg-base-bg">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="A journey from Hugo to Haunt, exploring Scheme and GNU Guix">
|
|
<meta property="og:title" content="Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix">
|
|
<meta property="og:description" content="My journey into the world of Scheme, GNU Guix, and static site generation">
|
|
<meta property="og:url" content="https://glenneth.org/content/posts/hugo-to-haunt">
|
|
<title>Hugo to Haunt Transition - Glenn Thompson</title>
|
|
<link href="../../dist/styles.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-base-bg text-palenight-50">
|
|
<nav class="fixed w-full bg-base-darker/80 backdrop-blur-sm shadow-sm z-50 border-b border-palenight-400/20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex">
|
|
<a href="/" class="flex items-center font-serif text-xl font-bold text-accent-purple">Glenn Thompson</a>
|
|
</div>
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
|
<a href="/#about" class="nav-link text-accent-blue hover:text-accent-cyan">About</a>
|
|
<a href="/#blog" class="nav-link text-accent-blue hover:text-accent-cyan">Blog</a>
|
|
<a href="/#projects" class="nav-link text-accent-blue hover:text-accent-cyan">Projects</a>
|
|
<a href="/#contact" class="nav-link text-accent-blue hover:text-accent-cyan">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="pt-24 pb-16 px-4">
|
|
<article class="max-w-4xl mx-auto prose prose-palenight">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<a href="/" class="inline-flex items-center text-accent-blue hover:text-accent-cyan transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
Back to Home
|
|
</a>
|
|
<span class="text-palenight-300 text-sm">~10 min read</span>
|
|
</div>
|
|
|
|
<header class="mb-8">
|
|
<div class="flex items-center gap-2 text-accent-cyan text-sm mb-2">
|
|
<span>Tech</span>
|
|
<span>•</span>
|
|
<time datetime="2024-05-15T10:30:00">May 15, 2024</time>
|
|
</div>
|
|
<h1 class="text-4xl font-serif font-bold text-accent-yellow mb-4">
|
|
Transitioning from Hugo to Haunt: Embracing Scheme and GNU Guix
|
|
</h1>
|
|
<div class="flex gap-2">
|
|
<span class="text-palenight-300 px-2 py-1 rounded-full bg-base-darker text-xs">personal</span>
|
|
<span class="text-palenight-300 px-2 py-1 rounded-full bg-base-darker text-xs">tech</span>
|
|
<span class="text-palenight-300 px-2 py-1 rounded-full bg-base-darker text-xs">scheme</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content text-palenight-100 space-y-6">
|
|
<p>Hello there! I'm Glenn Thompson, and today, I want to share a significant part of my recent journey into the world of Scheme, GNU Guix, and static site generation.</p>
|
|
|
|
<h2 class="text-2xl font-serif font-bold text-accent-yellow mt-8 mb-4">Discovering Scheme with System Crafters</h2>
|
|
|
|
<p>My journey began with a desire to dive deeper into programming languages and their ecosystems. I am a member of the <a href="https://systemcrafters.net/community/" class="text-accent-blue hover:text-accent-cyan">System Crafters Community</a>, and its founder, David Wilson, announced a short four week course as an introduction to Guile Scheme. The course, <a href="https://systemcrafters.net/courses/hands-on-guile-scheme-beginners/" class="text-accent-blue hover:text-accent-cyan">Hands-On Guile Scheme for Beginners</a>, provided me with a robust introduction to Guile Scheme, a language that emphasizes simplicity and elegance. David's clear explanations and practical examples made learning Scheme both engaging and approachable.</p>
|
|
|
|
<h2 class="text-2xl font-serif font-bold text-accent-yellow mt-8 mb-4">The Move to GNU Guix</h2>
|
|
|
|
<p>Inspired by the principles of Scheme, I decided to take a leap further into the open-source world by transitioning from Arch Linux to GNU Guix. The Guix community, particularly the folks in the <code class="text-accent-purple">#systemcrafters</code> channel on <code class="text-accent-purple">irc.libera.chat</code>, were incredibly supportive and instrumental in helping me navigate this new environment. Their guidance made the switch smooth and rewarding, reinforcing the power and flexibility of GNU Guix as a functional package manager and operating system. More about that experience in another post.</p>
|
|
|
|
<p>There are too many individuals to name here that have helped with the installation and configuration on Gnu guix to mention here. You all have been an incredible help for which I am extremely grateful. Thank you all, for enduring my ignorance, and for your patience and your help.</p>
|
|
|
|
<h2 class="text-2xl font-serif font-bold text-accent-yellow mt-8 mb-4">From Hugo to Haunt</h2>
|
|
|
|
<p>As I settled into Guix, I faced a challenge: Hugo, the static site generator I previously used, was not available as a Guix package. This led me to explore alternatives and eventually discover <a href="https://dthompson.us/projects/haunt.html" class="text-accent-blue hover:text-accent-cyan">Haunt</a>, a Scheme-based static site generator that aligns perfectly with my newfound appreciation for Scheme and Guix.</p>
|
|
|
|
<h2 class="text-2xl font-serif font-bold text-accent-yellow mt-8 mb-4">Overcoming Challenges with Haunt</h2>
|
|
|
|
<p>Transitioning to Haunt wasn't without its challenges. There are no readily available templating systems available for haunt like there are for hugo, but there are plenty of examples <a href="https://awesome.haunt.page/" class="text-accent-blue hover:text-accent-cyan">here</a>. One of my own primary difficulties was creating a custom template that matched my site's aesthetic requirements and functionality needs. Initially, I struggled with configuring the theme layout and ensuring the CSS was applied correctly. Another hurdle was generating the correct URLs for posts and ensuring that summaries appeared as intended on the front page.</p>
|
|
|
|
<p>Thankfully, the Haunt manual proved to be an invaluable resource throughout this process. The comprehensive documentation provided clear guidance on using various modules, functions, and procedures. By carefully studying the examples and explanations, I was able to overcome the obstacles and achieve the desired results for my site. The manual's detailed descriptions of Haunt's inner workings were particularly helpful in understanding how to leverage the flexibility of Scheme to customize my blog.</p>
|
|
|
|
<h2 class="text-2xl font-serif font-bold text-accent-yellow mt-8 mb-4">Crafting My Own Template</h2>
|
|
|
|
<p>Moving from Hugo to Haunt required me to create my own template and customize my site's appearance. This was an exciting opportunity to apply the skills I had learned from David's course and experiment with Scheme in a practical context.</p>
|
|
|
|
<h3 class="text-xl font-serif font-bold text-accent-yellow mt-6 mb-3">Creating the Template</h3>
|
|
|
|
<p>Haunt's flexibility allowed me to define my own theme layout and structure. Here's a snippet of my <code class="text-accent-purple">haunt.scm</code> file, where I defined the theme layout and added custom footer content:</p>
|
|
|
|
<pre class="bg-base-darker p-4 rounded-lg overflow-x-auto"><code class="text-palenight-100 font-mono text-sm">(use-modules (haunt asset)
|
|
(haunt builder blog)
|
|
(haunt builder atom)
|
|
(haunt builder assets)
|
|
(haunt reader commonmark)
|
|
(haunt site)
|
|
(haunt post)
|
|
(sxml simple) ; For HTML generation
|
|
(srfi srfi-1)
|
|
(srfi srfi-19)) ; For date and time procedures
|
|
|
|
;; Load custom templates
|
|
(load "templates/post.scm")
|
|
|
|
(define (format-date date)
|
|
(date->string date "~Y-~m-~d"))
|
|
|
|
;; Define a function to generate the URL for a post
|
|
(define (post-url post)
|
|
(string-append "/" (post-slug post) ".html"))
|
|
|
|
;; Define a function to extract a summary from the post content
|
|
(define (post-summary post)
|
|
(let ((content (post-sxml post)))
|
|
(if (null? content)
|
|
""
|
|
(let ((first-paragraph (car content)))
|
|
(if (string? first-paragraph)
|
|
(substring first-paragraph 0 (min 200 (string-length first-paragraph)))
|
|
(sxml->string first-paragraph))))))
|
|
|
|
;; Define the theme layout
|
|
(define (theme-layout site title content)
|
|
(let ((current-year (number->string (date-year (current-date)))))
|
|
`(html
|
|
(head
|
|
(meta (@ (charset "utf-8")))
|
|
(meta (@ (name "viewport") (content "width=device-width, initial-scale=1.0, shrink-to-fit=no")))
|
|
(link (@ (rel "stylesheet") (href "/assets/palenight.css")))
|
|
(style
|
|
" .craftering {
|
|
margin: auto;
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
.webring-text {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
}
|
|
.craftering a {
|
|
color: #dddddd;
|
|
}
|
|
.webring-text a {
|
|
color: #dddddd;
|
|
}")
|
|
(title ,title))
|
|
(body
|
|
(header (h1 ,(site-title site)))
|
|
(main ,content)
|
|
(footer (@ (class "bg-black bottom-0 w-100 pa3") (role "contentinfo"))
|
|
(div (@ (class "flex justify-between"))
|
|
(div (@ (class "webring-text"))
|
|
(p "I am part of the " (a (@ (href "https://systemcrafters.net") (target "_blank")) "System Crafters") " webring:"))
|
|
(div (@ (class "craftering"))
|
|
(a (@ (href "https://craftering.systemcrafters.net/@glenneth/previous")) "←")
|
|
(a (@ (href "https://craftering.systemcrafters.net/")) "craftering")
|
|
(a (@ (href "https://craftering.systemcrafters.net/@glenneth/next")) "→"))))))))
|
|
|
|
;; Define the custom theme with a consistent layout for index
|
|
(define my-theme
|
|
(theme #:name "My Custom Theme"
|
|
#:layout theme-layout
|
|
#:post-template post-template
|
|
#:collection-template
|
|
(lambda (site title posts prefix)
|
|
`(div (@ (class "content"))
|
|
(h2 ,title)
|
|
(ul
|
|
,@(map (lambda (post)
|
|
`(li
|
|
(article
|
|
(header
|
|
(h3 (a (@ (href ,(post-url post))) ,(post-title post))))
|
|
(p ,(format-date (post-date post)))
|
|
(p ,(post-summary post))
|
|
(p (a (@ (href ,(post-url post))) "Read more...")))))
|
|
posts))))))
|
|
|
|
;; Site configuration
|
|
(site #:title "Just Another Personal Blog"
|
|
#:domain "glenneth.srht.site"
|
|
#:default-metadata
|
|
'((author . "Glenn Thompson")
|
|
(email . "glenn@kirstol.org"))
|
|
#:readers (list commonmark-reader)
|
|
#:builders (list
|
|
(blog #:theme my-theme)
|
|
(atom-feed)
|
|
(atom-feeds-by-tag)
|
|
(static-directory "images")
|
|
(static-directory "assets")))</code></pre>
|
|
|
|
<h3 class="text-xl font-serif font-bold text-accent-yellow mt-6 mb-3">Customizing the CSS</h3>
|
|
|
|
<p>To give my site a personalized touch, I crafted a CSS stylesheet that matched my aesthetic preferences. Here's an excerpt from my <code class="text-accent-purple">palenight.css</code> file:</p>
|
|
|
|
<pre class="bg-base-darker p-4 rounded-lg overflow-x-auto"><code class="text-palenight-100 font-mono text-sm">body {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.content, header, footer, main {
|
|
max-width: 90%;
|
|
padding: 0 5%;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
body {
|
|
background-color: #292d3e;
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
a {
|
|
color: #82aaff;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #c792ea;
|
|
}
|
|
|
|
.content {
|
|
background-color: #1e1e2e;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
article {
|
|
background-color: #282a36;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
article header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.date {
|
|
color: #6272a4;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Additional styles for the craftering */
|
|
.craftering {
|
|
margin: auto;
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.webring-text {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.craftering a {
|
|
color: #dddddd;
|
|
}
|
|
|
|
.webring-text a {
|
|
color: #dddddd;
|
|
}
|
|
|
|
/* Additions for mobile device readability */
|
|
meta {
|
|
name: viewport;
|
|
content: width=device-width, initial-scale=1, shrink-to-fit=no;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
/* Customize styles for smaller screens */
|
|
.logo {
|
|
max-width: 200px;
|
|
}
|
|
}</code></pre>
|
|
|
|
<p>I use the <code class="text-accent-purple">doom-palenight</code> theme in Emacs, my preferred text editor, and I wanted my site to match that aesthetic.</p>
|
|
|
|
<h2 class="text-2xl font-serif font-bold text-accent-yellow mt-8 mb-4">Conclusion</h2>
|
|
|
|
<p>Transitioning from Hugo to Haunt, learning Scheme, and embracing GNU Guix has been an enriching experience. It's not just about using new tools; it's about joining a community that values simplicity, transparency, and collaboration. If you're curious about Scheme or GNU Guix, I highly recommend checking out David Wilson's course on System Crafters and joining the discussions on IRC.</p>
|
|
|
|
<p>I am not a developer of any kind, and learning Scheme has opened my eyes as to how I can craft an environment that I want to work in, and not endure a working environment that the computer is forcing upon me.</p>
|
|
|
|
<p>Thank you for reading, and stay tuned for more updates on my journey!</p>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<footer class="bg-base-darker text-palenight-200 py-12 border-t border-palenight-400/20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<p class="text-palenight-300">© 2024 Glenn Thompson. All rights reserved.</p>
|
|
<div class="webring-text mt-6">
|
|
<p class="text-palenight-300">I am part of the <a href="https://systemcrafters.net" target="_blank" class="text-accent-blue hover:text-accent-cyan">System Crafters</a> webring:</p>
|
|
</div>
|
|
<div class="craftering mt-2 flex items-center justify-center gap-4 text-accent-blue">
|
|
<a href="https://craftering.systemcrafters.net/@glenneth/previous" class="hover:text-accent-cyan">←</a>
|
|
<a href="https://craftering.systemcrafters.net/" class="hover:text-accent-cyan">craftering</a>
|
|
<a href="https://craftering.systemcrafters.net/@glenneth/next" class="hover:text-accent-cyan">→</a>
|
|
</div>
|
|
<p class="text-palenight-300 mt-2">
|
|
<a href="mailto:glenn@glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenn@glenneth.org</a> |
|
|
<a href="https://glenneth.org" class="text-accent-blue hover:text-accent-cyan transition-colors">glenneth.org</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|