Transcripts
1. Intro: Hi, I'm showing on the website
development and teacher. Welcome to my course on creating a free Netlify
website with Hugo. This course is called people
who would like to speed up their website
development process by streamlining their
website publishing and they get workflow. Once you push your work to get, it will automatically be
uploaded to Netlify and built. You can even create
Netlify builds for branches and Pool Requests. See you in the course.
2. Getting started with the project: Getting started
with the project. For the project you'll need the latest versions of the
following software installed. You'll need to kick out and make sure you install that with either brew on Mac
or Linux or Windows. Use TROPOMI. You'll need Digital Studio Code install the latest version of
that probably fixes. You'll need Node.js
and then includes NPM, get CLI for commuting to
Git and GitHub desktop. So you've got a
graphical method of seeing what's happening
with your Git repository. You'll need to apply for accounts with GitHub and
phi. And that's all free. If you need me help
installing that software. If you go to my introduction
to Hagar N bootstrap course, the first lesson, textures is the process of installing
all of that software. And you have two
particular order. That way the software
will link to each other. For example, you need to
install Node.js first, and that also
installs chocolaty. Then you can install Hagar. And you have to make sure
that you have if you're sharing code installed
before you install Git, CLI and GitHub Desktop. That way you can choose
Visual Studio Code as your code into. Throughout the course,
I will be committing each lesson to the
GitHub repository. There's a link to that in
the resources section. Keep in mind, the master branch is just what I've been using to link up to the Netlify
of sight to do the billing. The master branch itself
isn't very useful for you, but there is one
branch per lesson. And if you've got any trouble
with any of the lessons, you can go and view
the particular lesson via the branch and you can
see the code for that lesson.
3. Set up new GitHub project: The first thing we're going
to be doing is setting up a GitHub project. One way of doing it
easy if you go into GitHub desktop and
add new repository, it will ascii folder name of
the repository and the path. And it will create a
folder, folder repository. And it will also initialize the repository at the same time. I prefer not to do this
method because I don't like relying on GitHub
desktop to create the photo, because often I'll end up with
the photo inside a folder. I prefer that method
of creating a photo. And then inside that folder, I'll open up the empty folder
in Visual Studio Code. And then from here, if we go to the Source Control button, you can initialize
the repository. Or if you wish, in the terminal, you can run git in it. You'll then notice
we've got a folder, the 90s dot get, and that's where all
your Git history. And you'll get
configuration leaves. If you want to download
a Git repository off the Internet and you wanted to upload it to your own account, you'd have to delete the folder. Now that we've
initialized the project, we need to add a dot
git ignore fall, hit the New File button
and name it dot git. Ignore this fall. We're gonna specify all of the folders and files which
will not be uploaded to get. First one is slash node underscore modules
slash after it. And that's all the
files and photos are generated when you install
dependencies from NPM. And if you've done any
of my other courses, you'll know all about that. An exon will be slash public. That is when you run the command and the SWOT is
built for uploading via FTP. You'll be generating falls
in the public folder. And we don't want
to commit those because they change frequently. And then unnecessarily you can generate them with
the community. Don't need to actually
commit them to get. The next one is slash resources. Page resources, which
have been built for use in the project,
generally not needed. We will be looking at
that in later lesson. We will be including them to increase your
Netlify Bill times. But it does increase the size
of your GitHub repository. Generally wouldn't include
them when the page, the website, it's
in a draft stage. But later on when the
page is completed, it's great to include
the resistances hold up because it will
decrease your build time. The next one is dot underscore. Build dot loc. That's a lot fall that's
generated when you guys running. We don't need to include that. Then we'll look at
running out first commit. Since few ways we can do this. One way is if you click on
the Source Control tab, you can put your messaging. For example, create git, ignore. Otherwise. In other way
to do it is we got to GitHub Desktop, slightly
more graphical. You can put a message in here, or you can go with the default and control enter to commit. This is where I really locked
to use GitHub desktop. When you publish, you can choose whether to
keep it private or not. Using Netlify, you
can actually set to private and that 22
entities either GitHub. You can also choose
the organization. If you back in
Visual Studio Code, you can actually choose an
organization and published it to you can do it manually
through the command line. Let's work. A highly recommend if you have organization setup with
your GitHub account, you use GitHub desktop that you've chosen
your organization. You can publish your repository. That brings us the next step. We're ready to
create some content.
4. Add Hugo content: We're going to add some
content to our project. And you could copy and paste
in another huge guy project. And if you've done some
of my other courses, you probably have a great
project that's ready to go. Just keeping in mind,
do not copy and paste in the dot git folder. Because if there is dark
kit folder in that project, because you'll be overriding the Git repository Settings
in history for this project. I'm going to create
some new content when you use the Command T ego, new site, dot slash. That's for the current directory
that we're already in. By default, it actually
creates a folder for you, but we've already got our
folder setup we get now will tell us that there's
already content in the folder. And you have to use force. Dash, dash, false. Obviously it'd be
careful you don't. I brought existing
content when using force. As it has hinted. You can download a
theme or you can create your own with the Hugo
new theme command. We're going to use this
to temporarily create some layout files because currently we've got
nothing in layout. Somebody going to copy and
paste new theme, temp. Looking your themes folder and you'll see we've got
a temp folder setup. Going to lay out and grab everything and drag it
into your layouts holder. Not going to use a
theme. If you wish. It also got a CSS and JS
folder setup in a study. You don't really need
those for this tutorial. I'm just keeping everything
as simple as I can. There's tutorial. It's more about
working with Netlify. Before we go ahead and commit all of these content
that we've just created. You have to remember,
if the folder is empty, you will lose it with kids. So you have to do is create a
file called dot gatekeeper. It doesn't matter what
the fall is cold, but we use the
convention dot git keeps me know exactly
what it's for. We can then copy
and paste that into every single empty photo
that you wish to keep. We'll then go into layouts
and base off dot HTML. I personally don't use this div with the ID of
content when I'm working with bootstrap to this, just to keep things
really simple. And that's something
that a lot of my students have been using
as going through my courses. Then we'll go into
our index.html. Put in some curly
brackets, define mine, inverted commas in that. And then we'll add dot content. What we'll do is
create a container. The container will pop out content in a lot
of total as well. We'll do a dot title. Then we'll copy that
into single and list. And then we'll go into
base off partial setup. So we'll do a total default of dot title. We'll put our Bootstrap CSS in. I'll have a link to this page. You have already done this. If you've done my other courses, for example, we're getting
started with you guys. Then JavaScript will make
a new partial code script, Fuhrer peice, the
JavaScript in there. Let me get back to base off. Put it in the script for me, I do some semantic tags in here, but you'll have to watch the other courses
to learn more about all those other features
because I'm trying to keep this course as
short as possible. We'll then create an index page. So we use new underscore,
index, thought, MD. Then go into content. We'll call it home. We'll do some alarm Ipsum. You may not have Visual
Studio code setup that you have to just put
some content in. One thing you've got to
make sure you fix up. That is, draft is true. We need to draft to false.
So the page will display. You can change
while you're at it. And that's up to you is in
archetypes under default dot m d. This is a template that's used
to creating new pages. And I set draft to false. When I'm creating a new
page that I normally use branches and pull requests. And that's something
I'm going to show you later on
in this course. And it works really
well with Netlify. I'll set draft to false. Costing me for what we've just
done is totally optional. You can just copy and
paste in a huge project. But make sure you don't
copy and paste in the photo when you're doing it. Otherwise, you'll
ever, what we've just done when we've set
up a new project, open up a new terminal,
and run Do you guys ever? Then we'll Control click
to view in the browser. So that's why it's not ready to move on to
the next lesson.
5. Create new Netlify site: Now we're going to look at
creating a new Netlify site. To have a Netlify account setup, the free tier is perfectly
fine for what we're doing. You can then connect
a good project. I'm going to choose GitHub. If you logged into GitHub, this will connect automatically
when they're going to go down and you need to set the commands you only
buy structure, blank. Build command will be Hugo and the published directory
will be public. My GitHub defaults to
master as the branch, which is the actual main
branch for deploying. You might have said two main. So just double-check, you've got the right bright sit there. It will pull it in for you. That's currently deploying
the site. We've set up. You can't go into domain
paintings and you can change this domain here for example, I'm OK, cool it. Skillshare, Netlify. You get the Netlify dot app, a URL, and google generally
it doesn't crawl them. So you have to worry
too much about that. I think I do deploys
and you'll see our site has been published. You can actually click on it and it will give an overview
of what's happened. And let us have a
look at turning on debug sitting for Hugo. So you can see a lot more
about what's happening. You can click on the link and it will send you to this
exact version of the site. But I prefer just to go
back to the overview. And that will give you
the public address to the site published what we just created in the
previous lesson. If you've got up to the stage when you are ready to move
on to the next lesson.
6. Create Netlify configuration: This demo gonna have a
look at how to configure Netlify builds for different
scenarios and environments. I'll put the link to this
page in the results section. It's notifies file-based
configuration page. You have this up a
file called Netlify, not tall in the root
of the project. And then down here we've
got some example code. We don't need all
of it, whoever. So let's make the fall and then we'll put
the important part seem. Create a new file in the root of the project and we'll call
it Netlify dot double. The first thing we're worried
about is the first part, build and all the settings sit underneath the build heading. All of our global settings on the build unless we're
going to overwrite them. So we'll copy and build. We don't worry about
base because we're using the root of the
project as the base. We will put in Publish and we'll put in
our build command. Published will be public. The build command, basic
build command ECO. I'll have a link to the
Hugo command docs page. We can add dash, dash debug for debug output so we can see what's
actually going on. And we will do
dash, dash magnify, minify the HTML and XML at plugins in this tutorial because I handled
pretty much everything. So now we're going to
have a look at overriding the built-in things for
different contexts. This ray contexts
we've got production, which is the main contexts. We've got deploy, preview, and we'll say branch
deploy, Grab, production. Get a preview. We'll get to preview dot environment because I
prefer to set it that way. Then the inline
method shown here. And then we'll set one up
for production as well. We have branch deploy and lunch the ploys environment,
Real-time missing. Build environment, adding something to
that laid out for NPM. I'm gonna look at creating some different build
commands for deploy, preview and branch deploy. Keep in mind if we're doing a branch point or
a pool request, which is a deploy a preview. You will need to sit Hugo to use the custom URL
that is created. When that happens, we
have an option here of dash B and that
sets the base URL. I'm going to set that up
for all builds Netlify. That way if you change the URL Netlify don't have to worry about going into Hugo and
updating the base URL. And you could just use dash PE, but I'm going to use dash, dash baseURL to make them more obvious when you
come back in the future, look at your config file
using the command line. Do you want to use cash-basis
because less than top. But I'm going to
use dash, dash base year old to make
it more obvious. I'm going to use dollar
sign and the capitals deployed on sql prime
underscore URL. That'll pulling the base
URL from Netlify for us. Whole thing. Delete the content, let branch point, and we'll comment that out
to start therapy knit. Same thing with the
preview and for production because it
will set it up so that all old three top to
work automatically, because we added
the base URL from Netlify will get back to environment in a future lesson
on NPM. We'll save that. Then we'll commit will sink. Then if we get to
the deploys page, refresh and you'll see
we're now building. And it's built successfully. Let's say he, because we've
run the debug option, we've got all the
extra output from. That's really helpful
when you're trying to figure out what's
going wrong because it's really tricky on Netlify to work out problems
as they haven't. Back on that deploys page, you'll notice the
time taken to build and about 14 seconds
and 16 seconds, it's really important
to keep an eye on that because it starts to creep up 2.52 minutes,
three minutes. You're going to burn
through your allowances. If you get back
to your homepage, you'll see you've got
300 build minutes per month on the free tier. That's really important
that you make sure you sought to optimize
so that you're not using excessive Belbin's, otherwise you run
out and then it is quite an expensive to upgrade, especially if it's
just a simple website.
7. Add NPM configuration: We're going to look at setting up Netlify project for npm. I'll have a link to this page. It's the Node.js
environment page. Things we're gonna set. There is an option
of Node version. I will put it in any
way, but we're not going to use it for now, but you can either write it
if you've got a problem, you can upgrade the
night versions. You can force Netlify
to use new version. But we're really
worried about is the node environment
now by default, Netlify sits node
environment to development. Now, what that means is if you've got development and
production dependencies, they all going to be installed. And there's a warning
here that if we set node environment to production, any dev dependencies in your package.json will
not be installed. That means we can
speed up the builds on Netlify by not installing dependencies that you
only use locally. For example, in
Visual Studio Code for developing your website. Let's go ahead and
we'll set that under Bill dot environment will paste in my name and we'll
set it to production. Then we'll pop in the Node and
NPM version options there. If you need to force
Netlify to upgrade. We'll comment this out
because we're not using them. Let's go ahead and
we'll set up NPM. We'll do is we'll get
to a new terminal. Moron. Period knit. Just keep
all the defaults for now. Then we'll do some insulation. Just say for example, you want to use
post CSS with Hugo. You'd need to run npm
install many posts, css, posts, css, CLI, and then say for example,
autoprefixer as well. Then you'll look at
the package.json. Get rid of that terminal. You'll see that
they've installed independencies and they go into install for us on Netlify, even though we are setting our production in our
environment to production. Let's go ahead and let's install some development dependencies. For example, ES link for linting your ES6 JavaScript files
will run NPM install dash, dash, save the div. Then they'll go check
out our package.json. We now have our
dev dependencies. Es lint will not be
upward is Netlify since we're using the node
environment of production. So it's gonna save
a bit of time. We building. Some people don't bother
because they only get installed on the first
instance, they didn't get cash. But I prefer just to
keep them separate. Microsoft or easier.
8. Branch builds: It's not gonna have a
look at branch fields and how we can create
a new branch we get. And then we can build
that branch on Netlify so you can preview the idea
that you're working on. Or you might be, for example, fixing a bug to the thoughts
tab and choose your site. Then go into site settings
and build and deploy. Then get into branches. And currently we've got our master as our
production branches, a branch that builds
and that's for the main URL on the branch deployed since few options
you can choose all. And it will build every single
branch that you create. Otherwise you can build
individual branches. I personally prefer to build individual
branches because I don't want every single branch
so I create to build. You've just got to
put the name of the branching, but for now, we'll just set it all to make it easier for this tutorial. We'll save that. And then we will go
down to the branch, the bottom master, and
we'll create a new branch. And I'm going to create
cool it six branch deploy. You can find it easily. And then what we'll do is
we'll make some changes. So we'll go into layouts, partials, and head off. And then we'll copy the default
Bootstrap five, navbar. And then we'll paste that in. Before we commit it. We will run control-click. You can say that it's
currently working as expected. It's important that you preview changes before you
put them through Netlify. Otherwise, it waste
your time and you'll run out of build allowances. What we do now is we'll put
our committing add navbar. I'm actually publish Guide To The deploys page for the
slight you're working on. And you'll notice
that it's building off the branch deploy branch. Shouldn't take too long at all. That's running through now. We've got out the bug
output their thoughts live. So I'll just go back
to the deploys page. We've got a button there that
will go to the GitHub code. That's the actual
commitment, the branch. If you want to see
the branch deploy, you'll have to click on
to that particular build. And then open branch deploy. That is significantly
different to the actual site. You'll notice we've got two different slots
happening there. Got to be careful when
you're dealing with clients. I do find this
particularly confusing, although it is very
powerful because you can create a draft folding for a new ID that I want you
to work on and you can share them with a branch deploy. Now, there is a button
there for publish. Recommend that because you'll end up publishing a
different branch. What you can do is, for example, in GitHub desktop
or in Visual Studio Code. We can then go to
the back to master. And then we can choose branch, merge branch, and we can
merge in branch deploy. The only problem is
I'll sync that up. Then the problem is, if
that generates an era, it can be a little
bit hard to catch it. You'll see now it's building emerging in those changes and that's merging into
the master it, you probably should preview that in Visual Studio
code with you guys. So the command first
before you sync it with good, that's published. So if we go to the main site, you'll see now I've pulled in our navbar from the
branch, deploy branch. Now usually what you
would do is you'd go in and delete the branch
after you've mentioned, but I'm gonna leave that
branch on there so you can see in the repository on GitHub in case you have any trouble with this
particular lesson or ALS, and you can see all the different branches
Whenever already full. The next lesson
where we looked at this in slightly greater detail.
9. Pull Request Builds (deploy previews): So now we're going to look
at poor requests builds. Go ahead and show you how
to do the pull request. Going to Netlify,
go to your site, and then sought settings
and build an employees. First thing we'll do
is we will turn off the branch building except
for the production branch, because that will generate
unnecessary building. Then the next option
is deploy previews, and this is all
about Pool Requests. Now by default, it
is set up to build any poor requests against your production branch or
branch, deploy branches. And I'll show you exactly
what that means in a moment. We've got Netlify draw enabled tool that we're not gonna use because they're
working on or I'm at it. I'll show you what is it anyway. We'll leave it setup with
the default settings, then we'll get back
individuals to your code. I'm going to make a new branch. I'm going to call that
branch pool requests. You'll be able to say that
in the Git repository. We'll do is we'll go
into the homepage, will change some of the
full meaning around. Just to make things obviously, we'll put in a div
with some margin, some padding and
some background. Then we'll check that out. Then we'll change
the text color. Now we will commit, will publish the branch. Then we'll head over
to the repository. Just a little note, you
can actually get a plugin. You can create GitHub, pull requests from inside
Visual Studio Code. And I'll show you in
the website because it doesn't require
any installation. So on GitHub, head down
and choose the branch. It says the bridge is one
commit ahead of Moscow. So we're going to create a
pool requests against Moscow. So one way to do it is
only contribute drop-down. We can pull requests, otherwise you can create
them through poor requests. Then we're comparing
the four crusts branch. And then when you wouldn't
call it poor requests, I've just done that. You can identify the lesson. We're comparing it
against Mostafa. It's grabbed the commit
message for us day. You can put further
information there. It says able to emerge,
which is great. We'll credit. Github is check the
ability to manage, and then then we're running
some Netlify checks. Netlify is going through as
it builds the deploy preview. It's running the
checks for us and we'll get some results
from that in a moment. So let us check R1, we haven't gotten any problems. I can actually click
on the details button and it'll actually show you the play preview. So just like we were looking
at on the Hugo said, well, this is a version of the salt that's actually
merged with the master branch. For example, you could have someone who's made
some changes to the master branch and
you've been working on something in your own branch. For example, this background
with a different texts. And then this is showing
what actually looks like to be merged together. I think deploy
previously, great, because it's a reminder that the work is sitting
there waiting to emerge and you can keep working
on that branch and it will keep updating the
deploy preview. Say for example, you've
told the client that you're happy to give them
two revisions to a draft. Well, then you can open
up your pool requests. You can do all your
work on that revision. And then when they're happy with it and they've signed off, you can commit to their website. And if you've promised
the mean now you'll, you'll do two revisions to the
drop. Then you'll open up. And I loved to play preview. It'll pull request if they
wish to small changes. And then you can work on it. And then you can
commit those changes. And what you're looking
at your deploy preview, you'll notice along
the bottom edge report a toolbar that to p and
that doesn't actually appear in the final site where you've committed
the pool request. But you've got a
number of options. He, and they look quite simple. But if you look at
the screenshot, for example, wait till it loads. You can actually use that
screenshot in a comment. You have to make sure
you're logged in to GitHub. And that's a great way of
communicating with Attainment. It streamlines the process. They put the screen
recording there as well. Let me scan button so
you can scan that with a mobile device and then
you can preview the site. In my mode was you
didn't have to go to the trouble of topping
in the long URL. But also we've got the button
on the left and you can access all of those
features in detail. So for example, right now, we'll even comment on the
pull request on GitHub. You can even create new issues, check who's on the team, e-mail them, and so forth. It's all in there.
That's the Netlify Dora. I'll lift that turn on, which was actually
turn on by default. But you can turn that
off if you don't want team members
to access that. I've just opened up
the deploy preview in a browser which isn't loved Internet
applied as a seeming light, what happens when
you've got a client viewing the deploy preview. And you just need to be where you will still have
that bar at the bottom. And that could confuse a client. If you are using
this to show clients they progress on
a draft feature. I would consider the fact
that you might turn off afar drawer because
then I get confused having this bar at the
bottom of the screen. So you can hit merge
pull requests, and then you can confound the message and also
put a comment on this have convenient
button for deleting that branch once you've
managed the pool requests, which is ultimately managing
a branch into the masterly, the main branch, you pretty much anything left to
do is isolate the branch. I'm not going to the branch
just like in the last lesson, I didn't like that brand
data because I want the branches they say,
you can say them. I think that's why better
than the French deploys. It's much more controllable. Well, they do have to go through GitHub, through the process. And like I said, you can't get the plug-in
for Visual Studio Code, although I do prefer it on
GitHub as much more graphical.
Sean Emerson, Web Developer and Static Site Specialist
