Static HTML website for Long Term Ecological Research site
This project contains an example Long Term Ecological Research (LTER) site website which aims to satisfy LTER website guidelines. The website is implemented as static HTML which can be hosted for free using services like Netlify.
- Responsive design and navigation bar using Bootstrap
- Bibliography database using Zotero
- Dataset search using PASTA
- Local site search using Lunr
- Progressive Web App (though not that useful for us presently)
- https://simplesharingbuttons.com/ for sharing buttons
build_index.js is used to build the search index. It is modified from https://github.com/twhiteaker/Lunr-Index-and-Search-for-Static-Sites. Using node.js, you would run build_index.js after every time you updated site content to rebuild the search index, and copy the resulting lunr_index.js into the public/js folder.
apply_template.js is used to update the header or footer for all HTML files
from a template file. See more about templates below.
harvest_zotero.js is used to update the cached bibliography from a Zotero collection. Run this script via Node.js when your Zotero collection has been updated.
RealFaviconGenerator was used to create the various icons and browserconfig.xml. To make your own icons, I suggest starting with a single image file 512x512 pixels in size.
robots.txt tells search engines to index all pages. humans.txt is for someone to read if they want to look at the source files behind the website.
google1b139a0c8d361fbe.html tells Google that I own this website. I need to figure out how to include that on the CDN host without forcing it to be in GitHub, since I do not want to own the site of anyone who forks this repo.
sitemap.xml helps Search Engines index the site.
sw.js is the service worker that enables this website to be a Progressive Web App (PWA). That means it can be pinned to your desktop or home screen, and some caching of resources locally is enabled which permits limited offline use.
You'll notice multiple sizes for images in the img folder. Using a picture tag in the HTML, we tell a browser to only load the image size it needs, saving bandwidth and boosting performance. I use tools like toolur and Optimizilla to compress images.
The apply_template.js script looks for certain parts of HTML files in the
public folder and replaces them with parts from a template. For example, this enables you
to update all pages if you add a new menu item to the navigation bar. For this
sript to work, you must include elements exactly as follows:
- head - For common parts of the
<head>element, such as links to external stylesheets, enclose those parts between<!-- Start Common Head -->and<!-- End Common Head -->comments. - header - Use HTML
<header>element. This is where your navigation bar goes. - footer - Use HTML
<footer>element. This is where your footer goes. - before end of body - This is where you'll often load scripts instead of
<head>so that the scripts don't block loading of the body. Enclose such scripts within a<div>element with idbefore-end-of-body, as in<div id="before-end-of-body"><script async src="js/app.js"></script></div>.
To apply a template, edit apply_template.js so that the TEMPLATE constant is
pointing to the desired template. Then start a Node command prompt and run node apply_template.js. This script requires Node.js and cheerio.
RealFaviconGenerator was used to create the various icons and browserconfig.xml. To make your own icons, I suggest starting with a single image file 512x512 pixels in size.
You'll probably want to manually edit favicon-16x16.png and favicon-32x32.png, or else they may look blurry when rescaled from 512x512. You'll also want to edit favicon.ico (Chrome uses this, for example) since it includes those smaller sizes embedded within it. If you don't already have an editor which handles *.ico files, try redketchup's Icon Editor as it lets you upload the 16x16 and 32x32 images that you just manually created, to replace those sizes in favicon.ico.
For videos played in the background, you need to:
- Remove audio.
- Trim it to just the quality content.
- Make it as small as possible.
- Extract the first frame as an image to use while the video is loading in a browser.
You can accomplish this to a basic degree using a Windows 10 software stack.
To remove audio:
- Use https://www.audioremover.com/ to remove the audio.
To trim and make small:
- Right-click the resulting video in File Explorer, point to Open with, and click Photos.
- Click Edit & Create > Trim.
- Trim the video and click Save as. The Photos app doesn't save at a high bitrate, so you'll likely also reduce file size in this step. You have no control over this.
To extract the first frame:
- Right-click the resulting video in File Explorer, point to Open with, and click Photos.
- Click Edit & Create > Save photos.
- Move the slider to the beginning of the video.
- Click Save a photo.
For more control over the output bitrate, or to add effects such as filters, overlays, and subtitles, you'll need to install video editing software. Tim tested a few and likes the free and open-source cross-platform Shotcut. For tips on reducing bitrate by tweaking Shotcut's many output options, see this Reddit thread on encoding. The key tip was to customize the average bitrate. Tim tried 512 kbps, and this resulted in a file of size 3.9 MB, compared to size 4.8 MB using the basic Windows workflow. The original file size for Tim's test was 16.6 MB. The right value depends on the video, as you may want to preserve more quality in some videos.
Basic Shotcut procedure to export video:
- View the Details tab of the video properties in File Explorer to see the video dimensions, bitrate, and frame rate.
- Open video with Shotcut and trim it.
- Click Export.
- Select the Stock > H.254 High Profile preset.
- Click Advanced.
- On the Audio tab, disable audio.
- On the Codec tab, in the Rate control box, choose Average bitrate.
- Choose an average bitrate. Try 512 kb/s and go from there.
- Click Export File.
Tim says no to these programs, mostly because he couldn't figure out how to effectively reduce bitrate:
- Lightworks
- Avidemux
- HitFilm Express
BLE uses Netlify for free hosting.
A nice feature of Netlify is live previews of branches and pull requests. To see a preview of a branch, input the branch name, two dashes, and then your raw Netlify URL, which is eager-sammet-b7ed61.netlify.com/ for BLE. For example, if a branch is called cool-stuff, the URL would be https://cool-stuff--eager-sammet-b7ed61.netlify.com/.