Deploying a Workers Site!

Hello, everyone. So, super excited to have everyone join in for deploying a worker site today that we're going to be going through.

So, let's kick this off with a quick round of introductions.

So, I'm Rita. I'm a product manager leading developer productivity on Cloudflare Workers.

And with me, I have Kristian and Nancy.

So, I will let you guys introduce yourselves. Hey, everyone. My name is Kristian Freeman.

I'm the developer advocate for Cloudflare Workers and work on a lot of the documentation and tutorials and kind of example projects.

Super excited to be here.

Hey, everyone. I'm Nancy, and I'm a new intern at Cloudflare.

I joined a few weeks ago. Cloudflare actually expanded their intern program for 2020, which is super exciting, and I'm part of that cohort.

So, excited to learn about workers today.

Cool. Excited to have you on board, Nancy. So, just as a quick overview for everyone who's joining us, we were thinking, okay, what are some of the really cool workers features we can showcase and teach people about?

And I think one of the funnest things that we have is worker sites, which allows you to deploy a static site to workers.

And so, as we were thinking about what's the best way to teach someone to do it, we thought, why don't we actually teach someone how to do it live?

So, thank you so much, Nancy, for being willing to be our guinea pig.

Happy to do it for you, Rita and Kristian. All right. So, to kick us off, Kristian, would you like to give us a quick introduction of, I mentioned it a little bit, but what Cloudflare worker sites is?

Yeah, sure. So, if workers is kind of like a general purpose serverless platform for deploying serverless stuff, worker sites is specifically focused on deploying websites.

So, right now, that's a lot of the time things like Jamstack applications and static sites.

So, if you're a React developer, Angular, all kinds of other frameworks, Gatsby, all that kind of stuff, we have a kind of set of batteries included tools that make deploying that stuff really straightforward and really fast, too, which is the part that I get excited about.

So, yeah. I think that about, how long of a description do you want?

I don't know if we want to go into the intricate details right now, or maybe we do that after we actually do a deploy and stuff.

Yeah, I thought that was a great intro.

I think I'm excited to showcase a lot of things as we go along.

Yeah, cool. All right. Nancy, are you ready to show your screen with us?

Ready. Here we go. Let's do it. Dun, dun, dun. Okay. I can see it, okay.

Me, too. All right. You first. Mm-hmm. So, what we are looking at here is the Cloudflare Workers dashboard, right?

So, just to give everyone, I guess, a quick feel for what workers are and how they work, maybe we can just start with creating a super simple hello world worker, right?

So, you can start with clicking on create a worker.

I like the divine meadow.

That's very serene. It makes me feel very peaceful right now.

I like it. I think we all need a little bit of serenity right now. Yeah.

So, in here, we have our first worker. It listens on fetch events, which are basically HTTP requests, and then it returns a response of hello world.

So, actually, if you click on save and deploy, you can quickly deploy this worker, and anyone who is watching can go to divine meadow 32AB.

You can actually rename it, too, if you click on it.

So, yeah, anyone can quickly check it out if they want. We've deployed it.

Yeah. So, we've deployed it. You can click on the little outgoing arrow just to see that it works.

Next to workers.dev. So, up by the divine meadow, like up at the top, that bolded text.

The other divine meadow. Oh, this one?

Yeah. So, this is where you can rename it, and then the arrow next to it will just open it up.

This one? Yeah. Okay. We're gonna keep it as divine meadow.

I like that as well. I love it. All right. So, this worker is now live.

What I think is really cool, this worker has traveled, like, way further than any of us have, I think, the past few months.

So, it's live at 200 data centers around the world now.

I just went and opened it up. Maybe I'm your first, well, I guess I'd be your second request on your account, which is very exciting.

Thanks, Christian. Christian also became my second Twitter follower today, so it's a lot of good milestones in my life.

That's at Nancy Gao.

Yeah, if you want to make a blog for yourself, go for it. At NancyGao16.

All right. Well, are we ready for something a bit meatier? I think so. All right.

So, do you want to take us to the docks, maybe? I think that's probably a good place to start.

These docks? Documentation? Yeah. All right.

So, on the left-hand side here, you'll see in the menu, we have worker sites as one of our options.

Yep.

So, yeah, this gives you a few options for getting started with worker sites, but today, at least our initial website, we'll be getting started from scratch.

So, you can click on create a new project from scratch. All right.

So, now we're getting into the really good stuff. So, to deploy a worker site, we're going to be using our CLI tool called Wrangler.

So, yeah, Wrangler is the official command line interface for workers, and Nancy, you installed it before getting on this call, right?

That's right. We got Wrangler up and running just a few minutes ago before this.

Nice. And, yeah, for anyone that hasn't, I think if you click on that link that says Wrangler, it should give you instructions for a quick start.

Yeah, these instructions are pretty good. Documentation is strong.

Yay. Yeah, and if you want to kind of follow along at home, it's just basically npm install and then dash G, which is like a global, and it's just at Cloudflare slash Wrangler.

Yeah, npm is probably the easiest way to install it.

We support a couple other ways, but that's by far the most straightforward. I'd say it's everything else is expert users only.

So, it says here that workers requires the unlimited plan.

Rita, can you tell me a little bit more about that? Sure, yeah.

So, when we deployed our original worker, we just used workers, right?

So, the workers served the response. But workers sites, the way that it works under the hood is that it actually uses Cloudflare KB.

And Cloudflare Workers KB is our distributed key value store.

So, the way that we're able to serve all of these assets, and that's essentially what a static site is, right?

It's a collection of HTML files, and my CSS files, and my JavaScript files, and my images.

We need to put them somewhere. So, we're going to store them in KB.

And then, actually, as we'll see, the worker will read from them. So, in order to have access to KB, KB is currently available on our unlimited plan, which is $5 a month.

Yeah. And that's what you get as opposed to the free tier, which just gives you access to workers.

Cool. We actually had our first question, which I think is pretty related to this.

So, maybe I'll just answer real quick. The question was, can you manually upload files slash assets to the KB store without deleting other files?

That is basically what worker sites is, and that's what Wrangler does for you.

So, as we'll see when we kind of look at how Wrangler generates a sites project, it'll basically have a place where you can say, like, this is the bucket, is what it's called, which is, I think, a term that a lot of other kind of hosting places use, too.

So, you can put whatever you want to upload to your workers project in that bucket, and you could also do it using the API if you're so inclined.

But, yeah, basically, that is what, as Rita said, what worker sites does, and Wrangler kind of does that for you with some nice defaults.

Yeah. And actually, the reason that we ended up building worker sites is we saw a lot of customers kind of doing it themselves.

And so, we wanted to make it even easier for them.

So, I guess here, it takes us directly to Wrangler generate, and what Wrangler generate does is effectively it will pull a template.

Here we kind of have a special name template for sites, but it will pull a template from our template gallery, which will generate the boilerplate code for you, so you don't have to write it yourself.

But actually, before we do that, we're probably going to have to run Wrangler config just to get you set up.

So, actually, maybe do you want to in the docs navigate to the quick start guide, because I think that will walk us through that.

Sure. Where should I begin?

So, we've installed the CLI, so we're good there. Keep going. Okay.

I guess we can just start with generating a project and then configure it in order to publish it.

So, sorry. You can go back and copy the Wrangler generate command.

This one? Which command are you talking about? We want to use the site -specific one.

Why don't we use this one just to show how. So, this is a template, and what Wrangler generate does, as I mentioned, is it will use a template from our template gallery.

So, here, it's going to use this template that lives on GitHub .com .

And it will create an app locally called my router app. So, if you want to try it, you can copy that and run that in your terminal and see what happens.

Just like this?

Here we go. Can you make it a little bit bigger for us, maybe? Oh, sure.

Happy to do that. Bigger than that, even?

Can you guys see that? I think that's great. Okay. Awesome. Did it work?

It did. Yay! Second worker's app. Let's go. All right.

So, if you go to VS Code, maybe we can take a quick look at what all was generated for you.

So, if you go to file and then open do you know the directory?

Oh, I see it. My router app. Can you just click on open for us?

Did that go as expected?

I'm not sure what I was expecting to see there. Yeah. No, this looks great.

Yeah. Okay. Do you want to open up index.js? Right here? Yep. Exactly.

Okay. So, this is like our router template. Basically, the kind of short version of it is like when a request comes in, this template is going to look at the URL specifically of what's being requested, and you can set up basically like handlers is what we call them.

So, if I go to like slash about, route it to this about page, or if I go to slash API slash something, route it to this other handler.

So, yeah.

And then the cool thing, I think, as we saw when we pasted into the terminal is like this is just a GitHub project.

You can actually just go look at it.

You could contribute to it if you want. It's open source. And so, if you're like, wow, I don't love this router.

I want to make my own. Like, you could go do that.

People do do that all the time. People love writing routers. There's a lot of routers out there.

Yeah. So, and you can see like this has some comments and stuff in there as well.

It's just kind of giving you a good place to start from. So, yeah.

I don't know. Do we want to try and publish this one also? Or what do you think?

What's the next step here, I guess? I don't know. A router that doesn't we haven't built anything yet.

So, I feel like we should start with something with publishing something a bit more exciting.

That was just in the docs. I figured it gives a feel for what that's like.

All right. Back to the docs we go. Back to the quick start.

Okay. So, we've done that part. Yep. And now we can go back to worker sites, actually.

Oh, like in the docs and the navigation. Back to start from scratch.

Yeah.

And so, you can copy and paste this command that says wrangler generate dash dash site.

And you can rename my site to anything you want. So, that first argument in there that says my site, that's just the name of the folder that it's going to generate in the worker.

And I think if you do like backspace, it should go back onto that previous line.

Okay. What should we call this one? Did we want to stick with Meadow or should we pick another name for this?

It's totally up to you. You make it whatever sounds great.

I'll give the viewers a preview of what's coming. It's going to be a dog site.

Perfect. And the kind of important thing here is that dash dash site is a kind of specific flag inside of Wrangler that says, like, you know, this project is going to be a worker's sites project.

And so, there'll be a couple different things in there that just look, you know, a little different specifically for handling that KB stuff that we mentioned earlier.

Yeah.

So, kind of same thing. If you want to open up the directory that it's generated for us in VS Code, then you can explore it a little bit.

Where do I find it now?

File. Open. And then dog site. If you click on the little nav menu at the top, the dropdown, you can go to Ngal.

All right.

So, now we have, right, so we have a few new things.

We have two kind of top level directories.

One that's called public and another that's called worker's site. So, feel free to open up either one of the boxes.

What are these gifts?

So, this is Ferris. It's the Wrangler mascot. I think it's also related to Rust, the programming language, which is what Wrangler is written in.

I'm not a Rust person, though, so I don't know the, like, relationship between the two.

Well, it has the cowboy hat. So, the cowboy hat is, like, Wrangler.

Wrangler, the cowboy crab. I'm sure there's got to be a good story behind this somewhere.

Yeah. And then this, so this worker's site folder is just another template, basically.

So, by default, it has everything that it needs for basically serving this public directory like a normal website.

You can come in and change this.

Like, if you open up index.js, you can see, like, there's a lot of stuff that it will do for you.

And if you are, like, if you like to nerd out on, like, caching behavior or, like, any of that kind of stuff, like, you can come in here and you can totally customize things.

But it's just a set of kind of nice defaults. You know, I find that, like, for my projects, I'm, like, rarely changing this stuff.

And also, all the packages, like everything else, like, it's all open source.

So, if you find that there's something that could be a big improvement for everyone else using worker's site, you can, you know, come in and contribute in that way as well.

Definitely. Once we get a little bit more advanced, maybe I'll get to that stage someday.

Yes. Maybe we'll even get you writing some Rust. Yes. Yeah, maybe. Next Cloudflare TV segment.

Um, yeah. And if you look at the top there, you can see we import something called KV asset handler.

So, yeah, that's basically the library that parses out, like, the file name and then serves it on the correct path.

So, when you go to, like, search my website, it doesn't, like, you don't have to have the ugly URL.

It's, like, index .html and all of that. Who knows where to look for it.

All right. Well, are we ready to publish? And just see what happens? Sure.

Is there anything else I need to change to any of the spoiler? Not really, right?

So, go ahead. Not with this file, no. I think what Rita was probably going to say is we should now look at the Wrangler.toml file, which is going to be at the bottom of this sidebar.

Yeah, exactly. But, like, by design that index .js and everything in there, it should work without you needing to change anything.

Like I said, if you want to, if you are opinionated, you're welcome to. But, yeah, for most people, you really shouldn't have to at all.

Awesome. So, what does the Wrangler.toml tell us?

So, Wrangler.toml is the configuration file for Wrangler.

It does all kinds of stuff. The kind of main things that we're going to kind of look at with this particular project.

So, like, the name, obviously, you pick that name when you ran Wrangler generate.

That's going to be kind of part of your URL when you actually publish the project.

The type is, you know, it's a Webpack type project.

So, it's doing some kind of JavaScript Webpack building. You can ignore that for now.

We have, like, a config already figured out for you. Yeah, and I think we'll come back to this account ID and workers dev stuff in a second.

The one thing I will call out, though, is lines 8 and 9, which is the workers site kind of setup.

So, this is basically going to tell Wrangler, like, hey, this project is a workers sites project, and the folder that I want to particularly publish is this public folder, which is obviously where the fun pictures and all the HTML and stuff is in there.

So, that's kind of, like, the secret sauce here with Wrangler is, like, it will look for this, and it will say, like, oh, like, this is workers sites.

Okay. I should go in and upload all of this stuff to KB.

Okay. That's good to know. I'll remember that tag. Yeah. So, yeah, if you want to click out of VS Code and take us back to the dashboard, we can go and grab our account ID to go in the account ID field in here.

How do I get that account ID?

Where is it? Go back to the browser. And then, yep, in your workers tab, go back a step.

And so, on the right-hand side here, you'll see just under your workers subdomain, you have your account ID.

And you can click to copy and just paste it in the Wrangler doc file.

If no one ends up, yeah, in there. If no one ends up asking this question, because I'm sure it will come up, someone will be, like, wait, is that okay to, like, ah, that's your account ID.

Like, you're totally fine to have that be, like, public facing.

You could go on my GitHub and very, very easily find my account ID.

Because it's, like, the API token and kind of the, like, more, I don't know, secret credentials, for lack of better terms, that actually are what are going to let you publish this stuff.

But, like, you could take this project and put it on GitHub with that account ID in there, and it would be totally fine.

I'm just anticipating that someone will be, like, ah, that seems bad. Or they'll ask a question about it.

I think that's a pretty common thing that people kind of run into.

Yeah. Thanks for some thought of everything. Um, yeah, the Wrangler.toml is intended to live with your code in GitHub.

So, it's definitely okay to publish.

And, yeah, you can save this change. So, just command S. All right.

So, we're going to go back to your terminal. You can actually, one of the cool things about VS Code is you can have they provide you a little terminal within it, which I personally like to use.

But we don't have to. So, let's see.

Oh, maybe this is better. All right. So, now you're going to run Wrangler config.

And this is when we will get into some bit more secretive stuff. But just before we get there, I'll pause us so you can share your screen.

Can you run Wrangler config for us real quick and just see what happens?

Just like that? That's the command?

Okay. We'll see what we get. What's the API token I should enter here?

All right. So, we need to enter an API token. So, for that, you need to go back to the dashboard.

And then, on the right-hand side, you see where it says documentation, and then it says CLI and API.

And then at the bottom of CLI and API, it says get your API token.

So, we're going to click on that. And then we're going to click on create token to create a new token.

Okay. And a token, basically, the purpose of it is, like, so, there's API keys.

And an API key is, like, tied to your whole account. So, that's how you authenticate that, like, I'm Nancy Gal every time.

But tokens are really handy because you might want to scope permissions or give someone permissions temporarily.

Or if you have a CI process running somewhere, so, like, continuous integration where it deploys on your behalf, you want to kind of minimize the amount of permissions and, like, the amount of damage you can do.

So, in here, you can, yeah, customize, basically, the token that you're creating.

But we're going to use a template.

So, we don't have to make a ton of choices. So, you can click on use template next to edit Cloudflare Workers.

Okay. Good to know that this is all super configurable.

Yep. And I think you can just, like, include your account.

I think that's the only thing that you have to worry about. Where it says, like, account resources.

And then the first thing is filled out and says include.

But the second thing. This is the one? Yep. Should I continue?

All right. Before you continue, I think in the next screen, it's going to show your token.

Okay. So, yeah. This is where we're going to turn off your screen presentation just for a second.

Okay. Thanks for looking out for my privacy, friends.

I'm going to stop sharing now. Yeah. There's a couple cool things on that page also where you can, like, make specific API tokens for, I don't know, a specific domain.

Or if you're like me and you're, like, connected to a bunch of different, like, Cloudflare accounts with a bunch of different domains, like, I probably should, you know, like, make one that's specifically for one subset of projects or whatever.

So, it's really useful in that way, I think.

I just blank it every time. Well, you can also expire them, right? Yeah. So, that's, you know, worst case, you make something that's, like, way too generous API token-wise, you can expire it in, like, I don't know, a month.

And then, you know, when you are up to it a month later, you can do something a little bit more.

Yeah, when your CI jobs start failing.

Yeah. Yeah. So, I have my token now, and I've copied it to the clipboard.

Should I bring you guys back? Enter it into your terminal first, because I think that'll make it vanish, and then we can bring everything back.

You should probably paste it, and then run clear in the terminal. Yeah.

All right. I have done that now, and I'm gonna go back to sharing.

We're ready for you.

Okay. And we're back. Ta-da! Yay! All right. So, you can bring back your terminal.

And oh, so, run LS, and we're gonna go into the directory of your site.

So, you can see the doc site.

If you run LS in here, you can see all the goodies that we have.

So, now, all that's remaining is to run Wrangler publish. This is the moment.

This is the moment. Okay. I hope it works. So, this is basically, like, the first time you run Wrangler publish.

It's gonna install some dependencies that Wrangler uses internally, and it should basically, like, unless there's a new version of Wrangler, you'll have to do this again, but this will be, like, a one-time thing, and then, like, subsequent Wrangler publishes will be much faster.

There's a lot of, like, scary-looking output here, too, but I don't really know what's going on, but it seems legit.

But now you can see, like, when the emojis come back.

So, you know you're a real hacker. Yeah, exactly.

Yeah. But yeah, when the emojis come back is when you know you're good to go.

Sorry, it looks like it's successfully published my script to this URL. Should we check it out?

Let's check it out. Absolutely. If you're following at home, dogsite.nancygao95.org.

There's that crab. I love him. I have stickers. I can make sure to get you some of the actual.

I think it's, like, it must literally be that image that was made into a sticker because it's identical to that.

And, like, just to give, if you go back to the terminal real quick, just to, like, walk through what just happened.

So, it basically built your project first, which is, like, your worker site folder, which is, you know, all of the, kind of, routing and stuff like that.

And then the second thing it did here was it made a, you can see, dog site worker sites assets.

So, this is making a new KV namespace, and then it's putting all of the contents of that public folder into there.

So, it does all of that, you know, automatically for you, which is really nice.

Yeah. If you go, actually, back to your Cloudflare dashboard, one thing that's really cool is if you click on KV up there at the top next to workers, refresh it maybe.

Yeah.

So, what you'll see in here is that we created this KV namespace for you. So, namespace is kind of like a bucket or a unit that we hold all your assets in, and you can click on view.

So, yeah, you can see all of your files are in here.

And I think someone even asked in the beginning, can you manually upload files or assets to the KV store?

So, this is one way to do it.

You can add keys and values and make entries in here. And Wrangler also has a bunch of commands that you can run to add things into KV.

Yeah.

So, if you want to manually put, I don't know, whatever files you want, but you don't want Wrangler to kind of decide how to do that, we have some direct KV commands inside of Wrangler as well.

So, yeah, there's definitely options of how you want to kind of manage that stuff.

I will say real quick, we've had a couple, I don't know, questions, feedback or whatever.

I think we, across the board, need to make all of the font sizes comically large, like very, very big.

Oh, should I zoom in even more?

Yeah, yeah, yeah. I say like, until it's like, okay, that's too big.

That's like mobile. I do like whatever feels, yeah, whatever feels too big, go to there and then go back down one.

I think that's the strategy. I think we found our optimal size.

Yeah. I think we can go down one more. Okay. 200% sounds good.

Yeah. Let's go with that. Yeah, that's perfect. So, I guess, do we want to try and move into, like, starting with a existing site next?

Yeah, let's do that. So, yeah, what we did now was we created this site from scratch.

And if you wanted, we could change the, like, what it says from Hello World to Hello Nancy or whatever.

But I think I'm pretty excited about our next little adventure, which is helping Nancy create a website for her dog.

Should we introduce him to the viewers really quick?

Yeah, absolutely. Okay. I have this Google Drive folder where I have pictures of my family dog.

I thought you were going to bring him out live for a second.

No, he actually lives in Wisconsin. He's happy in Wisconsin and I'm somewhere else.

But this is Drogo. After Kala Drogo from Game of Thrones. And he has such an attitude, but he's a good boy.

Here he is with my parents in the kitchen begging for food.

Best boy. And yeah, he's a Pomsky, which is a half Pomeranian, half Husky.

Kind of a weird mix, but it works. I've never heard of that mix, but honestly, that sounds like...

We're here for it. Sounds good. I'm so here for it.

Okay, back on track. What were we doing? So I think basically just to kind of set the stage, if you go back to your next tab, that start from scratch section in the docs.

So what we did here was we basically created a new... I guess also we could probably blow this text size up as well.

I'm going to say this many times.

I'm going to be annoying about it. I'm sorry, I've gotten many messages about it.

So this is like a new site, right? Like this is... Obviously we have all the crab pictures and stuff.

Like this is a template that we've set up, Cloudflare has.

But for a lot of people, it's obviously much more common that they have an existing site of some kind.

And so we're going to kind of walk through that workflow.

We're going to use a framework called Hugo, which is a static site generator.

It's pretty straightforward. Hopefully it's been a bit since I've used it, but I think it should go well.

We'll give the docs a test. It'll be good. But yeah, we're going to basically create a new Hugo site.

And then we are going to add worker sites to that project.

And then we're going to deploy it just like we did with this one.

So if you go to the sidebar and go to start from an existing site, we will probably just leave...

I guess there's a Hugo section right there. If you want to click that.

Does that go... I think that just links us to their docs, which is great because we do...

Maybe open that in a new tab. And yeah, we'll just hang on to this.

Yeah. And we'll come back and kind of add worker sites. I don't know.

Do you have any other thoughts on that part of the Hugo aspect of this, Rita?

No, I think we just dive straight into the Hugo part of it. Cool. So if you want to go back to the Hugo quick start, I will say also like we installed Hugo already.

And so that part of it, you can go, I'm sure in the docs, they have like an install section.

It can be a little bit of a pain. Yes. Bigger font. Perfect. And it's zoomed in on just the part that we need, right?

Which is create new site. Yeah.

So I think if we keep scrolling here, so we can obviously skip that. I guess if you go in the terminal real quick, like the way that you would know this is working is if you run Hugo.

Real quick, CD out of your folder. So CD space dot dot.

Yeah. And then we should probably make this font size bigger too. Oh, okay, sure.

Um, let me zoom all the way up. Are we happy with this size? Beautiful. Okay. Yeah, this is good.

Yeah. So you can see like Nancy ran Hugo here. It's not going to do anything because we're not in a Hugo directory right now, but like we have Hugo installed already.

So if you're following along, like you need to go to the quick start and make sure that you install Hugo.

For most people, like let's say you're on a Mac or whatever, you can just do brew install Hugo or whatever package manager you're using.

But yeah, so we've completed that step. So I think we can move on to whatever's next in the quick start.

It looks like it's either giving us a little hint.

Another way of verifying that you have Hugo.

Yeah. Okay, step two, create a new site.

Should I copy this command? Yes. Cool.

So yeah, I guess we're going to probably want to, in like the interest of time, figure out like the fastest way to get all of your images.

Do you already have your images downloaded?

All of those dog pictures like on your computer? Yeah, they're in my downloads.

Okay. So maybe what we'll do is, if you just want to open that quick start folder in VS Code, like we did with the other ones.

And I think if you click on the dog site at the top, that like...

Yeah, the little drop down.

And then just go up one to your home directory. And then quick start. Perfect.

Okay, this is where I think our Hugo knowledge will be tested. Because I think we need to add a theme of some kind.

So maybe if we go back to the quick start in browser, and we can just like...

Well, we should be able to test it out locally quickly.

Like I'm sure it comes with the default, I think. So do we want to do that and then pick out a theme?

Sure. Yeah, let's try it. I think it's Hugo server. Server.

Server. I think it said it if you go back to your terminal. Ah, yeah. Hugo server, you say?

Yeah. And real quick, you're gonna actually want to do CD quick start.

Yeah. And then, yeah, Hugo server.

So now you should be able to go to...

You can see that web server is available at localhost colon 1313.

It may be like when...

Yeah, it's... I think this is working. It's like 100% blank because there's no theme set up.

Yeah, cool. That makes sense. If you go back to the...

We're literally on a blank slate. Yeah. So if you go back to the terminal, I think it'll probably say like...

So it's working, but there's no theme set up.

So maybe we'll go to the quick start again, and we'll just like find a theme of some kind.

Okay. There must be some sort of like fun gallery theme, right?

Yeah, I really like... Should we use this beautiful Ananki theme? Yeah, they really like that theme.

Do you want to go to themes? Do you want to open up themes.gohugo.io in a new tab, and we can just have a quick browse through.

Get excited for that new feel.

Pick out whatever, you know, Drogo would like. Which one is fitting for a dog?

I kind of like this one, the terminal theme.

Should we pick that one? Yeah, let's do it.

Pretty cool. Let's start. It's very retro for Hugo. So I think if you go down to the...

There should be a section that's like how to start. And we're just going to copy that command in.

I think that should work. We can also just download it manually too if this doesn't work.

Okay, so I clone it directly to my Hugo folder.

Let me cancel this. I cancel this, right? Yeah, yeah, that's right. And are we in the Hugo folder right now?

Yes. Oh, yeah. Okay. Cool.

So yeah, this is, you know, it's just going to kind of clone it locally. I think the thing that we'll want to figure out is we need to kind of make some sort of example content here for things to start rendering.

We can try Hugo server when this is done.

Was it serve or was it server? I can't remember now. Server. Yeah, so we can kind of test that out.

But I guess like kind of while we're waiting, the important thing to know about Hugo and any of these kind of frameworks like Gatsby or Next or any of that kind of stuff is like the end goal here is when you run, I'm guessing it's like Hugo build.

It's usually build for all of these frameworks.

You're going to get like a folder that's just static HTML, CSS, JavaScript, and dog pictures.

And that's going to be the thing that will be uploaded to workers.

So maybe we'll try Hugo server again and see if we will get something better than a blank page this time.

Okay, so back to the local host here.

Okay, so we should add some content probably.

So let's go to the back to the quick start.

Yeah, open up VS code. So I think we need to add something under content, right?

If you open that up, does anything?

Yeah, so maybe I think usually the way this works is if you want to just right click content and then do new folder.

And then let's just call. So I think the way we're going to do this is we'll just make like a blog post with dog pictures or if we want to do a blog post.

If you have lots of feelings on each image and want to write a blog post for each, you'll let me know.

But maybe for now, I'll just start with one blog post that has all the pictures in it.

I think we can start with one.

Yeah, so make a new folder called posts, like posts plural. Yep, and then you can just press enter.

And then if you right click in there again, we can do new file.

And then we're just going to give it a name of some kind. I don't know what you want to call it.

Dog pics, sure. And it's going to be. Does it need to be .md?

Yeah, so you're going to right click and then rename to dogpics.md. So it's going to be marked down.

So yeah, that should work, I guess.

There is some stuff. I should just type in hello.

Yeah. Let's see what happens. Do you still have the server running? Yeah, I think it's still running.

Do I need to save this? Yes. And then maybe try, I guess it'd be slash dog pics, maybe.

Or maybe slash posts slash dog pics, if that doesn't work.

Okay, so let's try killing the server and then just restarting it and see what that does.

Okay, so I've killed the server now. Do I do Hugo server again?

Yeah. Hang on, hang on. It says found no layout file for HTML. Is that something we should?

That is possible. Maybe we can go back and look at the theme.

Maybe there's some more setup we need to do. I'll open it up here and take a look too.

Oh, there is actually, if we go back into the Hugo theme tab that you have open in the browser, it looks like there's a config that we need to copy also.

So, keep scrolling down just a little bit.

Yeah, you're going to want to copy like that whole thing.

I think that's our missing piece here. Yeah, I think that's our missing piece here.

Actually, it's like a very large missing piece. Okay, copy this.

Maybe I'll zoom back. Yeah, feel free to zoom out. And where do I paste this now?

So, you're going to paste that at the top level of your project in Visual Studio Code in that config.toml.

And I think for now, you could probably just replace the whole thing, honestly.

Because I don't know if that other stuff we want to worry about right now.

So, yeah, you can just save it. And then if we try – oh, yeah.

There's like literally that important thing on line three that says like, we are using this theme that we just created or copied in.

So, probably important that we add that at least. So, yeah, if you go back in the terminal and then restart the server.

And you'll probably want to go cd dot dot out of this folder as well.

Yep, perfect. Okay, moment of truth.

Look at all this stuff we have. Do we want to navigate to slash posts slash dog pics?

Try just 1313 first, maybe.

Oh, they work. Ooh. Very cool. Schnazzy. So, I think that that 0010101 is our post.

So, there's like normally some stuff that you will put in that markdown file that we created.

Maybe a better way to – Maybe we'll put it in about. That could work too, yeah.

We probably need to make an about page. So, I think that would be – Go back to – Remember my Hugo.

Yeah. I think there's a pages or – no. Maybe try doing just like content slash, like right click on content and then do new file about dot md.

I'll go look in the Hugo docs, though, while you do that. But if you just want to like try putting some, I don't know, like some text in that file of some kind.

Hi, my name is Draga. Oh, my God. Yes. All right, save. And then I think it should rerun it, honestly.

Refresh and click on about. Hey.

Hey. Yay, nice. Cool. So, I think – yeah, I actually am glad that we remembered that because I was actually like, oh, no, I don't know if I remember enough Hugo otherwise.

So, that's good. I think the next thing to do is we could probably just put the – your dog images folder.

We're going to put that in the project.

So, if you want to just go find that in your downloads real quick. Sure. It's definitely in my downloads.

I think that's a dog pic.

Cool. So, yeah. So, all of these – maybe we'll just start with like one of them for now, and you can just like copy it into your clipboard.

Okay.

And once we've done that, I don't know if you pick whichever one feels like the right one.

Which one feels like the right one? I like the one where he's – that one, yeah.

This one from lying on the floor? This one, yeah. Derp. Yeah, I have a corgi, so I'm like I think specifically attuned to like derp pictures because that's like the corgi default.

So, yeah, if you just want to do that copy image – or you can just do command C also.

Awesome. And then back in your Hugo folder, if you go to the static folder on the side.

And – Static folder on the side? Yes.

Yep. And then if you – I'm not sure if you can paste directly in here, but you can definitely right-click and then do reveal.

The reveal finder. Good call. Yeah, and then just go to static and then just like command V, paste in there.

Cool. So, then now that's in there, we actually need to link to it, obviously, in our about page.

So, maybe if you want to go back to about MD, do you know the markdown image syntax?

It's kind of convoluted, but I can explain it to you. Yeah, because we're going to need to link to that image.

So, if you do exclamation point and then like square brackets.

So, just like – yep, like that. And then parentheses. Just like open parentheses.

Yep, exactly. And then we're going to write the URL for this image.

So, it's going to be slash and then it's going to be that image underscore 7624.

Perfect.

Yep. And then if you save that, we'll see how good the live refresh is. I think I see it.

Look at that. Perfect. Yay. Yay, that was successful. Very cute. I'm like blown away at how easy to use and quick that was.

And the good news is because the way the design is set up, the image size is very, very large.

So, even if people couldn't read the text, they can definitely read the text.

They can definitely read this part of it or see this part of it.

So, that's important. That's the most important part.

Such a good boy. So, now that we have that set up, so we can kind of say like this is probably a good first version of the site, I think, right?

Do we all feel good about it? So, if you open up the terminal and then you can just do control C and kill the server again, if you do Hugo build, this is going to be, oh, no.

Is it not build? Oh, what is it? Do you remember, Rita?

Can you do Hugo dash dash help? Yeah, that's a good call. Just like that? Yep.

Help us out. I'm going to scroll up more. Yeah, just a little bit.

Hugo.

Is it not build? Okay, I'll look it up. Well, I can figure it out in the meantime.

Maybe we'll move to generating. Yeah, all right. So, in the meantime, we'll generate the worker site.

So, if you take us back, kind of we can zoom all the way out to where we started, which was deploying a worker site, and so I think one of your tabs should have the start from existing site docs open.

So, yep, scroll down, and then in the root, so in the quick start folder, if you scroll up a tad, copy that command that says wrangler init.

Yep, I'm going to need to remove that dollar sign.

And then, yep.

All right, so now if you go to VS Code and open it up, you should see the worker site stuff generated in there.

So, if you scroll down a little bit, we have our worker site directory, and then we have our good old friend wrangler.toml kind of further down at the bottom.

So, same routine as earlier, we don't have to generate a token or anything, but we will need to go grab the account ID.

Okay. I think I remember where that came from.

Oh, not that. It's kind of tricky in this zoomed in view, but if you go to workers, just on the right.

Yep.

All right.

So, we have the account ID in there. I'm back with the info that we need.

Just in time. Oh, yeah. So, yeah, the missing piece here is we're going to need to specify our bucket.

So, when I tried to run Hugo build earlier, it turns out the command is actually just Hugo.

So, if you want to go back in the terminal and just run that.

Just Hugo. Yep. So, this is going to build out your project. If you do LS in this directory, you should see that public folder now.

So, this is going to basically look at everything in your site, and it's going to build it all out to that public directory.

So, now back in Wrangler Toml, we can add the in your VS code, we can add that bucket field, and it's just going to be dot slash public.

And I guess the last thing we can do in here is that name field, the very first line.

If you want to give it some kind of name.

You may have a conflict with that one because we used it before.

Anything else. Like Drogo, maybe? Good boy. Perfect. Yeah, so, then if you save that, and then we go back in the terminal, you can just run Wrangler publish, and fingers crossed, it should work.

All right.

So, now it's going to take all of our assets and upload them to KVM. So, and I think, like, the thing you'll notice, like, if you're uploading an image or something, like, it's going to actually upload that image into KV, so it might take a little bit longer.

But yeah, it's otherwise the same process as what we did with our smaller site before.

So, if you want to open that URL up in browser. Cool.

And then I think about is where we had that info. Hey. And it's live. It's live.

We did it. We did it. In 58 minutes. Perfect. I know. This is truly well-timed. And I think the nice thing I'll say is, like, about static sites in particular is, like, when you're developing using that Hugo server locally, like, you can be pretty confident it's going to look, like, identical in the actual worker sites deploy.

So, that's awesome. We literally have, like, one minute left. So, Rita, I will let you do all the wrap-up and stuff.

Yeah. I mean, I don't know if there's a better way to wrap up than with a picture of a really cute dog on the screen.

This is really easy to deploy.

I mean, I feel like I could make one for my mom, my dad, my dog, my cat, like, everybody.

So. Well, maybe we'll make it a recurring segment. Cool.

Yeah, cool. I think the thing that I will say is, like, if you are interested in worker sites and there's a bunch of other, like, frameworks you want to mess around with, like, React or Gatsby and stuff like that, we have the info in that same start from an existing site in the docs, which shows, like, for each of those projects, a lot of the time the configuration is the same, but sometimes it's, like, a different bucket folder or something like that.

It basically supports all of them with, like, no config.

One line of config. Two lines of config, maybe.

But, like, it's pretty straightforward otherwise. Yeah. I think we're out of time.

I think so, too. We, like, timed this perfectly. Thank you both so much.

And thank you, Nancy. You did amazingly. Yeah, thanks for walking me through all of that.

I'm going to stop sharing now. Yay, go team. Yay. And if anyone wants to check out our website, it's goodboy.nancy.95.orgist.dev.

Maybe we'll tweet it out.

That's right. Cool. Bye.