Building and Launching the Site

Okay, so let's talk a 0:00 little bit more about this marketing website. 0:03 As I mentioned, we use DALL-E for the background image, 0:06 and we use this tool called Cursor 0:10 to code up the website, the pages, integrate Stripe, 0:13 all of that sort of thing. 0:18 Now, if you haven't heard of Cursor, 0:20 Cursor is quite possibly 0:22 the most exciting technology that I've used as a developer 0:25 in my entire career, if frankly not my entire life, 0:29 programming computers. 0:33 It is, as the marketing website here says, it is the AI code editor. 0:36 right you might have heard of a tool 0:40 github copilot which was kind 0:44 of the first entrant into this 0:46 new type of ai assisted code editing tools 0:49 and i did use github copilot for a while and i found 0:54 i'm not sure after a while although it was a clear 0:59 and obvious improvement over writing all of the code manually 1:03 it seemed maybe the innovation tailed off a little bit 1:07 and I started hearing about this 1:11 competing editor called Cursor. 1:14 And I guess I 1:19 adopted this tool maybe six months ago, give or take. 1:19 Cursor is Visual Studio Code. 1:23 Visual Studio Code is a very popular code editor. 1:27 It's open source. 1:29 So Cursor is Visual Studio Code. 1:31 They copied or cloned that project, which is 1:33 a perfectly acceptable thing to do for these types of open source projects 1:37 as long as you abide by the licensing terms so they cloned it 1:42 the cursor team cloned it and then they added 1:47 this pretty extraordinary 1:51 ai specific coding capabilities to it 1:53 and if i just scroll down here a little bit on the cursor page 1:58 you'll see here on On the left, we have the code. 2:02 And then on the right, there is this thing. 2:06 It's called, I suppose people just typically refer to it as Composer. 2:09 And Composer is where you chat with the AI. 2:15 You ask it to create code. 2:19 You can also just ask general questions about programming and so forth. 2:22 so what I did when I wanted to 2:27 create 2:31 the Spies in DC marketing website is I went to cursor 2:32 and I'll actually go ahead and do that now 2:36 I went to cursor 2:40 and I asked it to create 2:42 what's called a Next.js website 2:47 web application take your pick either 2:51 term I think applies here so Next.js I guess 2:53 maybe I'll just jump back to my browser here 2:57 and go to Next.js 3:02 and I'll click here 3:05 Next.js is a React framework 3:08 that you can use to make web applications, 3:13 but you can also use it to make marketing websites such as Spies in DC. 3:17 I'm not historically a JavaScript developer, right? 3:23 I know enough to be dangerous, but I certainly never made a living 3:26 as a JavaScript developer. 3:31 But nonetheless, I had at some point read more 3:33 about this tool and or about this framework. 3:35 And it seemed a pretty, pretty good, pretty easy 3:39 way to quickly make these types of marketing websites. 3:42 I'll note, for example, that my own 3:47 personal website, 3:50 wjgilmore.com, also is built on Next.js 3:53 and was almost entirely coded, again, by cursor. 3:58 The lone exception being the template 4:02 that you see is actually 4:06 a Tailwind CSS template. 4:10 This used to be called Tailwind UI. 4:13 They recently rebranded it to Tailwind Plus. 4:15 And this is a paid version paid tier if you will of the Tailwind components 4:18 which again as somebody who has not been 4:23 a very good designer I found this to be just an absolutely 4:27 invaluable site over the years I think I paid $179. 4:32 This was maybe four or five years ago for it 4:37 and have just been thrilled, really, by what I've been able to do with it. 4:41 And you'll see, coincidentally, right here, 4:47 this is the website template called Spotlight that I used 4:50 for wjgomer.com. 4:55 So I'm running a couple of these sites using Next.js 4:57 and therefore I thought well that's going well. 5:01 They're easy to maintain especially thanks to Cursor. 5:06 So I went ahead and created 5:09 Spies in DC as well in the same fashion. 5:12 Now I'll go back to cursor 5:16 here just to give you a little bit of a demonstration about how it works 5:22 and what I did before I started this video is I ran 5:26 git status so I'm using git to manage the version control 5:30 for my Spizing DC code repository 5:37 that repository is managed on github 5:41 and you can see here I've got two untracked files. 5:44 These were two blog posts that I'm working on, which if you might recall 5:48 from earlier in this video, I had done some Google Gemini research about 5:52 interesting blog posts. 5:58 And sure enough, as I mentioned, I thought this was a great one, gifts 5:59 for guys who already have everything 6:03 or who say, I don't want a present and things that, which matches 6:06 kind of my response perfectly for my own birthday for Christmas and things that. 6:10 So I started those, but I haven't finished writing them. 6:16 So they're still just sitting here untracked. 6:18 But there is something that I do want to add 6:22 to Spies in DC to the website right now. 6:25 And that is what's called an episode. 6:29 So if I go back to my browser, 6:32 I will go to spiesindc.com again. 6:38 And I'm going to go episodes 6:40 and I'm going to go to this one, for example, which is the Winston Churchill. 6:43 Again, I call these episodes page 6:49 that subscribers can access via their phone 6:53 by taking a picture of the QR code 6:57 that is included with that first package. 7:01 so what's really cool about this one is you can actually listen 7:04 to the Iron Curtain speech you can listen to the audio and 7:08 you can even watch a video of the speech which I think is kind of cool 7:11 because this speech was actually delivered March 5th 1946 7:14 if memory serves correctly so it's kind of cool that you can also 7:19 not only listen to but actually watch the video as well 7:24 so what I need to do and I'm 7:27 going to go back to Cursor 7:30 my button works there we go i'm going to go back to cursor 7:34 and what i need to do because i'm kind of creating this 7:37 experience on the fly and i'm currently working on the fourth 7:42 episode or fourth package which pertains to the berlin wall 7:47 right so i i'm i'm preparing these presently 7:53 and i'm going to mail them out this week to that very first group of subscribers 7:56 who are now waiting for the fourth package, 8:01 well, I want to create a corresponding web page for that fourth package. 8:06 So what I'm going to do now, 8:09 just to demonstrate cursor, is I'm going to go over here to the, 8:10 what's I guess typically referred to as the composer window, 8:15 and you'll see I have, 8:19 hopefully you can view this in the video, I have this set to agent. 8:21 There's also an ask, which is just a kind of your typical 8:25 traditional chat interface where you can ask programming questions. 8:28 But I have it set to agent because I wanted to write code 8:32 and potentially create folders and do all kinds of things that. 8:35 So what I'm going to do is I'm going to say, please create 8:39 a new episode 8:43 titled 8:46 well with the URI 8:47 the Berlin Wall because that 8:52 what the fourth package is all about 8:55 please use a template or 8:58 I should say maybe the same template 9:03 and layout from previously 9:07 created episodes such as the long telegram. 9:11 Now, especially 9:18 if you've never seen Cursor before or use these AI coding tools, you might find it 9:20 remarkable that I'm just writing plain old English 9:25 to generate this code, right? 9:29 And I'm also referring to previously created code 9:32 because I want Cursor to use that previous 9:37 episode as a model for the new one. 9:41 So nothing a live demo. 9:44 Hopefully this works. 9:46 It probably will, but we'll see. 9:47 I'm going to go ahead and hit enter. 9:48 And it's currently generating code. 9:51 And there we go. 9:57 I'll create a new episode page for the Berlin Wall 9:58 following the same template and layout as other episodes. 10:00 And you'll see over here on the left, just right now as I pointed to it, 10:05 to this section, Cursor went ahead and created a new 10:09 folder called the Berlin Wall. 10:13 And if I go ahead and open this, 10:17 you'll see all of the text here is kind of highlighted in green. 10:21 And that's because Cursor added code. 10:25 If you're instead asking Cursor to refactor code, 10:29 you might see a mixture of both green and red. 10:32 Green meaning code was added, red meaning the code 10:35 line or lines were deleted 10:38 and this is just pretty standard 10:42 basic react code i guess again i'm not a react expert know enough 10:45 to be dangerous if i scroll down a little bit here you'll see 10:49 that it's even added some text about the berlin wall 10:55 which i didn't ask for but cursor kind of likes to try and be very helpful 10:57 you can see it's even and it's i'm glad 11:02 it did this, you can see, 11:06 I'm going to get rid of my Explorer here so there's more space. 11:09 You can see that it's saying the Spies in DC 11:12 package includes one, two, three, four, five, six items. 11:15 I mean, these items look interesting, but that's not what you're getting in the 11:19 fourth package. 11:22 So this is a great example of a hallucination, right? 11:24 Sometimes these AI models just make things up, So you cannot 11:28 just happily hit accept and move on. 11:32 You need to check to make sure what they're doing is accurate. 11:36 But for right now, 11:41 for the purposes of this demo, I went ahead and I hit accept, 11:41 which caused that code to be finalized, if you will. 11:46 And if I go back to my browser, 11:51 we can take a look at this new page. 11:58 I'll go ahead and go to episodes. 12:01 Then there's the Berlin Wall. 12:03 And as you can see, 12:05 the episode layout for the Berlin Wall 12:09 closely matches that of the 12:12 Iron Curtain episode that I showed you earlier. 12:15 it also contains this cool 12:18 classified badge and then dates which 12:21 of course I didn't ask it to add but it's kind of neat that it did 12:25 I'm assuming this pertains to the construction 12:29 and then the subsequent demolition of the wall 12:31 I'll have to check these dates but I'm pretty sure 1961 12:34 is accurate regarding its construction I'll need to check that date 12:38 and then I'm pretty sure 89 is when the wall began to come down 12:42 and again I need to check that date and then of course as I mentioned 12:46 this is all a hallucination with regards to what the 12:50 this particular package will include so I'll need to update that 12:55 nonetheless I hope the the larger point here is clear 13:00 which is that with just a short paragraph 13:05 in English as opposed to writing code I was able to 13:09 not only have cursor generate this page 13:14 but I was also able to put it 13:17 in the desired location which is under the episodes directory 13:19 and then move on to my next task 13:22 with very little friction involved 13:25 so how does this site wind up 13:29 or how do these changes wind up being deployed to 13:35 the actual production or public spies in DC website let's talk about that next 13:38 so spies in DC as I mentioned 13:44 is a Next.js site it is the code that is is managed in git 13:47 And what I do is I push it to GitHub periodically. 13:53 And then what happens is a service 13:58 called Netlify, which I put up their marketing site here, 14:01 a service called Netlify is where I host spiesindc.com. 14:06 And Netlify is I've configured it to 14:11 listen to that GitHub repository. 14:14 And when changes are made, Netlify recognizes 14:17 those and maybe looks at their repository to see if there are changes. 14:21 And if there are, Netlify will retrieve that code 14:25 and then deploy it to spiesndc.com. 14:28 I've been on the Netlify, 14:32 frankly, the free tier for maybe even four or five years now. 14:35 And I really love this service. 14:40 It has a lot of bells and whistles, frankly, most of which I don't use. 14:43 I just use it for hosting primarily. 14:48 And it's always online. 14:51 It never seems to be unstable. 14:54 I've never experienced really any issues or anything I can really complain about. 14:56 And so, yeah, check this one out, 15:02 Netlify, if you're looking for a cheap 15:05 or if not free, frankly, way to host a marketing site. 15:08 What else can I add here? I 15:13 use Namecheap and I have for 15:17 years to buy and manage domain names. 15:19 I'm not, frankly, entirely sure these days. 15:23 It's the cheapest domain name registrar out there, but I don't really care. 15:26 I'm happy to pay a few extra dollars just to keep all of my domains 15:31 and I have many any coders out there 15:35 to keep them all in the same place 15:39 and then again I have the GitHub account 15:43 I have the Netlify account and 15:44 everything so far has just worked amazingly well 15:47 and I'm very happy with this approach 15:51 so in summary in closing 15:54 I hope you found this video useful 15:58 I have been 16:01 experimenting pretty heavily with these tools these AI tools 16:04 for really a few years now going back to the ChatGPT release 16:07 and I'm finding them to be not only extremely useful in terms of their ability 16:12 to help me get things done faster but they're also helping me think 16:19 I think expand my horizons if you will and think deeper 16:23 about ideas and problems 16:27 thanks to AI research tools such as Gemini 16:30 right and I can say unequivocally I'm just again 16:34 due to my full-time job due to running the kids 16:38 around all of that sort of thing I never in a million years 16:42 would have gotten spies in DC off the ground 16:45 had it not been for these AI tools so that's pretty cool and And it's cool 16:48 to see subscribers coming in and apparently enjoying the service. 16:52 I'm getting a lot of really positive emails about it so far. 16:57 So if you have an idea that you think may be time 17:00 consuming or may involve certain technical obstacles that would otherwise 17:05 be too difficult to surmount alone, 17:10 I would certainly invite you to check out one 17:14 or maybe even all of the tools that I discussed in this video. 17:16 And if you have any questions, feel free to email me 17:19 at wj at wjgilmore.com, 17:22 or you'll find me on Twitter. 17:26 I guess it's called X These Days. 17:29 Sorry, Elon Musk. 17:31 I'm at WJ Gilmore. 17:32 That's my handle, WJ Gilmore. 17:35 So, again, I hope you found this useful and happy coding. 17:38

You need to sign up for Treehouse in order to set up Workspace

Sign up