3 files changed, 59 insertions(+), 58 deletions(-)
M haunt.scm
R posts/{how-i-deploy-this-site/index.md => deploying-this-site-with-ipfs-and-scheme/index.md}
M static/css/main.css
M haunt.scm => haunt.scm +4 -6
@@ 69,13 69,13 @@
(define %header-menu
`(div (@ (class "sidebar"))
(a (@ (href "/"))
- "(home) pag3")
+ "(home) p493")
(a (@ (href "https://git.sr.ht/~elais"))
- "s0ftwar3 (repo)")
+ "50f7w423 (repo)")
(a (@ (href "/feed.xml"))
"(rss) f33d")
(a (@ (href "/about.html"))
- "ab0ut (me)")))
+ "480u7 (me)")))
(define (site-layout site title body)
`((doctype "html")
@@ 98,9 98,7 @@
"Haunt")
", a static site generator written in "
(a (@ (href "https://gnu.org/software/guile"))
- "Guile Scheme")
- ". Please find the RSS feed " (a (@ (href "/feed.xml"))
- "here."))))))))
+ "Guile Scheme"))))))))
(define (post-template post)
R posts/how-i-deploy-this-site/index.md => posts/deploying-this-site-with-ipfs-and-scheme/index.md +38 -42
@@ 1,45 1,44 @@
-title: How I Build And Deploy This Site
+title: Deploying This Site with IPFS and Scheme
date: 2020-06-07 00:00
author: Elais Player
tags: web, devops
---
-I build and deploy this website using a slightly unorthodox set of tools:
+I build and deploy this website using a slightly unorthodox set of technologies:
-* The Guix package manager
-* The Haunt static site generator
-* IPFS
+* The [Guix package manager](https://guix.gnu.org)
+* The [Haunt static site generator](https://haunt.dthompson.us)
+* The [Interplanetary File System](https://ipfs.io) (IPFS)
I chose these tools for what I believe to be practical reasons. Guix is the
package manager for my distribution (also called guix) and has a lot of neat
-features built around building things in reproducible environments. Haunt is a
-static site generator written in guile scheme, which allows me to reuse tooling
-that I've set up to manage my guix system. I primarily use sourcehut to
-store my repositories, but it unfortunately does not include a
-static site hosting service, so I decided to deploy my site to IPFS because its
-shiny and I did not want to manage a server.
+features built around creating reproducible environments. Haunt is a static site
+generator written in guile scheme, which allows me to reuse tooling that I've
+set up to manage my guix system. I primarily use sourcehut to store my
+repositories, but it unfortunately does not include a static site hosting
+service, so I decided to deploy my site to IPFS because its shiny and I did not
+want to manage a server.
## Setting Up The Environment With Guix
The three of you who read my inaugural post know that I nurture an unhealthy
-infatuation with this package manager. Briefly, it is like nix except written
-in guile scheme and committed to only adding free software to its official
-repositories. I personally believe it has a more intuitive interface than nix
-and feature parity where it matters most (yak-shaving).
-
-The first thing I created when starting this project was a manifest. The file is
-called `guix.scm` and I activate it using the command `guix environment --ad-hoc
--m guix.scm`. This is similar to creating a `shell.nix` file and running the
-command `nix-shell` in that `guix environment` spawns a subshell that includes
-the packages described in the manifest and does not pollute the user's package
-profile, like a generalized nvm. One can also activate these
+infatuation with the guix package manager. Briefly, it is like nix except
+written in guile scheme and committed to only adding free software to its
+official repositories. I personally believe it has a more intuitive interface
+than nix and feature parity where it matters most (yak-shaving).
+
+The first thing I created for this project was a guix manifest. The
+file is called *guix.scm* and I activate it using the command `guix environment
+--ad-hoc -m guix.scm`. This is similar to creating a *shell.nix* file and
+running the command `nix-shell` in that `guix environment` spawns a subshell
+that includes the packages described in the manifest and does not pollute the
+user's package profile, like a generalized nvm. One can also activate these
shells automatically and export their environment to an editor of choice using
direnv.
-```scheme
-;;; guix.scm
+```
+;; guix.scm
(use-modules (gnu packages))
-
(specifications->manifest
'("gcc-toolchain"
"guile"
@@ 54,19 53,16 @@ direnv.
## Building A Static Website With Haunt
Haunt is a simple static site generator that allows authors to treat their
-websites as guile scheme programs. It includes a shell utility that only has two
+websites as guile scheme programs. It includes a shell utility with two
commands: `haunt build` and `haunt serve`. The former converts markdown (and
more) files to html and the latter sets up a server primarily for local
development.
-
-### Using Scheme
-
Haunt provides several procedures for declarative site generation. These include
procedures for creating site metadata, feeds, post templates, and static
-resource loaders, standard shit really.
+resource loaders, standard shit.
-```scheme
+```
;;; a site declaration procedure
(site #:title "Elais Codes"
#:domain "elais.codes"
@@ 86,7 82,7 @@ Posts and pages are templated with SXML, which is an alternative syntax for XML
that uses S-expressions. Since HTML is practically a subset of XML, this allows
the site's templates to be embedded directly in scheme code using backquotes.
-```scheme
+```
;; the backquote (`) character signals that in the expression that
;; follows, every subexpression proceeded by a comma is to be
;; evaluated, and every subexpression not proceeded by a comma
@@ 107,16 103,16 @@ the site's templates to be embedded directly in scheme code using backquotes.
### Generating The Site
-At the time of writing this site's content is written in markdown for now. Each
-article is stored in the `${PWD}/posts` directory. Once its time to publish a
+At the time of writing, this site's content is written in markdown. Each
+article is stored in the *${PWD}/posts* directory. Once its time to publish a
new version of this site I run `haunt build` and barring any errors this
-generates a static site that is stored in `${PWD}/site`. During development I
+generates a static site that is stored in *${PWD}/site*. During development I
run `haunt serve -w` which serves the static content and adds a watcher for
-changes, it is very lightweight and serves the content in no time.
+changes, it is very lightweight and updates the content in no time.
## Deploying with IPFS
-[IPFS](https://ipfs.io/) is an adolescent peer-to-peer protocol for storing and sharing data in a
+IPFS is an adolescent peer-to-peer protocol for storing and sharing data in a
distributed file system. I use it primarily because sourcehut does not host
static websites like github or gitlab and I wanted to play with something new.
Making an IPFS deployed site accessible to the world wide web requires two
@@ 140,7 136,7 @@ charge users until they reach 1 GB of pinned content. Since my site weighs in at
~90kb and won't be growing much anytime soon it's going to be a while before I
hit that limit.
-```bash
+```
# pinata's api environment variables that I store in a .env file
IPFS_DEPLOY_PINATA__API_KEY=<api key>
IPFS_DEPLOY_PINATA__SECRET_API_KEY=<secret api key>
@@ 153,7 149,7 @@ https://elais.codes). Cloudflare provides just that for IPFS users in the form
of [cloudflare-ipfs.com](https://cloudflare-ipfs.com), a portal to content
stored in ipfs nodes. To access this from my website's url, all I have to do is
add a CNAME record for https://elais.codes that points to my site's hash on ipfs
-prefixed by cloudflare-ipfs.com and a TXT record for the `_dnslink`.
+prefixed by cloudflare-ipfs.com and a TXT record for the *_dnslink*.
```
# partial DNS configuration
@@ 164,7 160,7 @@ TXT __dnslink <ipfs-CID>
Once this propagates my site hosted on ipfs becomes available to users on the
world wide web. Since I'm also using cloudflare, I can add SSL/TLS to my domain
using their tools, which is something we should always do.
-```bash
+```
# .env
IPFS_DEPLOY_CLOUDFLARE__API_TOKEN=<api-token>
```
@@ 175,10 171,10 @@ IPFS_DEPLOY_CLOUDFLARE__API_TOKEN=<api-token>
So far we have created, built, and set up hosting platforms
for *elais.codes*. Now we need to deploy the damn thing. To do this we use a
nodejs utility called ipfs-deploy, which has been hinted at in some of the
-previous code blocks. `ipfs-deploy` only requires a `.env` with the correct api
+previous code blocks. `ipfs-deploy` only requires a *.env* with the correct api
tokens and credentials to work and is a one liner.
-```bash
+```
# command to use ipfs-deploy
npx ipfs-deploy -p pinata -d cloudflare -O site/
```
M static/css/main.css => static/css/main.css +17 -10
@@ 1,5 1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@font-face {
font-family: "Planet Estyle";
src: url(../fonts/planet_estyle.woff) format("woff");
@@ 29,7 29,7 @@ html {
font-size: 62.5%;
}
body {
- font-family: "Barlow", Sans-Serif;
+ font-family: "IBM Plex Serif", Serif;
font-size: 14px;
line-height: 1.5;
color: #201d0e;
@@ 107,11 107,17 @@ ul, ol {
margin: 0 0 20px;
}
code, pre {
- font-family: "Space Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
- font-s
+ font-family: "IBM Plex Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+ font-size: inherit;
}
+
code {
- font-size: 13px;
+ color: #090909;
+}
+
+code::before, code::after {
+ content: "=";
+ color: #ccc
}
pre {
display: block;
@@ 121,9 127,11 @@ pre {
line-height: 28px;
background-color: #f5f5f5;
white-space: pre;
- white-space: pre-wrap;
- word-break: break-all;
- word-wrap: break-word;
+ overflow: auto;
+
+}
+pre code::before, pre code::after{
+ content: "";
}
blockquote {
padding: 0 0 0 20px;
@@ 256,7 264,6 @@ table th.right, table td.right {
}
.post ul > li:before {
content: "- ";
- margin-left: -1.25em;
color: #090909;
}
.post ol {