This site is built using eleventy, starting with the eleventy-base-blog template. There are lots of good tutorials online which I won't replicate here. Instead this pages gives the particular plugins that I use, and some things that caused me trouble.

I apologise in advance for any mistakes here, web design isn't my speciality, so take my advice with a grain of salt. If you see any errors please email me at me@ruvi.blog and I will make a correction.

Plugins #

I used these plugins to extend eleventy's functionality:

  • Images are via eleventy image, following these instructions.
  • Internal links use link_to.
  • Table of contents uses eleventy-plugin-toc.
  • YouTube and Twitter embeds use embed everything. By default the YouTube embed expands to the full page width. To confine it to text width, I made an eleventy shortcode which sticks the url between a <div style='max-width:37.5em'>...</div>.
  • Latex is generated by Katex, following these instructions. To make ampersands work correctly, such as for an aligned environment, you should also add a filter .replace(/&amp;/g,'&') together with the ones mentioned for '<' and '>'. Note that you might have to change the syntax a little bit, in particular sometimes a backslash needs to be escaped. If you want to add a curly brace '{' for example, the syntax is '\\{', rather than the usual '\{'. Similarly a space in math mode is given by '\\;'. Also it sometimes (but not always) has trouble with an underscore, and you may have to escape these as '\_' in your code.

Custom domain #

The site is hosted by Netlify. This follows my (private) Github repo for the page, and rebuilds the site as soon as I push a new version. Netlify offers free hosting, but your web address must be [something].netlify.app.

Pointing a domain to Netlify #

If you want a custom address (for example 'ruvi.blog'), you will have to purchase the domain. You can buy this direct from Netlify, which I assume is streamlined but didn't do myself. Alternatively you can buy the domain from another provider and point this to Netlify. I chose to use Google domains, who are relatively cheap.

There are two ways to make your url redirect to the Netlify site. The first is to get your domain to use the Netlify nameservers, as described here in the Netlify docs. A domain has a list of nameservers, which convert the url ('ruvi.blog') to a IP address of numbers which tells the computer exactly where to look to find the page. If you do this then all of your data gets sent straight to Netlify, cutting out the person you bought the domain from.

This however wasn't a good idea for me, as if I got Google Domains to use the Netlify nameservers, then I wouldn't be able to use any Google Domains features (such as custom email addresses), because all information would go straight to Netlify. Instead I stayed with the Google nameservers, and had to update the DNS record to point to Netlify. First I had to set up Netlify to accept my domain, and then update the DNS as described here. You add an A record, which tells visitors the Netlify IP address corresponding to the url.

Migrating from Wordpress #

Before eleventy my site was hosted by Wordpress, through whom I also purchased the domain. I had to migrate my site to Netlify, and the domain to Google Domains. There are many guides online to automatically download your Wordpress site and convert it to an eleventy-compatible format, I however chose to re-create the site since I didn't have too many posts.

One thing I had to worry about was that the Wordpress urls for the individual pages were different to the addresses in my new site, which would break any external links to the blog. You can fix this by adding a file called _redirects to the root directory of the site, giving a list of redirects to Netlify. For example, my post on entropy had the Wordpress url ruvi.blog/2021/03/31/entropy-as-a-volume-the-geometric-interpretation/, but in the eleventy site is ruvi.blog/posts/entropygeometric/entropy01geo/. To redirect this you just add the following line in _redirects:

/2021/03/31/entropy-as-a-volume-the-geometric-interpretation/ /posts/entropygeometric/entropy01geo/ 301

The number '301' is optional, and signals to the browser that this redirect is just a 'change of address'.

Unfortunately if you create a file called _includes in the root directory, elevently won't automatically copy this to the final site unless you specifically tell it to. There are lots of ways to do this described online, a simple way that worked for me was this one, where you use addPassThroughCopy() in .eleventy.js.

Once you have the redirects and namespace/DNS set up, it is time to move your domain from Wordpress. Instructions for this are given in the Wordpress docs here. Just note that after you have initiated the transfer process from both Wordpress and the new domain registrar, log back into Wordpress, find your domain, and press the button that says you consent to the transfer. By default Wordpress will wait seven days to make the transfer. If you press that button however the process is sped up significantly, for me it took less than an hour.

Other changes #

Making elements match text width #

The webpage could be viewed on a wide desktop browser display, or a narrow cellphone screen. The text width will adapt to the screen size, but we don't want other elements appealing wider than this.

Reddit embeds are placed in an iframe. To make this scale approparitely, define a wrapper class in index.css:

  .redditframe iframe {
    width:100%;
    height:100%;
    max-width: 37.5em;
  }

Then wrap the relevant iframes in <div class='redditframe'>...</div>.

For images, set width="100%" inside the <picture> element generated in .eleventy.js — assuming you followed the instructions I linked to above.

For code embeds, go to css/index.css and modify the entry for code:

  code {
    max-width: 40em;
  }

Flexible layout #

For a wide screen the table of contents is to the right of the post, but if you shrink the width (or view on mobile) the contents moves to be above the posts. This was done using the CSS flexbox layout.

You first define CSS clasess for divs that will hold your post and table of contents, as well as a wrapper:

  .postwrapper {
    display: flex;
    flex-wrap: wrap-reverse;
  }
  
  .posttoc {
    order: 2;
  }
  
  .postcontent {
    order: 1;
  }

Then in the template file for your post, you arrange the items as below. Note that the ordering matters — the content has to go before the toc.

  
  <h1>{{ title }}</h1>
  
  <!-- Things that go above post and table of contents ... -->
  
  <div class="postwrapper">
    <div class="postcontent">

      {{ content | latex | safe }}
      <!-- Rest of post HTML ... -->

    </div>
    <div class="posttoc">
      <aside>
        <br />
        {{content | toc | safe}}
      </aside>
    </div>
  </div>

For the outreach page where the tiles show each interview side-by-side, I defined a new wrapper class flexwrapper, and placed the individual interviews in <div> elements with class flexdiv to give them a bit of padding:

  .flexwrapper {
    display: flex;
    flex-wrap: wrap;
  }
  
  .flexdiv {
    padding-right: 0.5em;
    padding-bottom: 1em;
  }