{"id":367223,"date":"2026-10-17T13:29:20","date_gmt":"2026-10-17T18:29:20","guid":{"rendered":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/i-built-one-in-60-minutes"},"modified":"2026-10-17T13:29:23","modified_gmt":"2026-10-17T18:29:23","slug":"i-built-one-in-60-minutes","status":"publish","type":"post","link":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/i-built-one-in-60-minutes","title":{"rendered":"I Constructed One In 60 Minutes"},"content":{"rendered":"<p><\/p>\n<div itemprop=\"text\">\n<p class=\"wp-block-paragraph\">I\u2019m building a tool with a partner to help companies raise their Series A funding.<\/p>\n<p class=\"wp-block-paragraph\">And we needed a landing page.<\/p>\n<p class=\"wp-block-paragraph\">So I set a challenge: build a Claude Code landing page and get it live in 60 minutes or less.<\/p>\n<p class=\"wp-block-paragraph\">No designer. No developer.<\/p>\n<p class=\"wp-block-paragraph\">Just me, a few tools, and the clock.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Claude_Code_Landing_Page_Stack\"\/>The Claude Code Landing Page Stack<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">Here\u2019s what I went in with for this Claude Code landing page:<\/p>\n<ul class=\"wp-block-list\">\n<li><strong>Claude Code<\/strong> to write the page.<\/li>\n<li><strong>Screenshots of an existing website<\/strong> for branding ideas.<\/li>\n<li><strong><a href=\"https:\/\/www.netlify.com\/\" target=\"_blank\" rel=\"noopener\">Netlify<\/a><\/strong> to host it.<\/li>\n<li><strong>GitHub<\/strong> to hold the code.<\/li>\n<li><strong><a href=\"https:\/\/www.brooksconkle.com\/spaceship\">Spaceship<\/a><\/strong>, where I already own the domain.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">Why Netlify?<\/p>\n<p class=\"wp-block-paragraph\">They have a tool called Netlify Drop. You can literally drag and drop a folder of HTML files and your website is live.<\/p>\n<p class=\"wp-block-paragraph\">It\u2019s a speed game, right?<\/p>\n<p class=\"wp-block-paragraph\">I also got a little risky. I used Claude Code inside the web browser.<\/p>\n<p class=\"wp-block-paragraph\">Usually I use it in the desktop app or inside my code editor. But I wanted to get more familiar with the web version.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Set_Up_the_GitHub_Repo\"\/>Step 1: Set Up the GitHub Repo<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">Claude Code in the browser needs a GitHub repository to work in.<\/p>\n<p class=\"wp-block-paragraph\">So I logged into GitHub and created a new repo called \u201cCFO tool landing page.\u201d<\/p>\n<p class=\"wp-block-paragraph\">I usually make things private. This one I made public. It\u2019s just a landing page.<\/p>\n<p class=\"wp-block-paragraph\">Back in Claude Code, the new repo showed up at the top of the list. I connected it and we were off.<\/p>\n<p class=\"wp-block-paragraph\"><em>Quick side note:<\/em> if you\u2019re confused by GitHub, I was too 6 months ago. A GitHub repository is basically Dropbox or Google Drive for your code.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Give_Claude_a_Design_Reference_and_a_Clear_Goal\"\/>Step 2: Give Claude a Design Reference and a Clear Goal<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">For speed, I didn\u2019t build a full brand kit.<\/p>\n<p class=\"wp-block-paragraph\">I pointed Claude at my partner Brent\u2019s current website (he\u2019s a CFO) and asked it to use similar fonts and colors.<\/p>\n<p class=\"wp-block-paragraph\">Then I explained the goal of the Claude Code landing page in plain English:<\/p>\n<ul class=\"wp-block-list\">\n<li>Educate people on an upcoming product that helps businesses raise their Series A.<\/li>\n<li>Customers give us intake information about their company.<\/li>\n<li>We hand back a pitch deck with exactly what investors are looking for.<\/li>\n<li>The process is built on the brain of my friend, a CFO with tons of experience helping companies raise funds.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">I bumped the model up to Opus for this one and let it cook.<\/p>\n<p class=\"wp-block-paragraph\">Then I added two more requirements:<\/p>\n<ul class=\"wp-block-list\">\n<li>Build it in plain HTML and CSS, so I can drop it straight into Netlify.<\/li>\n<li>Add an email collection form I can tie to Google Sheets.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\"><strong>Want to follow along?<\/strong> I share what I\u2019m building every week in my Build Income Streams newsletter. <a href=\"https:\/\/www.buildincomestreams.com\/\" target=\"_blank\" rel=\"noopener\">Join 3,000+ builders<\/a>.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"You_Have_to_Know_What_You_Want_or_Ask\"\/>You Have to Know What You Want (or Ask)<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">Here\u2019s something I noticed while it was working.<\/p>\n<p class=\"wp-block-paragraph\">You do have to know kind of what you want.<\/p>\n<p class=\"wp-block-paragraph\">I knew a single HTML and CSS page was fine because it just needs to look nice and have simple functionality. No database. Not a lot of interactivity.<\/p>\n<p class=\"wp-block-paragraph\">I already knew about Netlify. I\u2019d found the drag-and-drop feature within the last 6 months.<\/p>\n<p class=\"wp-block-paragraph\">So where did I learn those things?<\/p>\n<p class=\"wp-block-paragraph\"><strong>By chatting with Claude.<\/strong><\/p>\n<p class=\"wp-block-paragraph\">If you don\u2019t know, just ask. Say, \u201cHey, I want to make this page, but guide me through it.\u201d<\/p>\n<p class=\"wp-block-paragraph\">Developers ahead of me are probably laughing at my process. That\u2019s totally fine.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Firecrawl_Pulled_the_Branding\"\/>Firecrawl Pulled the Branding<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">Instead of dropping in screenshots, I asked Claude if it could use <a href=\"https:\/\/www.firecrawl.dev\/\" target=\"_blank\" rel=\"noopener\">Firecrawl<\/a>.<\/p>\n<p class=\"wp-block-paragraph\">Firecrawl is a tool that scrapes a website. Claude used it through <a href=\"https:\/\/composio.dev\/\" target=\"_blank\" rel=\"noopener\">Composio<\/a>, a connector I\u2019ve set up that links Claude to outside tools with the permissions you choose.<\/p>\n<p class=\"wp-block-paragraph\">It pulled all the colors (navy, cream, khaki, gold) plus the fonts and headings.<\/p>\n<p class=\"wp-block-paragraph\">Pretty cool.<\/p>\n<p class=\"wp-block-paragraph\">But honestly? It might have been faster to just drop in screenshots.<\/p>\n<p class=\"wp-block-paragraph\">If I\u2019d done more prework, like writing the marketing copy ahead of time, I would have found the faster route. I wanted this one raw.<\/p>\n<p class=\"wp-block-paragraph\">I also gave it the details it needed: the brand name, Series A Hub (we own the domain), and that my CFO friend has more than 25 years of experience.<\/p>\n<p class=\"wp-block-paragraph\">And for Brent\u2019s photo? Claude found it on its own. I didn\u2019t even have to upload it.<\/p>\n<p class=\"wp-block-paragraph\"><em>This is getting creepy in a good way.<\/em><\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Deploy_With_Netlify_and_GitHub\"\/>Step 3: Deploy With Netlify and GitHub<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">Here\u2019s where my plan changed.<\/p>\n<p class=\"wp-block-paragraph\">Instead of dragging and dropping files, it made more sense to create a new Netlify project and connect the GitHub repository.<\/p>\n<p class=\"wp-block-paragraph\">That way, every change Claude pushes goes live automatically.<\/p>\n<p class=\"wp-block-paragraph\">I imported the repo, picked the branch, skipped environment variables, and hit deploy.<\/p>\n<p class=\"wp-block-paragraph\">The funny part?<\/p>\n<p class=\"wp-block-paragraph\">I hadn\u2019t even seen the landing page yet. The first time I saw it was as a live website.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Review_and_Iterate_on_the_Live_Page\"\/>Step 4: Review and Iterate on the Live Page<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">The first version of the Claude Code landing page was pretty amazing.<\/p>\n<p class=\"wp-block-paragraph\">\u201cYou\u2019re not buying software, you\u2019re buying experience.\u201d I liked that.<\/p>\n<p class=\"wp-block-paragraph\">But I had notes. This is how I make updates. I literally just paste in what I\u2019m seeing:<\/p>\n<ul class=\"wp-block-list\">\n<li>The font was hard to read. Make it more modern.<\/li>\n<li>I didn\u2019t like the headline. Give me some ideas.<\/li>\n<li>The spacing gaps were too wide.<\/li>\n<li>We don\u2019t need a waitlist button that just scrolls to the section right below it.<\/li>\n<li>Move the section about Brent and his experience further up.<\/li>\n<li>Fix the contrast on the button in the top right. You can\u2019t read the text.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">I asked it to push back on me if it disagreed. It did, and I appreciated that.<\/p>\n<p class=\"wp-block-paragraph\">Claude gave me headline options. One I liked: \u201cInvestor-ready pitch decks built on a CFO\u2019s playbook.\u201d<\/p>\n<p class=\"wp-block-paragraph\"><em>Side note:<\/em> normally I build single-page sites like this on <a href=\"https:\/\/www.brooksconkle.com\/carrd\">Carrd<\/a>. I have a dozen sites there, and it might have been faster. But that\u2019s not how I wanted to build this one.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Forms_and_the_Custom_Domain\"\/>Step 5: Forms and the Custom Domain<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">For the email form, Claude told me exactly what to do: create a Google Sheet, open the script editor, paste in the script, and emails get added to the sheet.<\/p>\n<p class=\"wp-block-paragraph\">I saved that for after launch.<\/p>\n<p class=\"wp-block-paragraph\">Then the domain.<\/p>\n<p class=\"wp-block-paragraph\">DNS records are not my forte. In Netlify I added the domain I already own, then went into Spaceship to update the records.<\/p>\n<p class=\"wp-block-paragraph\">I\u2019ll be honest, I struggled here. I was running out of time.<\/p>\n<p class=\"wp-block-paragraph\">So I opened another site I host on Netlify to see how I\u2019d set it up before. That showed me I needed the www record.<\/p>\n<p class=\"wp-block-paragraph\">And boom.<\/p>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Live_in_Just_Under_an_Hour\"\/>Live in Just Under an Hour<span class=\"ez-toc-section-end\"\/><\/h2>\n<p class=\"wp-block-paragraph\">seriesahub.com was live, just under the hour. My Claude Code landing page was done.<\/p>\n<p class=\"wp-block-paragraph\">The SSL certificate still needed to finish setting up, and I had the Google Sheet piece left to connect. But the page was up and ready to collect emails.<\/p>\n<p class=\"wp-block-paragraph\">If you want to build your own Claude Code landing page:<\/p>\n<ul class=\"wp-block-list\">\n<li>Know the goal of the page before you start.<\/li>\n<li>Write your copy and grab screenshots ahead of time. It\u2019s faster.<\/li>\n<li>Use plain HTML and CSS for a simple one-page site.<\/li>\n<li>Connect GitHub to Netlify so every change goes live.<\/li>\n<li>When you get stuck, ask Claude to walk you through it.<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">If you\u2019ve been wanting to <a href=\"https:\/\/www.brooksconkle.com\/how-to-start-a-blog\/\">start your own website<\/a>, this is a fast way to get something real online. And if you want to see what a bigger build looks like, <a href=\"https:\/\/www.brooksconkle.com\/mobile-rundown-website-case-study\/\">watch me build my website in public<\/a>. I also used Claude Code on the site rebuild in my <a href=\"https:\/\/www.brooksconkle.com\/ai-domain-investing\/\">AI domain investing experiment<\/a>.<\/p>\n<p class=\"wp-block-paragraph\"><strong>Want to follow along?<\/strong> I share what I\u2019m building every week in my Build Income Streams newsletter. <a href=\"https:\/\/www.buildincomestreams.com\/\" target=\"_blank\" rel=\"noopener\">Join 3,000+ builders<\/a>.<\/p>\n<\/p><\/div>\n<p> <br \/><a href=\"https:\/\/www.brooksconkle.com\/claude-code-landing-page\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m building a tool with a partner to help companies raise their Series A funding. And we needed a landing page. So I set a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":367226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4557],"tags":[41622,41623,17909,689,6796,41620,41617,41618,41621,41619,40951],"class_list":["post-367223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-dropbox","tag-dwell-web-site","tag-e-newsletter","tag-editor","tag-html","tag-instrument-touchdown-web-page","tag-netlify-mission","tag-online-browser","tag-online-model","tag-script-editor","tag-touchdown-web-page"],"_links":{"self":[{"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/posts\/367223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/comments?post=367223"}],"version-history":[{"count":2,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/posts\/367223\/revisions"}],"predecessor-version":[{"id":367225,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/posts\/367223\/revisions\/367225"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/media\/367226"}],"wp:attachment":[{"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/media?parent=367223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/categories?post=367223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etrafficlane.com\/60dollarmiracle\/wp-json\/wp\/v2\/tags?post=367223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}