# IT Solver Marketing Site

A marketing website for [IT Solver](https://www.itsolver.net), 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](https://github.com/CloudCannon/hydra-jekyll-template) and inspired by Made Mistakes [How I'm Using Jekyll in 2017](https://mademistakes.com/articles/using-jekyll-2017/).

Hosted at [Firebase Hosting](https://firebase.google.com/products/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](https://firebase.google.com/pricing) or fixed rate Flame Plan is required for Stripe functions to work.

[Gulp](https://gulpjs.com/) for development workflow.

[Stripe Checkout](https://stripe.com/docs/payments/checkout/client_only) for one-time payments and [Stripe Payment Links](https://stripe.com/en-au/payments/payment-links) for plan sign ups.

[Travis CI](https://travis-ci.com/) for auto deployments of successful builds.

Source code edited in [Visual Studio Code](https://code.visualstudio.com/).

Build status: [![Build Status](https://travis-ci.com/itsolver/msp-marketing-site.svg?branch=master)](https://travis-ci.com/itsolver/msp-marketing-site)

## Lighthouse reports

[Lighthouse](https://developers.google.com/web/tools/lighthouse/) to audit performance, accessibility and user experience.

### Mobile

[![mobile lighthouse report screenshot](https://www.itsolver.net/site-audit/www.itsolver.net/mobile-lighthouse-report-screenshot.png)](https://www.itsolver.net/site-audit/www.itsolver.net/www.itsolver.net_2018-09-12_11-27-30-mobile)

### Desktop

[![desktop lighthouse report screenshot](https://www.itsolver.net/site-audit/www.itsolver.net/desktop-lighthouse-report-screenshot.png)](https://www.itsolver.net/site-audit/www.itsolver.net/www.itsolver.net_2018-09-12_11-25-43-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](https://jekyllrb.com/) 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:

```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:

```powershell
choco install nvm
nvm install 20.12.0
nvm use 20.12.0
```

### Install Ruby and Jekyll

Install Ruby using Chocolatey:

```powershell
choco install ruby -y
refreshenv
```

Verify Ruby installation and install Jekyll:

```powershell
ruby -v
gem install bundler jekyll
```

### Install Git

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

```powershell
choco install git -y
refreshenv
```

### Install Gulp

Install Gulp CLI globally:

```powershell
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:

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

Install rest of dependences:

```powershell
npm install
```

### Initialize Firebase

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

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

### Run Local Server

To run the local server, use the following command:

```powershell
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:

```powershell
firebase deploy
gulp submit
```

### Update Dev Dependencies

To update development dependencies in npm, run:

```powershell
npm install -g npm-check-updates
ncu --dep dev -u
npm install
```
---
## Preparation on macOS

Hydra was built with [Jekyll](https://jekyllrb.com/) version 3.3.1, but should support newer versions as well.

Install brew

```bash
/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._

```bash
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:

```bash
nvm install 14.18.3
nvm use 14.18.3
```

## Install Jekyll on macOS

Manage multiple Ruby environments with rbenv. Source: [jekyllrb.com](https://jekyllrb.com/docs/installation/macos/#rbenv)
People often use [rbenv](https://github.com/rbenv/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.

```bash
# 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:

```bash
# 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](https://github.com/rbenv/rbenv#command-reference) to learn how to use different versions of Ruby in your projects.

```bash on M1 Apple Silicon
RUBY_CFLAGS=-DUSE_FFI_CLOSURE_ALLOC rbenv install 2.7.1
rbenv local 2.7.1
```

```bash on Intel
rbenv install 2.7.1
rbenv local 2.7.1
```

Install Jekyll:

```bash
gem install --user-install bundler jekyll
```

Install dependencies:
rm -r node_modules/sharp

```bash
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

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

Run local server:

```bash
gulp
```

At this point I use [Travis CI](https://docs.travis-ci.com/user/tutorial/#to-get-started-with-travis-ci) for deploying my site.

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

```bash
- firebase deploy
- gulp submit
```

Update dev dependencies in npm:

```bash
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](https://app.cloudcannon.com/), 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](https://github.com/CloudCannon/hydra-jekyll-template).
- Find more templates and themes at [Jekyll Tips](https://jekyll.tips/templates/).
- Learn Jekyll with step-by-step tutorials and videos at [Jekyll Tips](https://jekyll.tips/).
- Learn how to [deliver Jekyll build to Firebase using TravisCI](https://www.wrapcode.com/jekyll-deploy-firebase-travis-ci/)