Replacing iWeb is not so Simple, and Other Life Decisions

Saturday, June 18th, 2016

Apple’s iWeb, which was an awesome way to quickly and simply make decent (though non-responsive) websites, has been discontinued, and, unfortunately, there’s no easy replacement for my tiny, simple site. Fortunately, I've been a busy monkey and am at the beginning of a job search, so this is the perfect time to re-create and update my neglected website.
After downloading and reviewing Sandvox ($79), EverWeb ($79), RapidWeaver ($99), a few failed conversions of my existing iWeb website, and spending far too much time on a host of templates that I'm not keen on, I decided the best way forward is by breaking out the old editor and going old school!

Programs used:

  1. Web browser - Chrome for testing and googling. Firefox and Safari are good options
  2. Front-end Framework - Bootstrap for for modern design elements that works reliably on multiple devices
  3. Editor - Sublime is my editor of choice, though Atom and others have a lot going for them too
  4. The Old School Basics - JQuery, CSS, HTML5
  5. File Transfer - CyberDuck (any S3-enabled file transfer utility will work)

Services used:

  1. Version Control - GitHub is my favorite, though any hosted version control service will work
  2. Amazon Web Services - S3
  3. Domain registrar - Hover

Step A: Create the structure

  1. Create a folder structure. Because my site is pretty simple and a little bit of organization goes a long way, I created folders for css files, images, and posts under my website folder so future me will know where to look for any type of resource.
  2. Create and test common elements. I created three types of pages - a landing page/cover letter, a blog article listing, and a template for each blog post. I added extra classes in the HTML to make customization easy. This way, when I wanted to add visual bling, everything was already well tagged and it was easy to add the behaviors that I wanted.
  3. Migrate existing content. I migrated the existing content into the new format, taking care that I didn't accidentally include portions that would throw off the structure of the pages.
  4. Test again I ensured the template I used was easy to use in the future by adding a ton of comments everywhere for future-me to find.
  5. Create new content. I added this post, testing how well my template worked and checking to see how my site looked on multiple virtual devices.

Step B: Fill in the details with Bootstrap and CSS

Bootstrap is a Javascript/JQuery framework used to create designs that look good on many different screen sizes. For this site, there are subtle content and design differences that only show up on the larger or smaller screen sizes. I searched through the documentation and the Bootstrap class list to find which classes to use where.

CSS is a way to keep all a site's styling centralized and consistent. When used well, changing the CSS will change the way the whole site looks. I used Bootstrap classes where possible, and created my own CSS classes when not.

Step C: Upload the site

As before, I used the excellent CyberDuck to upload my content. Their AWS guide is here. CyberDuck comes mostly preconfigured for S3, so all I had to do is copy my IAM user’s Access Key into CyberDuck’s S3 username field, and my IAM user’s Secret Access Key into the password field, and hit connect. Once connected, I right-click mashruwala.org, select Upload, navigate to my published local folder, and off it went!