Using TEI Boilerplate With Hugo

Background

Integrating TEI Boilerplate into a Hugo site using the Academic theme provides a lightweight, static method to publish TEI XML without any server-side processing or translation to HTML.

• The Text Encoding Initiative (TEI) P5 Guidelines define how to encode documents, in particular those representing primary source materials for research and analysis in the humanities and social sciences.

• TEI Boilerplate is a lightweight solution for publishing TEI P5 styled content directly in modern browsers. With TEI Boilerplate, TEI XML files can be served directly to the web without server-side processing or translation to HTML.

• Hugo is an open source static website generator. Hugo allows the appearance of the website to be determined by a theme. This website uses George Cushen’s Academic theme.

Using TEI Boilerplate with Hugo

The TEI Boilerplate instructions state:

Download the [TEI Boilerplate files](http://github.com/GrantLS/TEI-Boilerplate), and host the `dist` directory on a web server.  

The dist directory structure and content including examples are:

dist
├── content
│   ├── custom.xsl
│   ├── dedication.xml
│   ├── demo.xml
│   ├── hardy_a_singer_asleep.xml
│   ├── teibp.xml
│   ├── teibp.xsl
│   ├── teibpstyles.xml
│   └── xml-to-string.xsl
├── css
│   ├── custom.css
│   ├── sleepy.css
│   ├── teibp.css
│   └── terminal.css
├── images
│   ├── acs0000001-02-010.jpg
│   ├── acs0000001-02-011.jpg
│   ├── birds_41.jpg
│   ├── birds_42.jpg
│   ├── birds_43.jpg
│   ├── birds_44.jpg
│   ├── birds_45.jpg
│   ├── satiresofcircums00harduoft_0058.jpg
│   ├── satiresofcircums00harduoft_0059.jpg
│   ├── satiresofcircums00harduoft_0060.jpg
│   └── tv_new_yo_gabba_gabba.jpg
├── index.html
└── js
    └── teibp.js

Hugo provides the static directory to store static content: images, CSS, JavaScript, etc. All the assets inside the static directory are copied over as-is when Hugo builds your site.

To integrate the TEI Boilerplate with your Hugo site:

1. Copy the contents of the TEI Boilerplate dist directory into the static directory of your Hugo site.
2. [Optional] To make the URLs more representative of TEI content, rename the directory static/content/ to static/tei/. (Hugo already has a directory content - do not rename that.)
3. [Optional] To display the TEI Boilerplate static/index.html page rename it static/teibp.html. (Hugo generates index.html for the site home page and will not display static/index.html.)

The structure and contents of my static directory are:

static
├── admin
│   ├── config.yml
│   └── index.html
├── css
│   ├── custom.css
│   ├── sleepy.css
│   ├── teibp.css
│   └── terminal.css
├── images
│   ├── acs0000001-02-010.jpg
│   ├── acs0000001-02-011.jpg
│   ├── birds_41.jpg
│   ├── birds_42.jpg
│   ├── birds_43.jpg
│   ├── birds_44.jpg
│   ├── birds_45.jpg
│   ├── satiresofcircums00harduoft_0058.jpg
│   ├── satiresofcircums00harduoft_0059.jpg
│   ├── satiresofcircums00harduoft_0060.jpg
│   └── tv_new_yo_gabba_gabba.jpg
├── img
├── js
│   └── teibp.js
├── tei
│   ├── custom.xsl
│   ├── dedication.xml
│   ├── demo.xml
│   ├── hardy_a_singer_asleep.xml
│   ├── teibp.xml
│   ├── teibp.xsl
│   ├── teibpstyles.xml
│   └── xml-to-string.xsl
└── teibp.html

Note the directories static/admin and static/img were previously created when Hugo initialize my site. Depending on what you have done previously, your static/ directory may contain other directories and files as well.

You can now publish TEI P5 encoded documents by placing them into the static/tei/ directory on your Hugo site, then building and deploying your Hugo site.

You can see the TEI Boilerplate demo page for this site here. The URL is in the format <domain>/tei/<XML file name>.