Content Migration Guide

This guide will help you migrate content from your Squarespace site to this Jekyll site.

Before You Start

  1. Open your current Squarespace site: lahave.io
  2. Keep it open in a browser tab for reference
  3. Have this Jekyll site running locally (bundle exec jekyll serve)

Step-by-Step Migration Process

1. Document Your Current Site Structure

Create a list of all pages on your Squarespace site:

2. Identify Design Elements

Note down from your Squarespace site:

Colors:

Typography:

Layout:

3. Update Site Configuration

Edit _config.yml:

title: "Your Site Title"  # Update this
description: "Your site description"  # Update this
url: "https://www.lahave.io"  # Already set

Update the navigation menu to match your Squarespace navigation:

navigation:
  - name: Home
    url: /
  - name: About
    url: /about
  - name: Services  # Add your actual pages
    url: /services
  - name: Contact
    url: /contact

4. Migrate Homepage Content

  1. Open index.html
  2. Copy content from your Squarespace homepage
  3. Update the HTML structure as needed
  4. Add images to assets/images/ and reference them

Example:

---
layout: default
title: Home
description: Welcome to LaHave
---

<div class="container">
    <section class="hero">
        <h1>Your Main Headline</h1>
        <p class="lead">Your tagline or description</p>
    </section>

    <section class="content">
        <h2>Section Title</h2>
        <p>Your content here...</p>
        <img src="/assets/images/your-image.jpg" alt="Description">
    </section>
</div>

5. Migrate Other Pages

For each page on your Squarespace site:

  1. Create a new file (e.g., services.md or services.html)
  2. Add front matter: 
    ---
layout: default
title: Services
description: Our services
---
  3. Copy content from Squarespace
  4. Convert to Markdown or HTML as appropriate

6. Update Styling

Edit assets/css/main.scss to match your Squarespace design:

Update Colors:

$primary-color: #your-color;
$secondary-color: #your-color;
$text-color: #your-color;
$background-color: #your-color;

Update Fonts:

body {
    font-family: "Your Font", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Add Custom Styles: Add any additional styles needed to match your Squarespace design.

7. Add Images

  1. Download images from your Squarespace site
  2. Optimize images (compress for web)
  3. Place in assets/images/
  4. Reference in your pages: 
    <img src="/assets/images/filename.jpg" alt="Description">

Edit _layouts/default.html to update footer content:

<footer>
    <div class="footer-content">
        <p>Your footer content here</p>
        <p>&copy; 2025 LaHave. All rights reserved.</p>
    </div>
</footer>

9. Test Everything

  1. Run bundle exec jekyll serve
  2. Visit each page and verify:
    • Content is correct
    • Images load
    • Links work
    • Styling matches
    • Mobile responsive
    • Contact form works

10. Common Content Patterns

Hero Section:

<section class="hero">
    <h1>Main Title</h1>
    <p>Subtitle</p>
    <a href="/contact" class="btn btn-primary">Call to Action</a>
</section>

Two-Column Layout:

<div class="two-column">
    <div class="column">
        <h2>Left Column</h2>
        <p>Content...</p>
    </div>
    <div class="column">
        <h2>Right Column</h2>
        <p>Content...</p>
    </div>
</div>

Image Gallery:

<div class="gallery">
    <img src="/assets/images/img1.jpg" alt="Image 1">
    <img src="/assets/images/img2.jpg" alt="Image 2">
    <img src="/assets/images/img3.jpg" alt="Image 3">
</div>

Tips

Need Help?