Search code examples
squarespace

How to upload HTML, CSS files of a website in SquareSpace?


I purchased a SquareSpace domain and created my website with Visual Studio Code on my system. Surprisingly there is no easy way to upload these HTML, and CSS files from my system to SquareSpace. Any help is appreciated.

Solution After following the vital response, here is the solution I used.

A website has two aspects: a domain name, which is provided by Squarespace, and you need a host to put your required codes.

There are many options to host your codes for free, and among them, GitHub is the most popular choice.

Since Squarespace does not accept forward slash in the domain name alias, you need to create a GitHub account with your domain name. Then, you need to create a repository with the following format: .github.io (ref. https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#types-of-github-pages-sites). In this way, your GitHub page, once published, will not have any forward slash.

After this, first, you need to publish your website in GitHub, which you can easily do by following this link: https://www.youtube.com/watch?v=4eMnz8VbgyM&t=18s (this is not in English, but I think it would not be a problem).

Next, you need to change the DNS record in Squarespace, which you can find at https://account.squarespace.com/ -> DNS -> DNS Settings, and this link can guide you: https://www.youtube.com/watch?v=EX4w9hsduNA.

Note: Before adding CNAME for your GitHub domain in Squarespace, you need to delete default DNS settings, and you probably need to wait for some time so that the domain name is available for every DNS record.


Solution

  • You may want to refer to this Squarespace support article HERE.

    The article does mention:

    Squarespace supports adding client-side code to your site. The options depend on your plan. All options are available during a trial:
    

    Squarespace uses prebuilt proprietary elements you add to your webpages via their GUI editor. So things like text, images, buttons etc. all exist as pre-built components in the Squarespace editor that you drag and drop and then edit the properties of.

    According to the page I linked above, they have components such as Code block (Basic), Code Block (Advanced), Code Injection, CSS Editor, and the Embed Block that can be used to implement various custom code. Whether it's available as a component depends on the type of plan you have and what sort of code each one supports (JS, HTML, CSS etc.) seem to vary.

    They also have Squarespace Developer Platform that seems to give full access to the underlying code of a website as well.

    Tbh, I feel that Squarespace's design isn't intended for custom source code and if it is, it's only for very basic/minor things. Like tweaking a styling or making a very simple custom component like a Form or Button etc. If that's all your custom HTML and CSS files are, then their components that support custom code may work fine for you.

    IMO, if the entirety of your website exists in your HTML and CSS source code, you'd be better off just hosting your files else where such as Netlify or Heroku. Or if you're okay with getting over a bit of a learning curve, Digital Ocean, AWS, Google Cloud Platform, Azure etc.

    If your pages are static, you could even use Github pages to host your website for free.

    Once you have a public accessible domain or IP address for your hosted HTML and CSS, you can then configure the DNS records of your domain name to forward to that domain or IP address via the CNAME or A record.