~elais/elais.codes

e0a722cbab0ecd31a0ace29692b843313c7225ab — Elais Player 4 months ago 96ad272 master
changed css and added lite sidebar
3 files changed, 59 insertions(+), 58 deletions(-)

M haunt.scm
R posts/how-i-deploy-this-site/{index.md => h-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 {