https://conturata.com/_next/static/chunks/pages/ai/create-a-custom…ithout-writing-any-code-7963bb4a5ba75e4f.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[886],{3468:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/ai/create-a-custom-website-without-writing-any-code",function(){return s(7532)}])},7376:function(e,t,s){"use strict";var a=s(5893);s(7294);var i=s(9008),n=s.n(i);let o=e=>{let{title:t,description:s,keywords:i,image:o,url:r,author:l,twitterUsername:d}=e;return(0,a.jsxs)(n(),{children:[(0,a.jsx)("title",{children:t}),(0,a.jsx)("meta",{name:"description",content:s}),(0,a.jsx)("meta",{name:"keywords",content:"content, youtube content, youtube production, founder branding, founder-led marketing, video marketing, video production, linkedin video marketing, youtube growth, youtube for founders, video podcast production, ai video marketing, ai content repurposing, social media video strategy, video editing services, ".concat(i)}),(0,a.jsx)("meta",{property:"og:title",content:t}),(0,a.jsx)("meta",{property:"og:description",content:s}),(0,a.jsx)("meta",{property:"og:type",content:"website"}),(0,a.jsx)("meta",{property:"og:image",content:o}),(0,a.jsx)("meta",{property:"og:url",content:r}),(0,a.jsx)("meta",{property:"og:site_name",content:"Conturata"}),(0,a.jsx)("meta",{property:"og:locale",content:"en_US"}),(0,a.jsx)("meta",{name:"author",content:l}),(0,a.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,a.jsx)("meta",{name:"twitter:title",content:t}),(0,a.jsx)("meta",{name:"twitter:description",content:s}),(0,a.jsx)("meta",{name:"twitter:image",content:o}),(0,a.jsx)("meta",{name:"twitter:site",content:d}),(0,a.jsx)("meta",{name:"twitter:creator",content:d})]})};o.defaultProps={title:"Conturata - YouTube Growth for Founders",description:"Expert YouTube management, production, and growth strategies for founders. Reclaim 10+ hours weekly with our done-for-you video system. Book a free consultation.",keywords:"founder video content, YouTube management, video production services, content strategy, \n    video podcast production, channel growth, content revitalization, founder branding, video marketing",image:"https://conturata.com/images/og_img.webp",url:"https://conturata.com/",twitterUsername:"@conturata"},t.Z=o},5563:function(e,t,s){"use strict";s.d(t,{d:function(){return l}});var a=s(5893),i=s(7294),n=s(8915);function o(e){return(0,a.jsxs)("svg",{viewBox:"0 0 20 20","aria-hidden":"true",...e,children:[(0,a.jsx)("path",{strokeWidth:"0",d:"M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"}),(0,a.jsx)("path",{fill:"none",strokeLinejoin:"round",d:"M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"})]})}function r(e){let{code:t}=e,[s,r]=(0,i.useState)(0),l=s>0;return(0,i.useEffect)(()=>{if(s>0){let e=setTimeout(()=>r(0),1e3);return()=>{clearTimeout(e)}}},[s]),(0,a.jsxs)("button",{type:"button",className:(0,n.Z)("group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pl-2 pr-3 text-xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",l?"bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20":"hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5"),onClick:()=>{let e=t.join("").replaceAll("[object Object]","\n");window.navigator.clipboard.writeText(e).then(()=>{r(e=>e+1)})},children:[(0,a.jsxs)("span",{"aria-hidden":l,className:(0,n.Z)("pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300",l&&"-translate-y-1.5 opacity-0"),children:[(0,a.jsx)(o,{className:"h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400"}),"Copy"]}),(0,a.jsx)("span",{"aria-hidden":!l,className:(0,n.Z)("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300",!l&&"translate-y-1.5 opacity-0"),children:"Copied!"})]})}let l=e=>{let{children:t,...s}=e;return(0,a.jsxs)("div",{className:"not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10",children:[(0,a.jsx)("div",{className:"flex min-h-[calc(theme(sp

1acing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent",children:s.title&&(0,a.jsx)("h3",{className:"mr-auto pt-3 text-sm font-semibold text-white",children:s.title})}),(0,a.jsx)("div",{className:"dark:bg-white/2.5 group",children:(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("pre",{className:"overflow-x-auto p-4 text-xs text-white",children:(0,a.jsx)("code",{children:t})}),(0,a.jsx)(r,{code:t})]})})]})}},7443:function(e,t,s){"use strict";var a=s(3454);s(1479);var i=s(7294),n=i&&"object"==typeof i&&"default"in i?i:{default:i},o=void 0!==a&&a.env&&!0,r=function(e){return"[object String]"===Object.prototype.toString.call(e)},l=function(){function e(e){var t=void 0===e?{}:e,s=t.name,a=void 0===s?"stylesheet":s,i=t.optimizeForSpeed,n=void 0===i?o:i;d(r(a),"`name` must be a string"),this._name=a,this._deletedRulePlaceholder="#"+a+"-deleted-rule____{}",d("boolean"==typeof n,"`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=n,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var l=document.querySelector('meta[property="csp-nonce"]');this._nonce=l?l.getAttribute("content"):null}var t=e.prototype;return t.setOptimizeForSpeed=function(e){d("boolean"==typeof e,"`setOptimizeForSpeed` accepts a boolean"),d(0===this._rulesCount,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=e,this.inject()},t.isOptimizeForSpeed=function(){return this._optimizeForSpeed},t.inject=function(){var e=this;if(d(!this._injected,"sheet already injected"),this._injected=!0,this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(o||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(t,s){return"number"==typeof s?e._serverSheet.cssRules[s]={cssText:t}:e._serverSheet.cssRules.push({cssText:t}),s},deleteRule:function(t){e._serverSheet.cssRules[t]=null}}},t.getSheetForTag=function(e){if(e.sheet)return e.sheet;for(var t=0;t<document.styleSheets.length;t++)if(document.styleSheets[t].ownerNode===e)return document.styleSheets[t]},t.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},t.insertRule=function(e,t){if(d(r(e),"`insertRule` accepts only strings"),this._optimizeForSpeed){var s=this.getSheet();"number"!=typeof t&&(t=s.cssRules.length);try{s.insertRule(e,t)}catch(t){return o||console.warn("StyleSheet: illegal rule: \n\n"+e+"\n\nSee https://stackoverflow.com/q/20007992 for more info"),-1}}else{var a=this._tags[t];this._tags.push(this.makeStyleTag(this._name,e,a))}return this._rulesCount++},t.replaceRule=function(e,t){if(this._optimizeForSpeed){var s=this.getSheet();if(t.trim()||(t=this._deletedRulePlaceholder),!s.cssRules[e])return e;s.deleteRule(e);try{s.insertRule(t,e)}catch(a){o||console.warn("StyleSheet: illegal rule: \n\n"+t+"\n\nSee https://stackoverflow.com/q/20007992 for more info"),s.insertRule(this._deletedRulePlaceholder,e)}}else{var a=this._tags[e];d(a,"old rule at index `"+e+"` not found"),a.textContent=t}return e},t.deleteRule=function(e){if(this._optimizeForSpeed)this.replaceRule(e,"");else{var t=this._tags[e];d(t,"rule at index `"+e+"` not found"),t.parentNode.removeChild(t),this._tags[e]=null}},t.flush=function(){this._injected=!1,this._rulesCount=0,this._tags.forEac

1h(function(e){return e&&e.parentNode.removeChild(e)}),this._tags=[]},t.cssRules=function(){var e=this;return this._tags.reduce(function(t,s){return s?t=t.concat(Array.prototype.map.call(e.getSheetForTag(s).cssRules,function(t){return t.cssText===e._deletedRulePlaceholder?null:t})):t.push(null),t},[])},t.makeStyleTag=function(e,t,s){t&&d(r(t),"makeStyleTag accepts only strings as second parameter");var a=document.createElement("style");this._nonce&&a.setAttribute("nonce",this._nonce),a.type="text/css",a.setAttribute("data-"+e,""),t&&a.appendChild(document.createTextNode(t));var i=document.head||document.getElementsByTagName("head")[0];return s?i.insertBefore(a,s):i.appendChild(a),a},function(e,t){for(var s=0;s<t.length;s++){var a=t[s];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}(e.prototype,[{key:"length",get:function(){return this._rulesCount}}]),e}();function d(e,t){if(!e)throw Error("StyleSheet: "+t+".")}var c=function(e){for(var t=5381,s=e.length;s;)t=33*t^e.charCodeAt(--s);return t>>>0},h={};function u(e,t){if(!t)return"jsx-"+e;var s=String(t),a=e+s;return h[a]||(h[a]="jsx-"+c(e+"-"+s)),h[a]}function m(e,t){var s=e+t;return h[s]||(h[s]=t.replace(/__jsx-style-dynamic-selector/g,e)),h[s]}var f=function(){function e(e){var t=void 0===e?{}:e,s=t.styleSheet,a=void 0===s?null:s,i=t.optimizeForSpeed,n=void 0!==i&&i;this._sheet=a||new l({name:"styled-jsx",optimizeForSpeed:n}),this._sheet.inject(),a&&"boolean"==typeof n&&(this._sheet.setOptimizeForSpeed(n),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var t=e.prototype;return t.add=function(e){var t=this;void 0===this._optimizeForSpeed&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer||(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(e,t){return e[t]=0,e},{}));var s=this.getIdAndRules(e),a=s.styleId,i=s.rules;if(a in this._instancesCounts){this._instancesCounts[a]+=1;return}var n=i.map(function(e){return t._sheet.insertRule(e)}).filter(function(e){return -1!==e});this._indices[a]=n,this._instancesCounts[a]=1},t.remove=function(e){var t=this,s=this.getIdAndRules(e).styleId;if(function(e,t){if(!e)throw Error("StyleSheetRegistry: "+t+".")}(s in this._instancesCounts,"styleId: `"+s+"` not found"),this._instancesCounts[s]-=1,this._instancesCounts[s]<1){var a=this._fromServer&&this._fromServer[s];a?(a.parentNode.removeChild(a),delete this._fromServer[s]):(this._indices[s].forEach(function(e){return t._sheet.deleteRule(e)}),delete this._indices[s]),delete this._instancesCounts[s]}},t.update=function(e,t){this.add(t),this.remove(e)},t.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},t.cssRules=function(){var e=this,t=this._fromServer?Object.keys(this._fromServer).map(function(t){return[t,e._fromServer[t]]}):[],s=this._sheet.cssRules();return t.concat(Object.keys(this._indices).map(function(t){return[t,e._indices[t].map(function(e){return s[e].cssText}).join(e._optimizeForSpeed?"":"\n")]}).filter(function(e){return!!e[1]}))},t.styles=function(e){var t,s;return t=this.cssRules(),void 0===(s=e)&&(s={}),t.map(function(e){var t=e[0],a=e[1];return n.default.createElement("style",{id:"__"+t,key:"__"+t,nonce:s.nonce?s.nonce:void 0,dangerouslySetInnerHTML:{__html:a}})})},t.getIdAndRules=function(e){var t=e.children,s=e.dynamic,a=e.id;if(s){var i=u(a,s);return{styleId:i,rules:Array.isArray(t)?t.map(function(e){return m(i,e)}):[m(i,t)]}}return{styleId:u(a),rules:Array.isArray(t)?t:[t]}},t.selectFromServer=function(){return Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')).reduce(function(e,t){return e[t.id.slice(2)]=t,e},{})},e}(),p=i.createContext(null);p.displayName="StyleSheetContext";var x=n.default.useInsertionEffect||n.default.useLayoutEffect,b=new f;function g(e){var t=b||i.useContext(p);return t&&x(function(){return t.add(e),function(){t.remove(e)}},[e.id,String(e.dynamic)]),null}g.dynamic=function(e){return e.map(function(e){return u(e[0],e[1])}).join(" ")},t.style=g},645:function(e,t,s){"use strict";e.exports=s(7443).style},7532:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return l}});var a=s(5893),i=s(645),n=s.n(i),o=s(5563),r=s(7376);function l(){return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.Z,{title:"Conturata - Create a Custom Website Without Writing Code",description:"Build Fast, Modern Websites Using AI - Without Touching a Line of Code Using ChatGPT and Next JS.",url:"https://conturata.com/ai/create-a-custom-website-without-writing-any-code"}),(0,a.jsx)("main",{children:(0,a.jsxs)("div",{className:"relative overflow-hidden bg-white py-16",children:[(0,a.jsx)("div",{className:"hidden lg:absolute lg:inset-y-0 lg:block lg:h-full lg:w-full lg:[overflow-anchor:none]",children:(0,a.jsxs)("div",{className:"relative mx-auto h-full max-w-prose text-lg","aria-hidden":"true",children:[(0,a.jsxs)("svg",{className:"absolute top-12 left-full translate-x-32 transform",width:404,height:384,fill:"none",viewBox:"0 0 404 384",children:[(0,a.jsx)("defs",{children:(0,a.jsx)("pattern",{id:"74b3fd99-0a6f-4271-bef2-e80eeafdf357",x:0,y:0,width:20,height:20,patternUnits:"userSpaceOnUse",children:(0,a.jsx)("rect",{x:0,y:0,width:4,height:4,className:"text-gray-200",fill:"currentColor"})})}),(0,a.jsx)("rect",{width:404,height:384,fill:"url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)"})]}),(0,a.jsxs)("svg",{className:"absolute top-1/2 right-full -translate-y-1/2 -translate-x-32 transform",width:404,height:384,fill:"none",viewBox:"0 0 404 384",children:[(0,a.jsx)("defs",{children:(0,a.jsx)("pattern",{id:"f210dbf6-a58d-4871-961e-36d5016a0f49",x:0,y:0,width:20,height:20,patternUnits:"userSpaceOnUse",children:(0,a.jsx)("rect",{x:0,y:0,width:4,height:4,className:"text-gray-200",fill:"currentColor"})})}),(0,a.jsx)("rect",{width:404,height:384,fill:"url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"})]}),(0,a.jsxs)("svg",{className:"absolute bottom-12 left-full translate-x-32 transform",width:404,height:384,fill:"none",viewBox:"0 0 404 384",children:[(0,a.jsx)("defs",{children:(0,a.jsx)("pattern",{id:"d3eb07ae

1-5182-43e6-857d-35c643af9034",x:0,y:0,width:20,height:20,patternUnits:"userSpaceOnUse",children:(0,a.jsx)("rect",{x:0,y:0,width:4,height:4,className:"text-gray-200",fill:"currentColor"})})}),(0,a.jsx)("rect",{width:404,height:384,fill:"url(#d3eb07ae-5182-43e6-857d-35c643af9034)"})]})]})}),(0,a.jsx)("div",{className:"relative px-6 lg:px-8",children:(0,a.jsxs)("div",{className:"jsx-596f1e0dbe245a0a mx-auto max-w-prose text-lg",children:[(0,a.jsxs)("h1",{className:"jsx-596f1e0dbe245a0a",children:[(0,a.jsx)("span",{className:"jsx-596f1e0dbe245a0a block text-center text-lg font-semibold text-indigo-600",children:"Conturata AI"}),(0,a.jsx)("span",{className:"jsx-596f1e0dbe245a0a mt-2 block text-center text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl",children:"Create a Stunning Custom Website with ChatGPT in 5 Minutes - Without Writing Any Code!"})]}),(0,a.jsx)(n(),{id:"596f1e0dbe245a0a",children:".video-responsive.jsx-596f1e0dbe245a0a{overflow:hidden;padding-bottom:56.25%;position:relative;height:0}.video-responsive.jsx-596f1e0dbe245a0a iframe.jsx-596f1e0dbe245a0a{left:0;top:0;height:100%;width:100%;position:absolute}"}),(0,a.jsx)("div",{className:"jsx-596f1e0dbe245a0a video-responsive mt-8",children:(0,a.jsx)("iframe",{src:"https://www.youtube.com/embed/8Ev9Ll6hCfY",title:"YouTube video player",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0,frameBorder:"0",loading:"lazy",className:"jsx-596f1e0dbe245a0a"})}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Build Fast, Modern Websites Using AI - Without Touching a Line of Code"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mt-8 ",children:"Have you ever wanted to build your own professional website, but felt intimidated by the idea of learning to code? With AI assistants like ChatGPT, you can now create fully custom websites in just minutes - without writing a single line of code yourself."}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"In this in-depth, step-by-step guide, I'll walk you through exactly how to leverage ChatGPT to develop a beautiful, modern website from scratch in as little as 5 minutes. You provide the design ideas and content, and ChatGPT will handle translating it all into clean, optimized code for you."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Why Learning Basic Coding Concepts is Useful"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"While you certainly don't need to become an expert coder, grasping some core programming principles will unlock new ways of thinking and problem-solving. Understanding code logic will help you recognize opportunities to automate tasks and solve problems more efficiently in all areas of life and work."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"Even just being familiar with basic coding building blocks will allow you to better articulate your website vision to ChatGPT through easy-to-understand instructions. AI assistants are exceptionally good at taking plain English descriptions and translating them into actual code."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 1: Install Required Tools on Your Computer"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"In order to build a website with ChatGPT, you'll first need to install and set up the following essential tools:"}),(0,a.jsx)("h4",{className:"jsx-596f1e0dbe245a0a text-1xl mt-4 mb-2 font-medium leading-tight text-blue-800",children:"Homebrew"}),(0,a.jsxs)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:["Homebrew is a package manager that simplifies installing various apps and programs on Mac. To install, go to"," ",(0,a.jsx)("a",{href:"https://brew.sh/",target:"_blank",className:"jsx-596f1e0dbe245a0a text-blue-600 hover:text-blue-400",children:"brew.sh"}

1)," ","installation command provided. Paste this into your terminal and hit enter. Enter your admin password when prompted."]}),(0,a.jsx)("h4",{className:"jsx-596f1e0dbe245a0a text-1xl mt-4 mb-2 font-medium leading-tight text-blue-800",children:"Node.js"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"Node.js is a JavaScript runtime environment required for the Next.js framework we'll be using. With Homebrew installed, run this command in your terminal to install Node.js:"}),(0,a.jsxs)(o.d,{title:"Install Node JS with Homebrew",children:["brew install node",(0,a.jsx)(a.Fragment,{}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"})]}),(0,a.jsx)("h4",{className:"jsx-596f1e0dbe245a0a text-1xl mt-6 mb-2 font-medium leading-tight text-blue-800",children:"Visual Studio Code"}),(0,a.jsxs)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:["Visual Studio Code is a lightweight but powerful source code editor we'll use to write and test code. Go to"," ",(0,a.jsx)("a",{href:"https://code.visualstudio.com/",target:"_blank",className:"jsx-596f1e0dbe245a0a text-blue-600 hover:text-blue-400",children:"code.visualstudio.com"}),", download for Mac, and install the app through the installer package."]}),(0,a.jsx)("h4",{className:"jsx-596f1e0dbe245a0a text-1xl mt-4 mb-2 font-medium leading-tight text-blue-800",children:"GitHub Account"}),(0,a.jsxs)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:["Head to"," ",(0,a.jsx)("a",{href:"https://github.com/",target:"_blank",className:"jsx-596f1e0dbe245a0a text-blue-600 hover:text-blue-400",children:"github.com"})," ","and sign up for a free account. This will host your code repository and facilitate deploying your site."]}),(0,a.jsx)("h4",{className:"jsx-596f1e0dbe245a0a text-1xl mt-4 mb-2 font-medium leading-tight text-blue-800",children:"Vercel Account"}),(0,a.jsxs)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:["Vercel is the hosting platform we'll use to deploy your live website. Go to"," ",(0,a.jsx)("a",{href:"https://vercel.com/",target:"_blank",className:"jsx-596f1e0dbe245a0a text-blue-600 hover:text-blue-400",children:"vercel.com"}),", click Sign Up, and connect your GitHub account."]}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-4",children:"Signing up and installing all of these tools should take around 10-15 minutes in total."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 2: Initialize Your Next.js Project"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"For fast, modern website builds, we'll be using Next.js, a popular open-source React framework. To set up a Next.js app:"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"Open the terminal in Visual Studio Code. Run the following command:"}),(0,a.jsxs)(o.d,{title:"Create a Next.js app",children:["npx create-next-app@latest",(0,a.jsx)(a.Fragment,{}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"})]}),(0,a.jsxs)("ul",{className:"jsx-596f1e0dbe245a0a list-outside list-disc",children:[(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:"When prompted, name your app/project"}),(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:'Select "Yes" to use Tailwind CSS for styling'}),(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:'Select "No" for TypeScript'}),(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:'Select "No" for ESLint'}),(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:"Select a parent directory to house your project folder"}),(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:'Select "No" for the experimental app directory structure'})]}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-4",children:"Running this command will scaffold out a Next.js project with all the initial code and dependencies configured for you."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 3: Design Your Dream Website in Plain English"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"This is the fun part - you get to describe your ideal website to ChatGPT, entirely in regular English, without needing to know any code."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"Be as descriptive as possible when explaining the layout, content, styling, functionality, etc. that you want your site to have."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"For example:"}),(0,a.jsxs)(o.d,{title:"Example Website Prompt",children:["Create a one-page landing page for my new AI consulting agency website. ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"My company is called AI-gency",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"The color theme is black, yellow (highlighter yellow) and white."," ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"The website background is white. The default font color is black.",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"I want the header of the website to have AI-gency on the left and then a little light gray separator and then the menu in the center with options like About Service Advisor Testimonial and Blog. Each of these menu clicks should just scroll tothe section. Then on the right side of the header there should be a black contact button with white text saying CONTACT. Add a little light gray separator. ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"Underneath the header we'll have a hero section, come up with a good heading tagline for an agency selling AI consulting service to other businesses. Larger black bold letters, serif font and highlight with the marker yellow 2 of theimportant keywords there. ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"Underneath that let's have a descriptive subheading, one sentence about our values. Make it way smaller and gray.",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"Then underneath that add a gray rectangle as a filler for a banner image. On the top left of the rectangle add a white box with rounded edges that is kind of like mostly on the gray re

1ctangle but it's like on top of that so it goes over the edge as well. It should cast a light shadow all around. Fill it with some filler text and some yellow symbols or bulletpoints or something. Add another of those on the bottom right just like that, except this one should be black and have white filler text. ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"Then beneath that add the about section, add 5 client logos, make these just filler rectangles for now, align them to center and with the rectangle above. ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"Beneath that make two columns, temporary rectangle on the left, and on the right a 8 word headline about the business and a small description. ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"And then add some filler below for rest of the menu items."," ",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),"Return the website code in NextJS and Tailwind.",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)(a.Fragment,{})]}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-4",children:"ChatGPT will then generate all the React and Next.js code needed to build exactly the website you outlined!"}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 4: Add ChatGPT's Code to Your Project"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"Copy the code ChatGPT provides for your site and paste it into the pages/index.js file within your Next.js project folder. This will override the default starter template with your custom site code."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"Be sure to delete any existing code in index.js first before pasting in the new code from ChatGPT."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 5: Preview Your Site Locally"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"With your code in place, you can preview your website locally."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"In the terminal within Visual Studio Code, run the following command:"}),(0,a.jsxs)(o.d,{title:"Run Next.js Project Locally",children:["npm run dev",(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)("br",{className:"jsx-596f1e0dbe245a0a"}),(0,a.jsx)(a.Fragment,{})]}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"This will launch a local development server, allowing you to view your website live. You'll be able to see changes and updates in real-time as you continue developing your site."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"When the development server is running, click on the local URL shown in the terminal to open your website in your browser."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 6: Deploy Your Site to Vercel"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"Once you are satisfied with your website and want to publish it for others to see, you'll need to deploy it online."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"In GitHub Desktop, commit your changes and push your code to a new GitHub repository (for version control and backup)."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"Then in vercel, import your Next.js project and deploy it. Follow the prompts to connect your GitHub repository containing your code."}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6",children:"That's it! Your website will now be live at a default .vercelapp.com address."}),(0,a.jsx)("h2",{className:"jsx-596f1e0dbe245a0a block py-4 pt-14 text-center text-2xl font-bold leading-8 sm:text-3xl",children:"Step 7: Set Up a Custom Domain"}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-6 mt-8",children:"If you want to use your own custom domain (e.g. yourname.com) for your new website:"}),(0,a.jsxs)("ul",{className:"jsx-596f1e0dbe245a0a list-inside list-decimal",children:[(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:"Purchase a domain from any registrar like Google Domains, GoDad

1dy, Namecheap etc."}),(0,a.jsx)("li",{className:"jsx-596f1e0dbe245a0a pt-2",children:"In vercel's settings menu, add your purchased domain and follow the steps provided to configure the DNS settings to point your domain to your vercel site."})]}),(0,a.jsx)("p",{className:"jsx-596f1e0dbe245a0a mb-10 mt-8",children:"\uD83C\uDF89 And just like that, you've created an entire website with ChatGPT without writing a single line of code yourself! With a bit of practice, you can leverage this AI-assisted approach to build any type of website you dream up. Don't let a lack of coding skills stop you from launching that startup, portfolio, or blog you've always wanted!"}),(0,a.jsx)("script",{async:!0,"data-uid":"59c4fd1345",src:"https://conturata-ai.ck.page/59c4fd1345/index.js",className:"jsx-596f1e0dbe245a0a"})]})})]})})]})}},1479:function(){},9008:function(e,t,s){e.exports=s(3867)},8915:function(e,t,s){"use strict";function a(){for(var e,t,s=0,a="",i=arguments.length;s<i;s++)(e=arguments[s])&&(t=function e(t){var s,a,i="";if("string"==typeof t||"number"==typeof t)i+=t;else if("object"==typeof t){if(Array.isArray(t)){var n=t.length;for(s=0;s<n;s++)t[s]&&(a=e(t[s]))&&(i&&(i+=" "),i+=a)}else for(a in t)t[a]&&(i&&(i+=" "),i+=a)}return i}(e))&&(a&&(a+=" "),a+=t);return a}s.d(t,{W:function(){return a}}),t.Z=a}},function(e){e.O(0,[888,774,179],function(){return e(e.s=3468)}),_N_E=e.O()}]);