So this time around, I want to create some pages for my site, and I don't want to create them as line
templates right away.
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
convert them to goal line templates.
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
right now are images.
So I'm looking right now at our roots file.
And you might notice that although I can get to the homepage right here and I can get to the about page
right here.
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
what I'll do is just go find an image and I'll just go over to here and say images, dot Google dot
com and I'll look for a house.
I'm not going to use this image for anything in particular, but there are there's a house.
So let's view that image right here and save the image.
I will save it, save image as and I'll call it will leave the name alone.
I'll make a house.
Try that again.
Save images.
What format is this already.
Yeah, OK, I'll just say that on the desk, I'll save it in my project file, so I'll find my files
which are in here up one level visual studio code, which is right here, bookings.
And I'll create a new folder inside of bookings.
OK, cold, static.
This is where I'm going to put all my static images and install static files inside that create a folder
called Images and then I'll save that file.
OK, so I have that file if I go back to my idea.
There it is.
That's an awfully long name to type.
So I'm just going to refactor that, rename it to Housetop JPEG there.
OK, I have this file.
How am I going to display this here?
Well, typically in HTML, which I'm going to talk about in more detail shortly, so don't panic.
I could put image source equals and that's in a folder called static.
But how do I get to that folder.
Well, like let's try putting static images.
Sugarhouse jpeg height equals and it figures that up for me width equals that of figures that for me
there.
OK, if I say this and try running my project, go run command web start go compiles.
OK.
It runs.
If I go back to my web browser and try going to localhost 880, you'll see that, that image, it can't
find it.
It has no way of knowing where to load that image.
And that's something we haven't done yet.
We haven't actually put in.
Let me close this and close this and go back to here.
We haven't actually told it how to find our folder, where we're going to put our static files and we
do that in our roots file.
So I'm going to quit the application.
And just before I return my mux, I'm going to create a file server, a place to go get static files
from file server, which is just a variable name, is assigned the value of.
And this, fortunately, like so many other things to do with the web, is built right into go htp dot
file server and it wants a directory and I can't just type in the directory.
I have to give it in a format that file server wants, because if you look at the signature for this,
it actually wants a root file system and it returns a handler.
So to get a root file system, we use HDB Diyab and then we give it the path name to our static files,
which is going to be dot, meaning the root level of my application slash stack, and then I'm going
to put a trailing slash on two, which it expects to find.
Now that I've created that file server, I actually have to use it and I just tell my multiplexed mux
we're going to handle and we're going to look for the path names slash static and then Star means anything
in that directory.
And then we go htp dot strip prefix which takes the URL that go gets and and modifies it from what the
web server requests or the web client requests into something that it knows how to handle.
And we just strip out slash static and use file server, which we just create it.
Now that I've done that, I can actually recompile my application and hopefully if I did everything
correctly, when I go back to my Web browser and open that window again, http coingate localhost Colen
eighty, it should load that picture.
It's way too big.
But now I have a means of putting pictures or javascript files that you'd be learning about shortly
or txt files which will be looking at shortly.
We have a means of getting them from our local file system into some format that the web server, the
web application knows how to work with.
All right, so first thing I'm going to do is go back and get rid of what's on my homepage HTML and
I'm not going to delete it.
This is where I want to use Git for the very first time I am going to in Visual Studio Code is probably
a little different, but we'll look at that in a moment here.
I can just say right, click on my my file, go to get and choose roll back and it will say, what do
you want to roll back.
Yes.
That's what I want to roll back.
I roll back and it reverts back to the last version pushed or committed to get.
And that's really, really helpful, especially when you do something that is, you know, kind of goofy
and you want to just get rid of it and go back to the last known working version.
Get is your friend in the same way this house image I'm not going to use, but what I am going to use
and I'll put these on the course resources page for this site are a few images that I've already downloaded
and I have them downloaded right here.
And these are pictures that we're going to use at the top of our homepage.
And they look like this.
There's a nice picture of a house, there's a nice tray with coffee, and those are like they could
be chocolates, I'm not sure.
And then someone drinking while looking really, really comfortable drinking coffee.
All right.
I want these images available to my Web application, so I come in here, I find my users T-shirts,
visual studio code projects, bookings, the static folder.
I just created images and I will put those images right in here.
So I'll take them and copy them into that folder.
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
simply add them to get.
There's a keyboard shortcut that I use cloverleaf option A or I could just.
Right.
Click on it and just add to get they've been added.
I will now commit which in visual studio code is done by going to the PVCs menu.
I use the keyboard shortcut and bringing up PVCs operations pop up and I will commit and I will push
it and push the message, adding images come out and push and it wants me to review them or I'll just
commit and push off they go.
So they have been pushed and now they are part of my git repository once the push finishes.
So now I have a means of actually serving static files.
So that's quite helpful.
That means I can actually start building things as straight HTML pages and then converting them to templates
later on when I want to, when I want to treat them as nothing more than Goldwing templates.
So in the next lecture we'll start creating some actual pages and away we go.