IT Solver Marketing Site

A marketing website for IT Solver, a managed service provider for people and business.

This is a labour of ❤️ for serverless and the latest web technologies, built by a coding novice, Angus McLauchlan, whose day job is running a solo, desktop support business.

Based on CloudCannon's Hydra Jekyll Template and inspired by Made Mistakes How I'm Using Jekyll in 2017.

Hosted at Firebase Hosting for the secure connection, Fast content delivery, Rapid deployment, One-click rollbacks, and the free (Spark) plan for starters. Note the pay as you go Blaze plan or fixed rate Flame Plan is required for Stripe functions to work.

Gulp for development workflow.

Stripe Checkout for one-time payments and Stripe Payment Links for plan sign ups.

Travis CI for auto deployments of successful builds.

Source code edited in Visual Studio Code.

Build status:

Lighthouse reports

Lighthouse to audit performance, accessibility and user experience.

Mobile

Desktop

My workflow

• local dev: Visual Studio Code with gulp running on integrated terminal for local testing of static content.
• version control: push changes I like to this github repository
• automation / continuous integration: pushing code to this github repo triggers Travis build. If build successful, publishes to Firebase.
• to do: create a testing branch and domain (for testing Firebase Functions)

Configure

1. Delete .firebaserc
2. Remove redirects in firebase.json
3. In .travis.yml, replace with your own API keys for Firebase, Stripe and (optional) Slack.
4. Add your site and author details in _config.yml.
5. Add your Google Analytics and Disqus keys to _config.yml.
6. Replace pages and posts with your own.

---

Preparation on Windows

Hydra was built with Jekyll version 3.3.1, but should support newer versions as well.

Install Chocolatey

Chocolatey is a package manager for Windows. Install it by running the following command in an elevated (Administrator) PowerShell:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Install Node.js and nvm

Using Chocolatey, install Node.js and nvm:

choco install nvm
nvm install 20.12.0
nvm use 20.12.0

Install Ruby and Jekyll

Install Ruby using Chocolatey:

choco install ruby -y
refreshenv

Verify Ruby installation and install Jekyll:

ruby -v
gem install bundler jekyll

Install Git

If you haven't already, install Git for Windows:

choco install git -y
refreshenv

Install Gulp

Install Gulp CLI globally:

npm install -g gulp-cli

Install Project Dependencies

Navigate to your project directory and install the necessary npm packages:

Remove existing node_modules/sharp directory and reinstall sharp:

rm -r node_modules\sharp
npm install sharp --unsafe-perm

Install rest of dependences:

npm install

Initialize Firebase

Install Firebase CLI globally and log in to your Firebase account:

npm install -g firebase-tools
firebase login
firebase init # enable Hosting

Run Local Server

To run the local server, use the following command:

gulp

Deployment

If you're using Travis CI, it will handle the deployment for you. Otherwise, you can deploy from your local environment and submit sitemaps to search engines:

firebase deploy
gulp submit

Update Dev Dependencies

To update development dependencies in npm, run:

npm install -g npm-check-updates
ncu --dep dev -u
npm install

---

Preparation on macOS

Hydra was built with Jekyll version 3.3.1, but should support newer versions as well.

Install brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Using bash install nvm. Note: Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Using node version manager install and use node version 9.5:

nvm install 14.18.3
nvm use 14.18.3

Install Jekyll on macOS

Manage multiple Ruby environments with rbenv. Source: jekyllrb.com People often use rbenv to manage multiple Ruby versions. This is very useful when you need to be able to run a given Ruby version on a project.

# Install rbenv and ruby-build
brew install rbenv ruby-build

# Setup rbenv integration to your shell
rbenv init

Open a new Terminal tab and check rbenv is installed:

# Check your install
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-doctor | bash

Restart your terminal for changes to take effect. Now you can install the Ruby version of our choice, let’s go with current latest stable Ruby. If you're interested, head over to rbenv command references to learn how to use different versions of Ruby in your projects.

RUBY_CFLAGS=-DUSE_FFI_CLOSURE_ALLOC rbenv install 2.7.1
rbenv local 2.7.1

rbenv install 2.7.1
rbenv local 2.7.1

Install Jekyll:

gem install --user-install bundler jekyll

Install dependencies: rm -r node_modules/sharp

bundle install
npm install sharp --unsafe-perm
npm install
npm install -g gulp-cli

Initiliaze your own Firebase project from the root of your directory

npm install -g firebase-tools
firebase login
firebase init # enable Hosting

Run local server:

gulp

At this point I use Travis CI for deploying my site.

If you're not using Travis, deploy from local environment and submit sitemaps to search engines:

- firebase deploy
- gulp submit

Update dev dependencies in npm:

npm install -g npm-check-updates
ncu --dep dev -u
npm install

---

Edits

Edit with your favourite text editor. There were editable classes in the original template, for live editing at CloudCannon, but I am doing all editing via source code, so I removed them. CloudCanon is ideal for giving easy access to editors.

Posts

• Add, update or remove a post in the *Posts- collection.
• The Staff Author field links to members in the Staff collection.
• Documentation pages are organised in the navigation by category, with URLs based on the path inside the _docs folder.
• Change the defaults when new posts are created in _posts/_defaults.md.

Staff

• Reused around the site to save multiple editing locations.
• Add excluded_in_search: true to any documentation page's front matter to exclude that page in the search results.

Navigation

• Exposed as a data file to give clients better access.
• Set in src/_data/navigation/main.yml

Footer

• Exposed as a data file to give clients better access.
• Set in src/_data/navigation/footer.yml

Jekyll Resources

• Jekyll marketing site for a managed tech support business, IT Solver, forked from CloudCannon/hydra-jekyll-template.
• Find more templates and themes at Jekyll Tips.
• Learn Jekyll with step-by-step tutorials and videos at Jekyll Tips.
• Learn how to deliver Jekyll build to Firebase using TravisCI