About this Site

I originally built this website as just a way to learn about how to use Google Cloud in detail and wanted a working website as a virtual “sandbox”, but ended up being quite a bit more of an undertaking

July 2020 Update

This site has been migrated to a new provider.  Read about it here!

Fun with Freebies

 

I wanted to experiment with some technology that I was familiar with but wanted to learn more about.  I’m always interested in trying new things to enhance my knowledge.  For this build, I was looking for a flexible environment where I could try many things under one, low cost account.  I chose Google Cloud for the basis of my build.  As of right now, this website is costing me almost nothing to run because of Google’s Free Tier.  My experience has been very positive so far and I look forward to trying out more of Google’s available tools.

All of the images here are something that I took.  Just like I don’t really consider myself a web designer, I don’t think I’m a photographer either.  🙂  Stock photography has its place, but I greatly prefer photos that are taken relative to the website they are on.  They seem much more authentic to me and I highly recommend professional photography on any business website.  

NEW: I added a button in the “About Pic” popup that allows you to swap in a stock image from my library using some JavaScript. Try it out!

Please have a look at my post below on the process involved to learn all that’s required to set this up as well as how I developed my ChrisCrowle wordmark.

Google Cloud has a ton of great tools to run nearly any sort of cloud based environment that you or your business would want to.  I built this website using a Google Cloud Virtual Machine running the smallest instance they offered.  Performance is great for this simple solution and its easy to scale up if I needed to.

Debian 10, codenamed “Buster” is a common Linux OS version used for various types of uses.  There were a lot of variations available, but I chose Debian because they are considered a more stable type of Linux, they just released a new verison at the start of Feb 2020, and I just wanted to try a different flavour of Linux as I was most familiar with Ubuntu. 

Webmin is a simple to use Adminstration tool for Linux, Apache and MariaDB / MySQL.  I was doing most of my admin via SSH but it was getting a bit tedious so I opted for this free but powerful solution. 

If you have hosted a website on Linux, you almost definitely used Apache to get it done. Apache might arguably be the most widely used Open Source software on the planet.  They’ve been around for well over 20 years and are the hosting engine  for millions of websites. 

Just like with Apache, PHP has become one of the largest open source technlogies out there. PHP is a general purpose scripting engine and is the core language of many popular open source technologies out there.  In this case, we need it for MariaDB and WordPress.

Rounding out our LAMP stack (Linux, Apache, Maria DB, PHP) is MariaDB.  MariaDB is a basically a clone of MySQL and was made by the MySQL developers as a way to still offer an Open Source database solution that is not controlled by a major corporation (Oracle).  I’m not sure what the signficance of the seal is in their logo, I’m sure it’s on their website somewehere.

WordPress is the technology that is used by more than 35% of the websites worldwide.  It started as a tool to host people’s blogs but quickly evolved thanks to an active development community to the robust solution that it is today.  I’ve built many websites using WordPress with purchased or custom themes, e-commerce, secured login and more.  

Divi is more than a theme, it’s a platform, a website building tool, a theme engine.  The Divi technology encapsulates at least 95% of what I need to do, preventing the need from writing a lot of custom PHP code or CSS.  When these requirements do pop up, it is easy to meld them with the Divi technology, making for seamless operation. 

Google Cloud VM

After I got into learning about the Google Cloud AI offering, I saw that they had a lot more things I could take advantage of.  I always wanted to create my own website after I’ve done it for others several times already and I thought I could take my learning and experimentation to the next level by building it from the ground up.

I’ll talk about the things I did at a high level, but if you are interested in trying this yourself I’ve found that there are many tutorials out there as well as Google even offering a “One Click” type of service.  Google’s service is like many others out there, but you have to pay more than I did!  I estimate that hosting my little site is going to only cost me a few bucks a year and that’s just to cover the cost of the static IP.  Why is this?  Google gives you quite a bit for free under their Google Free Tier.

So because I was interested in trying and fiddling around with stuff, I went about the “build from scratch” path.  This was fun and there were lots of things I learned along the way, but know that if you do this you are responsible for all of the things a paid service provides you, like backups, updates, recovering from critical problems, scaling, etc.

If I wanted to create a commercial website I would not be doing it this way.  One of my favorite hosting partners has been Siteground. While there are lower cost alternatives out there, Siteground offered a lot of tools, reliability and great support whenever I’ve used them.  Enough with the commercial, what did I do?

  1. Create Google Cloud Account and Add in new Virtual Machine
  2. Install Debian 10 Linux
  3. Configure Memory allocated and added a Swap File as the basic Google Cloud VM is pretty low on RAM
  4. Install Webmin
  5. Add a new domain with Google Domains and set it to my website and email
  6. Install the rest of the LAMP stack with is Apache 2, MariaDB (MySQL clone) and PHP 7.3
  7. Setup Maria DB
  8. Install WordPress and configure
  9. Add in Let’s Encrypt SSL
  10. Security Setup and Tuning
  11. Resolve permissions issues
  12. Install Divi onto WordPress
  13. Start working!

As you can see, there are a lot of steps here and it took several hours to do as I was learning and trying stuff along the way.  It was good to brush off my administration and Linux knowledge and just plain fun to build something technical.  The next things I plan to do is build out this website and hopefully get into some interesting data visualization items.

If you have any questions about the above or want some links to resources I used, please Contact Me.  If you are like me and wanted to learn something new, please try this out.  You can do this on other VM platforms like Amazon Web Services or Microsoft’s Azure as well.  LMK your experiences with these platforms!

My Wordmark

While I don’t consider myself a graphic designer, I do know my way around graphics programs, particularly the Corel Suite of Products: https://www.coreldraw.com/en/  I first started using CorelDraw in detail back in 2010 when I started my printing company.  In hindsight, I took a huge risk in going into that venture, as I had pretty much no experience with printing and no customers to lean on to start my company.  While that venture turned into one of the most positive and defining moments of my life, I’ll talk about that in another post.

Since I wanted to start my own website for a variety of purposes, I figured that it did require some design elements as I wanted people that stop by to at least have a look at what I’ve done. The first element that I wanted to do was some sort of identifier for the website and I thought that a logo wouldn’t really suit what I was after.  Some basic text treatments work well when you want a add a bit of pizzazz without going crazy.

The first step I took was to find some typography that I liked and could apply to both a wordmark and the website in general.  I wanted to stick with a standard Google font to keep everything as portable as possible.  I also preferred a more basic look to my wordmark that appealed to my sensibility and simple design tastes.  The font for the wordmark (and Headers in this website) is Raleway: https://fonts.google.com/specimen/Raleway.  I love this font as its very readable and has a simple style that matches me.  I choose to keep the look lowercase as it was understated and modern looking.  Instead of adding a space or other character to differentiate my first and last name I chose to use two different weights.  Bold for my first name and regular for my last.  It looked like this:

It was OK, but seemed a bit to simple and I wanted to add a visual styling  to it.  Originally I just notched out the lower case “e” at the end, but it made the spacing in the last name portion look out of balance.  Then I pulled the notch out all the way across, but it made the wordmark disjointed.

Eventually I pulled back the notch to jsut the last name and adjusted the center point of the “w” just a bit so it sat just above the notch.