1

00:00:00,900 --> 00:00:07,370

So this time around, I want to create some pages for my site, and I don't want to create them as line



2

00:00:07,380 --> 00:00:08,490

templates right away.



3

00:00:08,520 --> 00:00:14,040

I want to create a page or to make sure they look more or less like I want them to look and then I'll



4

00:00:14,040 --> 00:00:15,770

convert them to goal line templates.



5

00:00:16,380 --> 00:00:21,240

And one of the things I'm going to have on my page that are on my pages, on my site that I don't have



6

00:00:21,240 --> 00:00:22,730

right now are images.



7

00:00:23,400 --> 00:00:26,420

So I'm looking right now at our roots file.



8

00:00:26,460 --> 00:00:33,420

And you might notice that although I can get to the homepage right here and I can get to the about page



9

00:00:33,420 --> 00:00:34,080

right here.



10

00:00:34,800 --> 00:00:41,790

If I look at the actual templates and I go to say the home page and I try to put an image in here and



11

00:00:41,790 --> 00:00:48,840

what I'll do is just go find an image and I'll just go over to here and say images, dot Google dot



12

00:00:48,840 --> 00:00:50,850

com and I'll look for a house.



13

00:00:51,780 --> 00:00:55,310

I'm not going to use this image for anything in particular, but there are there's a house.



14

00:00:55,320 --> 00:01:01,950

So let's view that image right here and save the image.



15

00:01:01,950 --> 00:01:09,140

I will save it, save image as and I'll call it will leave the name alone.



16

00:01:09,160 --> 00:01:09,990

I'll make a house.



17

00:01:11,730 --> 00:01:12,330

Try that again.



18

00:01:13,200 --> 00:01:14,310

Save images.



19

00:01:14,310 --> 00:01:16,290

What format is this already.



20

00:01:18,090 --> 00:01:23,250

Yeah, OK, I'll just say that on the desk, I'll save it in my project file, so I'll find my files



21

00:01:23,250 --> 00:01:30,690

which are in here up one level visual studio code, which is right here, bookings.



22

00:01:31,290 --> 00:01:33,930

And I'll create a new folder inside of bookings.



23

00:01:34,250 --> 00:01:37,770

OK, cold, static.



24

00:01:38,400 --> 00:01:43,170

This is where I'm going to put all my static images and install static files inside that create a folder



25

00:01:43,170 --> 00:01:45,880

called Images and then I'll save that file.



26

00:01:46,950 --> 00:01:51,500

OK, so I have that file if I go back to my idea.



27

00:01:51,540 --> 00:01:52,220

There it is.



28

00:01:52,680 --> 00:01:54,210

That's an awfully long name to type.



29

00:01:54,220 --> 00:01:59,240

So I'm just going to refactor that, rename it to Housetop JPEG there.



30

00:01:59,470 --> 00:02:01,180

OK, I have this file.



31

00:02:02,100 --> 00:02:03,540

How am I going to display this here?



32

00:02:03,570 --> 00:02:09,360

Well, typically in HTML, which I'm going to talk about in more detail shortly, so don't panic.



33

00:02:09,810 --> 00:02:14,820

I could put image source equals and that's in a folder called static.



34

00:02:15,030 --> 00:02:16,530

But how do I get to that folder.



35

00:02:16,650 --> 00:02:20,460

Well, like let's try putting static images.



36

00:02:20,810 --> 00:02:29,270

Sugarhouse jpeg height equals and it figures that up for me width equals that of figures that for me



37

00:02:29,280 --> 00:02:29,550

there.



38

00:02:29,670 --> 00:02:40,520

OK, if I say this and try running my project, go run command web start go compiles.



39

00:02:40,530 --> 00:02:40,930

OK.



40

00:02:41,370 --> 00:02:42,060

It runs.



41

00:02:42,060 --> 00:02:48,870

If I go back to my web browser and try going to localhost 880, you'll see that, that image, it can't



42

00:02:48,870 --> 00:02:49,410

find it.



43

00:02:49,590 --> 00:02:52,590

It has no way of knowing where to load that image.



44

00:02:53,010 --> 00:02:54,450

And that's something we haven't done yet.



45

00:02:54,450 --> 00:02:55,570

We haven't actually put in.



46

00:02:55,570 --> 00:02:59,730

Let me close this and close this and go back to here.



47

00:03:00,000 --> 00:03:04,410

We haven't actually told it how to find our folder, where we're going to put our static files and we



48

00:03:04,410 --> 00:03:05,700

do that in our roots file.



49

00:03:06,060 --> 00:03:07,230

So I'm going to quit the application.



50

00:03:07,770 --> 00:03:15,120

And just before I return my mux, I'm going to create a file server, a place to go get static files



51

00:03:15,120 --> 00:03:20,400

from file server, which is just a variable name, is assigned the value of.



52

00:03:20,400 --> 00:03:25,530

And this, fortunately, like so many other things to do with the web, is built right into go htp dot



53

00:03:25,530 --> 00:03:30,150

file server and it wants a directory and I can't just type in the directory.



54

00:03:30,150 --> 00:03:34,290

I have to give it in a format that file server wants, because if you look at the signature for this,



55

00:03:35,490 --> 00:03:39,510

it actually wants a root file system and it returns a handler.



56

00:03:39,510 --> 00:03:47,250

So to get a root file system, we use HDB Diyab and then we give it the path name to our static files,



57

00:03:47,460 --> 00:03:55,410

which is going to be dot, meaning the root level of my application slash stack, and then I'm going



58

00:03:55,410 --> 00:03:57,930

to put a trailing slash on two, which it expects to find.



59

00:03:58,620 --> 00:04:04,200

Now that I've created that file server, I actually have to use it and I just tell my multiplexed mux



60

00:04:04,560 --> 00:04:11,070

we're going to handle and we're going to look for the path names slash static and then Star means anything



61

00:04:11,070 --> 00:04:12,090

in that directory.



62

00:04:12,390 --> 00:04:21,930

And then we go htp dot strip prefix which takes the URL that go gets and and modifies it from what the



63

00:04:22,170 --> 00:04:26,250

web server requests or the web client requests into something that it knows how to handle.



64

00:04:26,940 --> 00:04:33,600

And we just strip out slash static and use file server, which we just create it.



65

00:04:34,140 --> 00:04:41,640

Now that I've done that, I can actually recompile my application and hopefully if I did everything



66

00:04:41,640 --> 00:04:48,360

correctly, when I go back to my Web browser and open that window again, http coingate localhost Colen



67

00:04:48,620 --> 00:04:50,900

eighty, it should load that picture.



68

00:04:50,910 --> 00:04:51,780

It's way too big.



69

00:04:51,900 --> 00:04:57,630

But now I have a means of putting pictures or javascript files that you'd be learning about shortly



70

00:04:57,990 --> 00:05:00,540

or txt files which will be looking at shortly.



71

00:05:00,960 --> 00:05:07,590

We have a means of getting them from our local file system into some format that the web server, the



72

00:05:07,590 --> 00:05:09,940

web application knows how to work with.



73

00:05:09,960 --> 00:05:15,030

All right, so first thing I'm going to do is go back and get rid of what's on my homepage HTML and



74

00:05:15,030 --> 00:05:15,900

I'm not going to delete it.



75

00:05:16,170 --> 00:05:22,980

This is where I want to use Git for the very first time I am going to in Visual Studio Code is probably



76

00:05:22,980 --> 00:05:25,410

a little different, but we'll look at that in a moment here.



77

00:05:25,410 --> 00:05:31,800

I can just say right, click on my my file, go to get and choose roll back and it will say, what do



78

00:05:31,800 --> 00:05:32,550

you want to roll back.



79

00:05:32,550 --> 00:05:32,880

Yes.



80

00:05:32,880 --> 00:05:34,050

That's what I want to roll back.



81

00:05:34,050 --> 00:05:39,660

I roll back and it reverts back to the last version pushed or committed to get.



82

00:05:39,660 --> 00:05:45,060

And that's really, really helpful, especially when you do something that is, you know, kind of goofy



83

00:05:45,060 --> 00:05:48,270

and you want to just get rid of it and go back to the last known working version.



84

00:05:48,390 --> 00:05:55,560

Get is your friend in the same way this house image I'm not going to use, but what I am going to use



85

00:05:55,560 --> 00:06:00,240

and I'll put these on the course resources page for this site are a few images that I've already downloaded



86

00:06:00,360 --> 00:06:01,860

and I have them downloaded right here.



87

00:06:01,860 --> 00:06:05,550

And these are pictures that we're going to use at the top of our homepage.



88

00:06:05,550 --> 00:06:06,600

And they look like this.



89

00:06:06,600 --> 00:06:11,790

There's a nice picture of a house, there's a nice tray with coffee, and those are like they could



90

00:06:11,790 --> 00:06:12,900

be chocolates, I'm not sure.



91

00:06:13,200 --> 00:06:17,130

And then someone drinking while looking really, really comfortable drinking coffee.



92

00:06:17,340 --> 00:06:17,670

All right.



93

00:06:18,000 --> 00:06:25,770

I want these images available to my Web application, so I come in here, I find my users T-shirts,



94

00:06:25,770 --> 00:06:30,060

visual studio code projects, bookings, the static folder.



95

00:06:30,060 --> 00:06:35,370

I just created images and I will put those images right in here.



96

00:06:35,670 --> 00:06:40,100

So I'll take them and copy them into that folder.



97

00:06:42,240 --> 00:06:47,070

So they're in there now when I go back to my idy, you'll see there they are not added to get, I will



98

00:06:47,070 --> 00:06:48,300

simply add them to get.



99

00:06:48,630 --> 00:06:52,920

There's a keyboard shortcut that I use cloverleaf option A or I could just.



100

00:06:52,920 --> 00:06:53,080

Right.



101

00:06:53,100 --> 00:06:55,250

Click on it and just add to get they've been added.



102

00:06:55,650 --> 00:07:01,980

I will now commit which in visual studio code is done by going to the PVCs menu.



103

00:07:01,980 --> 00:07:12,510

I use the keyboard shortcut and bringing up PVCs operations pop up and I will commit and I will push



104

00:07:12,840 --> 00:07:25,950

it and push the message, adding images come out and push and it wants me to review them or I'll just



105

00:07:25,950 --> 00:07:28,590

commit and push off they go.



106

00:07:28,620 --> 00:07:33,970

So they have been pushed and now they are part of my git repository once the push finishes.



107

00:07:34,770 --> 00:07:38,460

So now I have a means of actually serving static files.



108

00:07:38,850 --> 00:07:40,650

So that's quite helpful.



109

00:07:41,550 --> 00:07:48,390

That means I can actually start building things as straight HTML pages and then converting them to templates



110

00:07:48,510 --> 00:07:54,200

later on when I want to, when I want to treat them as nothing more than Goldwing templates.



111

00:07:54,510 --> 00:08:00,030

So in the next lecture we'll start creating some actual pages and away we go.