site

files for beauhilton.com
git clone https://git.beauhilton.com/site.git
Log | Files | Refs

index.html (4583B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3  <head>
      4   <link rel="stylesheet" href="/style.css" type="text/css">
      5   <meta charset="utf-8">
      6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
      8   <link rel="stylesheet" type="text/css" href="/style.css">
      9   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏕️</text></svg>">
     10   <title></title>
     11  </head>
     12  <body>
     13   <div id="page-wrapper">
     14    <div id="header" role="banner">
     15     <header class="banner">
     16      <div id="banner-text">
     17       <span class="banner-title"><a href="/">beauhilton</a></span>
     18      </div>
     19     </header>
     20     <nav>
     21      <a href="/about">about</a>
     22 <a href="/now">now</a>
     23 <a href="/thanks">thanks</a>
     24 <a class="nav-active" href="/posts">posts</a>
     25 <a href="https://notes.beauhilton.com">notes</a>
     26 <a href="https://talks.beauhilton.com">talks</a>
     27 <a href="https://git.beauhilton.com">git</a>
     28 <a href="/contact">contact</a>
     29 <a href="/atom.xml">rss</a>
     30     </nav>
     31    </div>
     32    <main>
     33     <h1>
     34      medical-humanities.org
     35     </h1>
     36     <p>
     37      This post is a work in progress.
     38     </p>
     39     <p>
     40      <time id="post-date">2022-12-26</time>
     41     </p>
     42     <p id="post-excerpt">
     43      I made a static website as an electronic learning system and forum, 
     44 with the option for password protected posts and a controlled editing workflow, 
     45 for free and without a dedicated server. This post has the highlights.
     46     </p>
     47     <p>
     48      It’s here: <a href="https://medical-humanities.org">medical-humanities.org</a>
     49     </p>
     50     <h2>
     51      First, free as in beer
     52     </h2>
     53     <p>
     54      New educational endeavors are, in my experience anyway, almost always
     55 bootstrapped. They start with an idea, passion, even erudition, but
     56 rarely with money.
     57     </p>
     58     <p>
     59      This was no different.
     60     </p>
     61     <p>
     62      There’s some funding coming in, including some I’m grateful for as it
     63 will recompense the time I spent building the website, but overall this
     64 thing needs to run for free.
     65     </p>
     66     <p>
     67      Because of that, I used the best suite of free tools I know of:
     68 GitHub, GitHub Actions, Netlify’s free tier, NetlifyCMS, Hugo, and
     69 digital elbow grease.
     70     </p>
     71     <h2>
     72      Second, free as in freedom (of speech, and the ability to choose
     73 what to share on the open web)
     74     </h2>
     75     <p>
     76      While we have a strict policy against violating HIPAA, we also want
     77 an open forum that can be honest, vulnerable, critical if need be.
     78     </p>
     79     <p>
     80      Though the students are encouraged to make their writing available
     81 for all to read, forming a kind of living magazine from the assignments,
     82 we also want to make it very easy to keep the assignments just within
     83 the group if desired.
     84     </p>
     85     <p>
     86      This combination of desired features led to a need for selective
     87 password protection of certain pages, opted into or out of by each
     88 student writer.
     89     </p>
     90     <p>
     91      Usually, password protection on a website is akin to a lock on a
     92 door, beyond which is a table that has the stuff you want to read. The
     93 routes to sensitive data are locked by the server, you need the key to
     94 get into the room, but once you get in the room you are free to wander
     95 over to the table and leaf through the dusty stack of papers. Since I’m
     96 not paying for a server I fully control, this approach is not going to
     97 work. Every route is accessible by the whole internet, every door is
     98 open. So, instead of worrying about a door and a lock, we trade the
     99 dusty stack of papers for a Rubix cube with a million facets, containing
    100 a message that only comes to light when you match up all the pieces.
    101 Anybody can come and check out the toy, but unless you know the secret
    102 to solving it, it’s just a jumble.
    103     </p>
    104     <p>
    105      To build the Rubix cube I used <a href="https://github.com/Greenheart/pagecrypt">Pagecrypt</a>, which
    106 encrypts individual HTML pages and provides a dialogue to enter a
    107 password to decrypt it. To mark which pages should be encrypted, I used
    108 a simple front-matter key, which a <code>grep</code> command picks out
    109 on every site rebuild.
    110     </p>
    111     <p>
    112      Another neat aspect of this is that the <em>entire</em> page is
    113 encrypted, even the comments section, so if a student wants to make a
    114 post somewhat private and have a personal conversation with the other
    115 members of the class, it’s comfortably hidden from the view of the
    116 public internet.
    117     </p>
    118    </main>
    119    <div id="footnotes"></div>
    120    <footer></footer>
    121   </div>
    122  </body>
    123 </html>