Setup and Migration Guide

This guide will walk you through setting up the LaHave website on GitHub Pages and migrating from Squarespace.

Prerequisites

  1. GitHub Account: Create one at github.com if you don’t have one
  2. Ruby: Install Ruby 2.7+ from RubyInstaller (Windows) or use your system’s package manager
  3. Git: Already installed (verified)

Step 1: Create GitHub Repository

  1. Go to GitHub and sign in
  2. Click the “+” icon in the top right, then “New repository”
  3. Name it lahave-website (or lahave.github.io if you want the shorter URL)
  4. Make it Public
  5. Check “Add a README file”
  6. Click “Create repository”

Step 2: Connect Local Repository to GitHub

After creating the repository on GitHub, run these commands in your terminal (from this project directory):

git add .
git commit -m "Initial Jekyll site setup"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/lahave-website.git
git push -u origin main

Replace YOUR_USERNAME with your GitHub username.

Step 3: Install Jekyll Dependencies

  1. Install Ruby (if not already installed)
  2. Install Jekyll and Bundler:
    gem install jekyll bundler
    
  3. Install project dependencies:
    bundle install
    

Step 4: Customize Content

Update Site Information

Edit _config.yml to update:

Migrate Content from Squarespace

  1. Visit your current Squarespace site at lahave.io
  2. For each page:
    • Copy the content
    • Update the corresponding file (e.g., index.html, about.md)
    • Add any additional pages as needed
  3. Update styling in assets/css/main.scss:
    • Adjust colors to match your brand
    • Update fonts if needed
    • Modify layout as necessary
  4. Add images:
    • Place images in assets/images/
    • Reference them in your pages using: /assets/images/filename.jpg

Step 5: Set Up Formspree

  1. Go to Formspree.io and create a free account
  2. Click “New Form”
  3. Give it a name (e.g., “LaHave Contact Form”)
  4. Copy the form endpoint URL (looks like https://formspree.io/f/xxxxx)
  5. Update _config.yml:
    formspree_endpoint: "xxxxx"  # Just the ID part, not the full URL
    
  6. Update contact.html - the form action will automatically use the endpoint from _config.yml

Step 6: Test Locally

Run the Jekyll development server:

bundle exec jekyll serve

Visit http://localhost:4000 to preview your site.

Test:

Step 7: Deploy to GitHub Pages

  1. Push your changes to GitHub:
    git add .
    git commit -m "Update content and styling"
    git push
    
  2. Enable GitHub Pages:
    • Go to your repository on GitHub
    • Click “Settings”
    • Scroll to “Pages” in the left sidebar
    • Under “Source”, select “Deploy from a branch”
    • Choose “main” branch and “/ (root)” folder
    • Click “Save”
  3. Wait a few minutes for GitHub to build your site
  4. Your site will be available at: https://YOUR_USERNAME.github.io/lahave-website/

Step 8: Configure Custom Domain (When Ready)

In GitHub:

  1. The CNAME file is already created with www.lahave.io
  2. In your repository Settings > Pages, enter your custom domain: www.lahave.io
  3. GitHub will verify the domain

In Squarespace/DNS Provider:

Update your DNS records:

A Records (for root domain lahave.io):

CNAME Record (for www subdomain):

DNS Propagation

Step 9: Final Verification

Once DNS has propagated:

  1. Visit https://www.lahave.io and verify all pages load
  2. Test the contact form in production
  3. Check mobile responsiveness
  4. Verify all links work correctly
  5. Test site speed and performance

Troubleshooting

Jekyll won’t start

GitHub Pages build fails

Form not working

DNS not working

Additional Resources