Follow these steps to convert PDF to HTML and add it to Squarespace.
- (Converting PDF to HTML won’t always give you the desired result; sometimes you’ll need to adjust some settings, or you might need to ask the AI multiple times to achieve the desired outcome)
#1. You can use ChatGPT or Claude or Grok (or any AI that you are familiar) use prompt like this.
Here I use ChatGPT. Here all messages between me & ChatGPT.
#2. Create a Blank Page in Not Linked
#3. Hover on Page > Click Gear icon
#4. At Navigation > Disable Header, Footer
#5. At Advanced > Paste code #1 into right box. In my example, it is
<style>
:root{
--max:1060px;
--pad:22px;
--text:#111827;
--muted:#6b7280;
--line:#e5e7eb;
--link:#1ea7c6;
--h1:clamp(34px,3.2vw,52px);
--h2:clamp(18px,2vw,22px);
--p:15px;
--hero-radius:2px;
--product-blue:#24a8d4;
--product-card-max:240px;
}
.fridge-article{background:#fff;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.fridge-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 56px}
.fridge-breadcrumb{font-size:13px;color:#60a5b7;margin:18px 0 8px}
.fridge-breadcrumb a{color:#60a5b7;text-decoration:none}
.fridge-breadcrumb .sep{opacity:.65;margin:0 6px}
.fridge-title{font-size:var(--h1);line-height:1.06;margin:10px 0 10px;font-weight:850;letter-spacing:-.02em}
.fridge-subtitle{margin:0 0 18px;color:var(--muted);font-size:14px;width:100%;max-width:none}
.fridge-divider{border:0;border-top:1px solid var(--line);margin:18px 0 22px}
.fridge-hero{width:100%;border-radius:var(--hero-radius);overflow:hidden;background:#f3f4f6;min-height:clamp(240px,36vw,410px)}
.fridge-hero img{width:100%;height:100%;display:block;object-fit:cover}
.fridge-meta-row{display:flex;align-items:flex-start;gap:16px;margin:18px 0 8px}
.fridge-author-avatar{width:46px;height:46px;border-radius:999px;overflow:hidden;background:#e5e7eb;flex:0 0 auto}
.fridge-author-avatar img{width:100%;height:100%;object-fit:cover}
.fridge-meta-main{flex:1}
.fridge-author-name{margin:0;font-size:14px;font-weight:700}
.fridge-author-name a{color:var(--link);text-decoration:none}
.fridge-meta-line{margin:4px 0 0;font-size:12.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.fridge-body{font-size:var(--p);line-height:1.78}
.fridge-body p{margin:10px 0 14px}
.fridge-body a{color:var(--link);text-decoration:none}
.fridge-q{font-size:var(--h2);line-height:1.28;margin:24px 0 8px;font-weight:900}
.fridge-watch{margin:24px 0 10px;font-size:13px;color:var(--muted)}
.fridge-video{width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#000}
.fridge-video iframe{width:100%;height:100%;border:0}
.fridge-products{margin:18px 0 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fridge-product{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.fridge-product-media{width:min(100%,var(--product-card-max));height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.fridge-product-media img{height:92px;width:auto;max-width:100%;object-fit:contain}
.fridge-rating{position:absolute;top:6px;right:8px;background:#fff;border:1px solid var(--line);border-radius:4px;font-size:12px;padding:2px 6px}
.fridge-product-name{margin:0;font-size:12.5px;line-height:1.25}
.fridge-product-price{margin:0;font-weight:850;font-size:12.5px}
.fridge-product-btn{width:min(100%,var(--product-card-max));height:36px;border:0;border-radius:2px;background:var(--product-blue);color:#fff;font-weight:900;letter-spacing:.05em;cursor:pointer}
.fridge-about{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.fridge-about-title{margin:0 0 6px;font-size:12px;font-weight:950;letter-spacing:.08em;line-height:1.1}
.fridge-about-row{display:flex;gap:12px;align-items:flex-start}
.fridge-about-row .fridge-author-avatar{width:52px;height:52px}
.fridge-about-row p{margin:0}
.fridge-about-name{font-size:14px;font-weight:900;line-height:1.15}
.fridge-about-name a{color:var(--link);text-decoration:none}
.fridge-about-desc{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.45}
.fridge-about-link{display:inline-block;margin-top:4px;font-size:13px;line-height:1.2;color:var(--link);text-decoration:none}
@media (max-width:920px){
.fridge-products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
:root{--pad:16px}
.fridge-products{grid-template-columns:1fr}
}
</style>
<div class="fridge-article">
<div class="fridge-wrap">
<div class="fridge-breadcrumb">
<a href="#">Nutrition</a><span class="sep">|</span><a href="#">Nutrition Tips</a>
</div>
<h1 class="fridge-title">Jessie Hilgenberg: What's In Your Fridge?</h1>
<p class="fridge-subtitle">
If you think the fridge of an IFBB figure pro changes for the worse after having a baby, you're wrong. Check out the fridge of fit mama Jessie Hilgenberg.
</p>
<hr class="fridge-divider">
<div class="fridge-hero">
<img src="https://cdn.pixabay.com/photo/2015/05/21/16/57/vegetable-777473_1280.jpg" alt="">
</div>
<div class="fridge-meta-row">
<div class="fridge-author-avatar">
<img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&q=80" alt="">
</div>
<div class="fridge-meta-main">
<p class="fridge-author-name"><a href="#">Stephanie Smith</a></p>
<p class="fridge-meta-line">October 24, 2018 • 3 min read</p>
</div>
</div>
<div class="fridge-body">
<p>
She might be known for her boulder shoulders and the inspirational can-do message she spreads to troves of #JessiesGirls, but figure pro Jessie Hilgenberg will tell you that channeling your inner beast mode starts with proper nutrition. Being fit and healthy is what she knows, loves, and lives.
</p>
<p>
Gone are the days of ramen noodles and beer she described in the video <a href="#">"Body by Jessie."</a> They've long been replaced with a mix of healthy greens, game meats, and other treats.
</p>
<p>
Excuses hold no sway over this mom. With a baby in the house, she's eating better than ever. Take a peek into her fridge and see what fuels Jessie Hilgenberg.
</p>
<h2 class="fridge-q">What Fuels You, Jessie Hilgenberg?</h2>
<div class="fridge-watch">Watch The Video - 4:33</div>
<div class="fridge-video">
<iframe src="https://www.youtube-nocookie.com/embed/Dkj3VZfmwk0" allowfullscreen></iframe>
</div>
<h2 class="fridge-q">Are You A Morning-Only Coffee Drinker, Or Do You Down A Few Cups Throughout The Day?</h2>
<p>
Right when I wake up in the morning, I go for a cup of black coffee. It wakes me up, and it's a ritual. I don't like to overcaffeinate, though, so I usually have just one more cup later in the afternoon. That's it!
</p>
<h2 class="fridge-q">How Does Having Your Daughter Samantha In The House Influence Your Grocery List?</h2>
<p>
It actually helps us stick to our nutrition goals more than ever. Knowing the food we shop for is also her food leads us to choose more whole foods—organic when necessary—and pay more attention to label ingredients and sugar content.
</p>
<div class="fridge-about">
<div class="fridge-about-title">ABOUT THE AUTHOR</div>
<div class="fridge-about-row">
<div class="fridge-author-avatar">
<img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&q=80" alt="">
</div>
<div>
<p class="fridge-about-name"><a href="#">Stephanie Smith</a></p>
<p class="fridge-about-desc">
Stephanie Smith is a New York native who caught the fitness bug while earning a master's in journalism at the University of Missouri.
</p>
<a class="fridge-about-link" href="#">View all articles by this author</a>
</div>
</div>
</div>
</div>
</div>
</div>
#6. Add this code to top of under to hide huge space in bottom of page
<style>
div#siteWrapper {
display: none;
}
</style>
#7. To change Youtube URL, you can find this line (Line 123 to 126 in example #1 code)
<div class="fridge-watch">Watch The Video - 4:33</div> <div class="fridge-video"> <iframe src="https://www.youtube-nocookie.com/embed/Dkj3VZfmwk0" allowfullscreen></iframe> </div>
To get Youtube URL, just open Youtube, click Share > Choose Embed
Copy Embed Code
and change Line 125 (iframe code) to new code
Result like this
#8. To change to Vimeo URL, open Vimeo > Click Share icon
Click Embed
Copy Embed Code
and change Line 125 (iframe code) to Vimeo Embed code
Result
