Search code examples
templatesdnsembeddingfile-managementsquarespace

Embedding a functional website inside a Squarespace webpage

First of all, thank you for everything that you do. Without this community, I would hate web design and be reliant on my teacher's outdated, static methods. Much love <3

So, this is a tricky one (maybe).
I want to have, essentially, an iframe on a webpage that contains a website I coded previously. It was a project for school that never went live, but I'd like to include it as part of my portfolio. Problem is, an iframe needs a URL for a source, but I just have the folder with more folders full of code, fonts, and images. How can I tell the browser to populate this box with everything from "name" folder? And then how will it know to run the code instead of just showing a file tree or something?

In the end, I want a page describing a previous web project and let the client experience that project within the one page. And I don't want to get a domain for every project I do. Maybe there's an easier way I'm not thinking of?

To make it interesting, my new portfolio site is being made in Squarespace...maybe. I bought a domain from them because I had a promo code and wanted to try the platform, but I kind of hate it. I can't change any of the code and it won't maintain a connection to Typekit. So all I can do is change the basic appearance of preexisting elements. It's like WordPress all over again....LAME! Sadly, I already bought the domain. Can Squarespace just be a host? Is there a way to download the raw code of these templates, edit it, and upload it again?

Thanks for all your help!

Solution

  • I want to have, essentially, an iframe on a webpage that contains a website I coded previously.

    Squarespace's file upload mechanism is very limited. Without using the Developers Platform, there is no effective way to upload many files at once. Furthermore, there is no way to create folders. Therefore, even if you were willing to upload each .html file and each asset one-by-one, there'd be no way to organize the files into folders (assuming that the "tree" you mentioned includes additional sub-folders).

    Initially, in order to get the files to be accessible by Squarespace, you'd have to do one of the following:

    1. Use Squarespace Developers Platform (A.K.A. "Developer Mode") and upload your to-be-iframed (TBI) website files to the "assets" folder using SFTP or Git.
    2. Host your TBI website files somewhere else (a different host environment, for example) which will maintain your file/folder structure.

    How can I tell the browser to populate this box with everything from "name" folder? And then how will it know to run the code instead of just showing a file tree or something?

    Assuming that the TBI website has an index.html file or home.html file or similar, and assuming you were to use the Squarespace Developer Platform, you'd insert the iframe either in a Code Block or within a template/.region file directly using something like

    <iframe src="/assets/tbiwebsitefolder/index.html"></iframe>

    while setting your other iframe attributes (such as height and width) as needed.

    Is there a way to download the raw code of these templates, edit it, and upload it again?

    Yes. You select a template and then enable Developer Mode on that template. From there, you use SFTP or Git to download the template files, edit, and reupload.

    You may benefit by reviewing some considerations of enabling Developer Mode on a Squarespace Template.

    One other idea, to avoid the iframe and Developer Mode entirely, would be to capture images of the TBI website rendered in a browser, and then simply add those images to a gallery block or gallery page. This could allow you to convey the general idea of the project but would of course not capture the full "experience" of it.