Finally, Going live with Eleventy!

Ed H AHSAA Blog
Ed's Blog Index & Contents

Mar 20, 2022 7:00

Started going live today with Hybrid Eleventy Website

Here's how:

  • I knew I had to uplaod a lot of files. I designed the new and improved Eleventy site to fit with the old site in a hybrid state with both old using SSI server side includes and with the new eleventy style where there is one HTML file that has everything built. I did this by introducing 11ty changes on a per folder basis, keeping the changes compartmentalized.

FileZilla

  • I haven't used a dedicated FTP program for a while. I had exteneded my ATOM.app editor with the Remote FTP package and I normally upload files using that method. Remote FTP is good at uploading files as I save them and it probably would have worked, but I needed and wanted something with an easy to view file structure so I don't overwrite files or upload to the wrong location. When I edit files locally, they are in my src directory and the files that need to go live are in the build directory. I remembered using FileZilla a while ago and it is open source which I like supporting open source projects. So I installed FileZilla and figured out how to connect with my current host company Accuwebhost FTP.

  • Installed FileZilla, that was easy. Then used the Site Manager inside of FileZilla to create a profile that connects to the Accuwebhost server which in my case was ssdlinux35.accuwebhosting.com, where the AHSAA website is stored. The port # is the default for FileZilla so no need for me to enter the port number. FileZilla makes it easy to see both the local and the remote tree structures, which is what you want. On the left side I navigated to /Users/MYUSERNAME/Sites/11ty-ahs/build/ and on the right side I navigated to /public_html which is what Accuwebhost uses as the default main folder for the AmesHigh.org website.

  • my goal is that the local build directory matches 1 for 1 and is a mirror of the remote /public_html folder. That is still a work in progress.

Going Live

  • I renamed all the folders on the remote site to filename.pre11ty.extension example: calendar.pre11ty.html then uploaded the new calendar.html file. I renamed all the folders to foldername.pre11ty example: authors.pre11ty and then uploaded the new authors folder.

Upload Issues

  • Everything was transferring great, then after about five minutes of uploading I started getting timeout errors. Tried several times, kept getting the same timeout errors.

  • Tried again, connected to the accuwebhost server fine, I put 400 files in FileZilla queue, 350 transfer OK. The last 50 failed with

    Response: 421 Too many connections (8) from this IP

FileZilla setting to fix FTP upload Too Many connections errors

  • Using the FileZilla Site Manager, I edited the AHSAA profile clicked on Transfer Settings tab. Dropped the maximum number of connections from 8 to 1 and have not had an issue since.

Carefully Uploaded more of the 11ty build directory contents

  • resumed uploading the contents of the 11ty build folder to the live server.
  • I say carefully because I overwrote one of my original files with one that was not working, so I had to dig thru my backups and put it back.

There were a few issues I had to resolve

  1. Server host is case sensitive and local system is not
  2. Some images were missing. Was an easy fix just upload those images.
  4. Forgot to create a few index files I link to from other sites, I have 3500 photos on flickr of AHS related events, reunions etc., each photo has links back to web files like https://ameshigh.org/letters/letters.html so for example, I created a file index.njk in the letters folder with my normal front matter + the following HTML to redirect to the new eleventy style index file. I wanted to start using 11ty style navigation so that is why I did the redirect.


<meta http-equiv="REFRESH" content="2;url=http://www.ameshigh.org/letters/" />

<!-- Need this 6 sec redirect from http://www.ameshigh.org/reunion.html to http://www.ameshigh.org/reunion/ in home directory root because there are 8000 links to this file from all the Flickr photos. Ed H 3/22/2022 during end of pandemic -->

<h1 class="title is-size-3 my-6">Automaticly Redirecting to <span class="ahs">AHS</span> Letters Index Page
  <br />
  <br />
  or click <a href="http://www.ameshigh.org/letters/">http://www.ameshigh.org/letters/</a>
</h1>

<br />
<br />

Redirecting in 3 ... 2 ... 1 ...