Transcripts
1. Introduction: Hi, I'm when I'm showing, I'm a web developer and teacher. Welcome to my course
on building a blog with Hugo. This course. So people who would
like to learn about all of you guys built-in functions so they can build their own blog theme and
maintain their blog. The course project
includes creating the required HTML and
bootstrap templates with Hugo. Creating widgets for
blog navigation, handling images for blog posts, displaying blog data on list
and single-page templates. And lastly, customizing the blog templates
for your own needs. Saving the course.
2. Getting started with the Project: To get started with the project, you must have the
lightest versions of the following
software installed. Visual Studio code. Node.js, which includes NPM, get CLI, and GitHub Desktop. All of these software packages
are available on Windows, Linux, and Mac, except
for GitHub Desktop, which isn't available on Linux, although it's highly
recommended if you're using Windows or Mac. To copy the files required
to start the course and the project on the
resources page where you can
download a zip file. You can also access it
from the GitHub repository on the main branch. If you've downloaded the
files for particular lesson, go to the GitHub repository and change the branch
that required lesson. You can then download a zip file and I'll show you how
to do that in a moment. If you modify any
of my files and you wish to upload your
own work to get hub, you must select the duck, get folded to remove my
good information. So you can then link your own
work, do your own account. You'll need to run the
command to generate your own document folder before you link it
to your own account. I just want to turn
the GitHub repository. You can choose the branch
master is to get started. And then I've put every lesson under its own branch.
There isn't the option. That isn't the option
with the green button to download a zip file. And that will download
all the files for you. Once you've downloaded the files from GitHub or Skillshare, you'll need to download the
dependencies and then these software packages that are
required for the course. You can do this with the
command npm install. Once you've opened up the
folder in Visual Studio Code, I've got a new terminal and
then type in npm install. This will install all of the software packages
required for the course. If you go into the
node modules folder, you'll see all the
software packages in here. And the way it works is we have a file called package.json. You see we've got a
bunch of scripts which run from down here and I'll
show you those in a minute. But the actual packages installed from the
dependency section. And I've set all these up for you already and I've
been through them in all my previous courses and I've left links to them in
the resources section. If you'd like to learn more
about all of these packages, what we're really
concerned about he is in other dependencies. You can control the
version of Hugo that gets installed and S
here gets updated. You can update the
version number. Then if you run
npm install again, it'll install a newer
version of Hugo for you. Back to the scripts will just
enlarge this section here. The NPM scripts pain is included by default in the newer versions of
Visual Studio Code. You'll be using the
JavaScript a lot. What that does is it runs a live reloading server for you. Dave preview is for
loading pages which are have a published state for the future or set to draft. Building places all
of the files for the site in the
public folder and doesn't actually
run a dev server. You can upload those
files with FTP. Disk is just like div, except it also puts the files in public while they're actually
little library load server. So you can actually inspect
the files at the same time. I wanted to just preview
operates exactly the same as Dave preview and written
to disk reduction, where it's exactly like building has a live reload server. I've included MPM checks. You can update NPM dependencies
easily graphically. And Hugo version shows
you the version of Hugo which is installed by npm. Install you don't
actually run that. That's run by default
when you run npm install. After all of the dependencies
have been installed, posts and store will
install who go for you.
3. Responsive Blog Layout: So if you look inside
the Layouts folder, you'll notice there's
no index.html and you're probably wondering
why is that missing. The reason why is if
you don't provide an index.html in the
Layouts folder, then the list.html in the defaults folder will
be used in its place. The reason we're doing that, and that's because
for our list of all the different blog posts, there is no point defining
that template twice. We could define it
in the index.html. We could also define
it in list.html, and that would
involve doubling up. So what we're gonna do
is we're going to add an extra card to the list.html later on so that it displays
correctly on the homepage. Let's run the dev script
down bottom in him scripts. And then we'll have a
look in the browser. You can actually
control. Click on the link that you got provides. Once the live service running. On our homepage,
we've got a list of all the pages in the website
which isn't very useful. But later on we're going
to look at hiring that in. If you go to slash posts. We're going to list
of posts coming up and we're going to
customize the code later on so that only the posts are
displayed on the homepage. For now, what we're
worried about is creating a responsive layout. So we're going to have a
pane on the right-hand side, or you can put in the
left up to you with links to different parts of the site
and different blog posts. And the reason why
I'm showing you everything from scratch so that you can customize it
the way you like it. So look up the
basal to the HTML. And you'll notice we've
got our main section, and we've got our main
content block header and our footer above and below. What we're worried
about now is setting up the main block, but also a column to its right. So what we'll do is we'll
set up a fluid container. Container fluid will do a row. And you'll see abbreviations
are coming up and that's included and enabled by default in
Visual Studio Code. Then we'll do a column. What we'll do now
is we'll try col, dash, dash nine and you can
customize these things. And in Bootstrap has
total of 12 columns. So that leaves us with
call that m d dash. Three. What that means is warmer at the medium breakpoint or higher. We're going to have nine units
or column with nine units and below at the median
breakpoint or hydro water, you could say, we're going
to have three units. If you're below medium, it's just going to collapse
and you're going to have full-width columns will then add some margin at the
bottom of those two. Dash three, I used
alt and I clicked in by those lines so I could
talk into both of them. And then we'll get
our main class. Paste our main
semantic tag in there. I'll get rid of the
margin bottom because I've already included that. For now. We'll just
put some text in here. So we'll write Lorem and then pops and texting
for us automatically. And one last thing we'll do is we'll add
some color to it. So we'll do bg secondary. And then here we'll do BD
dash info, for example. We'll save that and I'll
have a look in the browser. So adding the color to
the background has made the division between the
two columns quite apparent. Let's have a look at
what happens when we reduce the size of
the screen down. So you can see it's
collapsed into one column. But when we bring it above MD, we end up with the two columns. So we can adjust
that with our code. As you can see, you
are breakpoints MD, If you really wanted to,
you could change that to SME will be fine. You
won't have space. And something to keep
in mind is when you have got it down below MD, that you will be using
the full width of the screen for your blog menu. Last thing we'll do
is we will remove the background colors so
that we're ready to go. I'll see in the next lesson.
4. Blog List Template: Now we're looking at creating
our list template so it can display a list
of all of our posts. The first problem we've
got is right here. We're ranging over
all of the pages in the particular section 94
on the homepage that's going to run into
all of the pages. What we'll do is because we're working
on pagination as well. We'll create a variable
called a pedometer. And for now we'll just
make that an empty string. And then we'll put the
conditional if dot is hi, I'm. And then we'll put in an else. And then in what
we'll do for the else. This is the easy one. You can make paginate
equal to dot pedometer. And then we've got to
put that variable, SG&A, that the range. And what we'll do for you
where on the homepage it will be dark, paginate. Then in parenthesis where
site dot regular pages. Type will be posts and
posters in lowercase because that's something
we've defined by placing all of the content
in the post holder. Whereas type isn't
built-in Hugo variable. Then we'll have a look
at what we've got, our content. Our content. I still have the range
and we don't want to display the title
on the homepage, so we'll take that away
and we'll place it in the else will get rid of that space and then we'll check out how
homepage is looking. To count on the
homepage. We're only displaying post now,
which is great. If we go to slash posts, you'll notice the
headings come up, but we've got the
exact same list there. Then look down at our pagination
and we only want that to display if there's
enough post to actually warrant
pagination to be there. So we'll do is we'll
use a conditional if they'll assign paginated pages. And then I'll have to
what are antagonists? So if pagination isn't actually taking place because
every blog post, then we won't have
our pagination menu sharp at the bottom of the page. Let's now have a
look at the article and how we can
customize that a bit. So start by putting in a
class for the article. And we'll call it posts summary. That way you can
target with CSS. And we'll put some margin
at the bottom of it. And the dash three will then go in and we'll put a
column design in. So we'll start off with
a row and then we'll put in a col, dash, dash five. And we can always
customize this. And the leftover will be
a col dash, dash seven. And we'll put all of the current content
into the second column. And then we'll work
on how to display the post image. If it exists. We'll start off by
assigning the variable of post contexts and we'll use that for getting
the ImageResource. Make sure put a dash
there and so it doesn't generate any space
because it's just a variable. Will then look for an image
with dot params dot images. In tagging for that. Then we'll check if
index is available. So we can do if dot, dot is slice and put
the dot in afterwards. Putting an end tag,
checking if it's, if it's a slice has been provided for the
parameter images, if there's a typo
that will cause an error with your website. So we'll just check
it's actually an array. And then we'll do with index 0. Just using width to
make sure that we actually want to choose the
first item in the params, the images parameter slice. We're trying to get
the first image using width just in
case that fails. And we'll put an
end tag in there. Then here's the tricky bit. So we'll create a
variable image. There'll be dollar sign, post. Resources, get match. Then we'll pass in
the dot contexts. We're looking at the
first item in the array, and we'll use a
with that as well. I guess it fails.
Nothing will happen. So I'll put an N tagging before we put our image
and we'll look at sintering going up
in case the image isn't the full width
of the column. So we will do d dash
flux for display fix, and then we can use
justify content center. Nice. If the image is higher
than it is wide, Let's put the image tagging now. So if you'd type in IMG and it will come up and put
an image taken for you, for the source, we'll put
in some curly braces and it will be dollar sign, Image.all rail permalink with
capital R and capital P, you can close the curly braces
will then put in width, and this helps with reflow. You can put in
some curly braces, dark with a capital W. Closing curly braces
and put in height. And it will be dark
the height. Capital H. Then putting an alt and title, it will do, we can
use multiple lines. So for alt, I'll do
that in a second. Put in a title. And we can just put
in dollar sign page, post doc title, capital T because it's
a built-in variable. Then for all titles, what the actual user will see on the screen if I put
the mouse over it, alt for SHS technology. So what we'll do is we'll do print F and we'll
put in our template. The template will be you need to post and then
per cent S for a string. And the string will
be the post title. You paste it in after
your template for print f. Then we need to
put a class in class. We'll do IMG dash
flow to start with. And then we'll create
our own class. So we've got our parent
of posts summary. So in summary, then we'll use the BIM standard of winning an underscore, underscore image. The radius is double
underscore is because you're going
to run a score and the actual parent, that'd be fine to use double underscore
and double hyphens to differentiate
between the parent and the actual modifier. That's BM, will then indent everything in the multiline tag. Then I'll save that and we'll
have a look at the CSS. If you enter the Assets folder and have a look at the main.css. Now I've got a main.css
set up for you. And we've got a link to the
bottom to our custom CSS. So to start with,
dark post dash, summary will open up our curly braces and then
we use the end underscore, underscore image opening close to calibrate us what will
happen when that's compiled, it will end up being
dark post dash summary. Then below that will have dark post debt summary
underscore, underscore image. It'll put the two together
because of the enzyme. So it's much easier using
SPSS, we can nest it. So the first rule have to add. We'll try max, dash, height, say for
example, ten rim. Then we'll do object fit. And we'll do contain. Say that the image
doesn't end up being too high in case it's
higher than it is wide, which those images or we don't want it spilling too far down. These are things you can't
do with Bootstrap and that's what we're
using our own CSS. That's looking really good. If we right-click on
the image and inspect, you'll see class is
coming in there, IMG fluid and our custom class, width and a
height coming in, which is great to
minimize reflow, the browser can look at
the aspect ratio of it. We've got our alt text coming up image for posts in
the name of the post. And we've got our
title, which is just the title of the post. And you'll notice that
image has been centered. If it is narrower than the actual column itself,
It's bringing it out wider. And you'll see how the image
itself is being centered. We even got our title
and our summary. We might look at removing the underlined from that title so
it's a little bit cleaner. And I'll show you how the
pagination disappears as well. If we display more posts
on the front page. Let's just go back
to the homepage and you'll see I haven't
got our heading. We're going to add to
our hitting the a tag. We'll put in a class. And we'll make it texts, dash, decoration, dash, none. And then we'll save that. And I've opened the
Bravo That's looking much cleaner and then
we'll have a look to make sure that
pagination is working. We'll go into the
configuration file. Notice I put a comment
in there for you, control the number of
pages is spinalis pages. So we'll just change
that to 50 for now. Then we've got all
of our posts being displayed and there's no
pagination at the bottom. We'll change that back to five. And then we'll go into our
content and our posts. We're going to this one and
we'll remove the image. Looks a bit odd having the
space there when it immutable. All we're doing is we're
looking at reversing the posts images on the right, only on the desktop view, but on mobile view we still want the image to appear
above the post. Hello. We'll do that is for
our seven width column, where all the text is, we'll use a class which is
order dash, dash first. What that does for MD, it's medium or larger. It will make that
column the first one to be displayed. Let's
have a look at that. It's now it's a little
bit more natural when you've got the image we see me. You could set up your
images so that it displays a placeholder image. If you haven't got
an image provided. I think what we're doing, this is much cleaner. Probably wondering
how can you control the length of the summaries
that are displayed? Let me do that. I'll put a comment on
the summary length. It's two sentences, but
also rounded the sentences. Just say you want a slight
longer you could put in ten, for example, have
a look at that. You might notice some
are slightly longer, but it does try and
ran to sentences. So it is a little bit tricky trying to set it exactly
as you like with it. It's a bit of a plus
or minus thing. I'm just going to
change mine back. And I'll see you in
the next lesson.
5. List Template Data: Let's have a look
at adding some data to the list template. So we're trying to do is
just for the list template, we're going to add the date the articles published down at the bottom of the article
in the list template. And we're gonna get that
from the published date. We're not looking at the date of the article has been revised, although you can
customize it as you wish. List.html template summary. We will put in
some curly braces. And we use with
dot publish date. We'll put in intact. And
then we'll put in a div. And we want to force
the published date to the bottom of the summary
and also to the right. So we'll do dot S dash auto and that's for the
margin at the start. And dark empty dash order
and that's the margin above. And for that to
work on our column, we have to use the flex, display flex and afflicts column so forces everything
to display downwards. Then what we'll do
is why the date, and I will do that is we've already got the published
date as the current context. So we use dot format. Then we have to use the
Go Time format string. And the way that works, if
you want to display the day, it will be O2 and the
month will be R1, and the e will be 20106. If you want to display
your month first, you'd have to put
the R1 at the start. You have to use these
numbers. So it works. So we'll save that and have
a look in the browser. We've got our dates
being pulled in there at the bottom of each
post and they're getting forced to the bottom. If we right-click and inspect, you'll notice we've
got the force to the bottom and
force to the right. See exactly how I want it. That's a better
example. They got the margin to left
and the margin above, so it forces it to
the bottom-right. Let's have a look now at how
we can reuse the variable. So we're going to also
be looking at putting this date for money into our actual post for
you in a moment. So we'll go into
our config file. And the bottom, we'll
put in parents. And then we'll create a
new parameter date format. We can paste in that
format that we just used. Copy that, paste it in there. And then we'll do is we can
actually access it with sites dot params,
dot date format. You probably wondering
why have I used site with lowercase S and not dot
site with the capitalists. And that's because we're inside a width statement and with reassigns the context
and the easiest way to display site variables if you haven't got access
to the site corn Texas's use lowercase
S for site. Let's now look at
putting in a time tag, time and type it in. And then we'll do datetime. I'm going to display the time in a format that the browser understands like it really
clear for the browser. So what we'll do is
we'll use dot format. And the format will be
the first so 2006 dash, the month, which will be i1, and the day will be O2. And that way the browsers clear about the time that
we're talking about. So that the browser knows
how to interact with that and possibly read
it out to the user. If need be in a
particular location. Then we'll drag the time tag. Hello. We'll save that and
have a look in the browser. So right-click and
inspect. Date time. I've gotten an a format,
year, month, day. That's a format that
the browser understand. And look, it depends on the
country where your audiences. I've set mine up to
the sky and format. We've got the day first and
the month and the year. You can format however you
like with your config file. Just going there and you
can rearrange things. You can change the
dash two dash or hyphen whatever you like. Let's have a look now at putting a icon at the start of the. So what we'll do, we'll create a partial first for creating it, and we'll call it SV, g, dash, icon, HTML. The first thing we'll do is we'll create a
variable called SVG. And there'll be
resources dot n dot, little bit of context
for providing. And then we'll
display SVG content. And that's gonna be safe HTML
to heat doesn't escape it. We'll save that for every
lookup in the assets folder. I've already provided
some icons for you. So I think normal use is
the calendar to dash date. So we'll do on list. He is partial SVG dish icon. Then we'll provide to it. We scroll back up. Already knows about
the assets folder. So we're gonna be
using icons slash, bootstrap slash calendar
to Daesh, date dot Vg. And I put them in a
Bootstrap folder. So you know that if you want
to find more of these icons, you can go to Bootstrap
icons, you can Google that. And you can get as
many as you like. I'm not using an
icon font is because that would create overhead
using a few icons. If we just include the actual
icons you want inline, we haven't got the overhead
of the whole icon font. So let's save that
and have a look. So there's our calendar icon. Let's have a look at adding the estimated reading time
to the left-hand side. So it will do is a bit of
rearrangement for now. We'll grab the partial,
will paste it in. We'll check out our
Icons folder and this time we'll use the clock. So we'll change that to clock and open this up above partial
date where it should be. And we'll use with reading time, capital R, capital T in tagging. And start with war despite
their reading time with a dot. And then we'll use minute. And if greater than one, greater than one minute, then
we'll put an S on the end. We're gonna look at how
we're going to display it. So we'll put a demon and we'll make the
reading time span. For that div. We use a class of empty order
to force it down. Margin top. Or I've
also got to place the flux because all we're using the margin start
auto in a moment. So we'll turn that into a span and place it inside there,
inside of our div. And then we'll place the span tag inside
with reading time. In catering time for some
reason doesn't work. Then let's spend what? Let's fix that some
indentations from spaces to make everything a
little bit easier to read. Then we'll save it and have
a look in the browser. It was looking just
as we want it. Without Tom and left end
our date on the right. And we'll just double-check
that on a small window. They're not going to clash. Bring that down to
small. And that's fine.
6. Single Blog Post Template: To make our layout for when you're viewing a
single blog post. We've got our single layout
in our default folder, but we want to keep
that where it is because that's great for viewing pages such as the about us
page or contact us page. So what we'll do is we'll copy that single dot
HTML and we'll make a new folder in
layout called posts. And we'll paste it in there. And then we're going
to work on that. And it will only
be displayed when a single post is being viewed. The first thing we'll do is
we'll add the post image. So I'll go back into list.html. And we've got some code
here for the image. We'll copy that and
we'll head back. So we've got our title. And then we're going to put in a new row, dot dot col. Then we'll do it
again. We'll put our image in here. And then it should work fine. So we'll save that.
I'll have a quick look. Make sure you have enabled the image for this
particular post that was disabled previously
for testing purposes. So we've got our title,
we've got our image, we've got our texts, will add a bit of
padding below the image. On that row there will do PIP3. And that's looking pretty good. Now I'm ready to go in and
add some data to the post, the tags or categories of date, the date we may have
revised the post.
7. Single Template Data: To add some data to our
single post layout template. So if you ever look
under your title, we'll add some more rows. So we'll do row. And then we'll do dot col
dash md six times up by two with the asterisk and tap
that and make some space. And then we can grab
everything we've just created. And we can paste it in twice. If you go into your list, you'll notice we've
got our reading time and we've got our date. We're going to
just apply them in the reverse order this time. We're going to put in the
published date first. And that's because we're
also going to put in the option of when it
was last modified. Paste that in. We'll
get rid of the span. Just want the actual
data for now. I'll then go back. And
while we're doing that, we'll paste in the reading time. We'll get rid of
that span for now. And then things a little
bit different here. We're then going to put
in a additional last updated on texts
net relies on Get being used for your project. You gotta be using Git to
commit updates to your blog. And then you guys will
get the information out of good for when
it was last updated. So it will do is we've
got our time here. We'll cut that out and
we'll create a variable. We'll call it published
date, colon equals. And we'll paste that in. And the reason we're doing
this is because we're going to have to compare the last updated on date and
the actual published date. And if it was last updated on the same day
as the published date, we're not actually
going to display that last time EditText. Then down here we'll
display published date. Will do wheeze if this time, keep things a bit simpler. So then we're gonna have to, instead of dot format, it'll be published
date dot format. We're then going to create another variable
called Last-Modified. All in lowercase. We'll do copy that text down. And we'll use dot last mode, all in lowercase dot format. Then we can go down and
put in a conditional, if not equal published
date and last month. I'm putting in tagging. I'll put it in
some italic texts. Last updated on time tag. Then take time. And inside here we can do,
let's fix this one up. So it'd be dot state dot format. So we'll copy that
in B dot last month. And we just got to print mode. You have to keep
in mind when we're comparing published
date and last mode. Where formatting published
date and last mode with a date format which is
day, month and year. We're not taking into account
hours, minutes and seconds. And that's really important
because if we've modified the page on the same day that we've initially published it. We don't want to display it. It's last updated on the same day it's
actually been published. And that's how earning
comparing dates here. And it's really important when you're doing this comparison that your formatting
with a date, just day, month and year only. Let's have a look
in the browser. So we've got our last updated
texts working and you will have to make sure that your project has been
initialized as a Git repository. And you've made two
commits and you've also got to probably backdate your published Taylor
if you're using the data, I provided an
overview back dated, and you've got to make a change and a commit to
one of your posts. Let's push the time across and then we'll
have a look at doing the post and the tags and
categories for the post. So we'll do, we've got to
push our reading time across. So we'll put a display flex
class in and then put it in a span dot MS dash
Bordeaux for margin auto. And then we'll place in that
span that part's right. Then we'll have a
look at putting in out categories and tags. We're going to use width. And then in parenthesis, dot get terms,
capital G, capital T. And we're gonna
look at categories, these categories because
it's for a blog. If you did my search course, that would have been
companies and species, but I've just renamed
everything to categories in terms for this
particular course. We'll then got to
put in tagging. And then we've got
to put our icon. So we'll copy the partial down and have a look at
the assets and icons. And we'll use a folder
for categories, will change clock the folder. Then got to range
over the categories. So it'll be range over the dot, but we want to use
index and the elements. So we'll do index comma. And we could even use,
instead of using element, we could use category
if you want. Call it equals dot. So I'll put an end
tag in for our range. To display our category. We'll use dot title. Put in a pot, will use humanized
eight remaining dashes, and we use titled to
capitalize every word. I'm going to put a pipe between or use comma if you want
between each category. And the way we'll do that
is please if then index 0, so it's not the
first time through the range space, pipe space. And so save that. And we'll have a look in the browser obviously
to put into agony. So those are punnett express. We'll add an extra category
and we'll see what happens. So go back into our content. And in categories. To the eye, Let's add a link now around our title. We'll put an ion will do I
will link in curly braces. And then we'll do a class
of text decoration. None. Put out, closing a tag. Underneath the title. That little look. I've got out to Cadbury ascending up with the
pop in-between them. So I'll remove that
second category. I'll put a second
tagging for now. Then we'll set up tags
and have a look at that. So what we'll do is we'll
copy all that text. We've just done the code
down into the next one. We change categories to tags. And then that tag, although we're
actually not using it, we just using the dot instead. And we'll change our
folder. Two tags. If you want, you
could do dollar sign, title and I'll assign tag dot
title, tag that permalink. It doesn't really matter. Save that. And we'll have a look. We've got two tags
showing up with the pipe. Will just push it to the right. So just like before, on the column will put d flux and then we'll put a span in. So we'll do d dash, flex. Keep in mind with the span. We don't want that to push to
the right on a mobile site. So we'll do MA stash MD order. Copy that down. Make sure all that's
inside the tags. That's looking great.
I'm just going to remove that second tag. And then these steps complete. Backup will get rid
of that second tag. We'll put an alias for testing. And that's just the
way we want it.
8. Blog Post Image Shortcode: Now we're going to
create a shortcodes. We can easily call an image within the markdown of a post. So what we'll do, we'll go into our Layouts folder and we'll
create a new folder called shortcodes inside that will make our short code
and we'll call it IMG, dash, index dot HTML. The first thing we'll do
is we will check if there are page parameters for images. So we use with dollar sign
dot page with a capital P. And then we can access
params dot images. And we'll put an
antagonist for that. One. Next thing we're gonna do
is we're going to check if there is a slice. Use if reflect dot is slice and put the dot in
because we've already assigned the page parameter
of images to the dot. And we'll put our
intake and for that, we're going to set our
default index to 0. So if we don't provide
an index, by default, will be getting the first image in the image is parameter. Then what we'll do is we'll
do if dollar sign dot get 0, that means the first
parameter that is provided. And I'll show you that works
in a minute. In tagging. Then in that case, dollar sign index will be equal to dot and we'll
change that to a. We're thinking, let's type in. And you've got to remember that this will be coming
in as a text string. So then we'll have to
change that to an integer. What we can do, we can do a with index dot. So in talking about
the images slice, and we're gonna be looking
at the index variable. So by default we're
looking at 0, which is the first
image in the list. Otherwise, if a number
is being provided, when we call them
the short code, it will be looking at
the first, second, third index item in this list. I'll put an N tagging. Then we'll look at
getting the image. So we'll do with dollar
sign, dot, page, dots, resources, dots, get match capital G,
capital M for that one. Then we can just provide a dot. I will put an N tagging. And this is where all
the action happens. We'll go back into
our single post. Look cool the image Code. And we'll copy that code. We'll paste it in
and indent EIS, we're referring to
the image variables. So what we can do is we
can image column equals. We're referring
to postdoc title. In this particular instance, it will be dollar dot page
with a capital P dot title, and we'll look at customizing
that in a moment. Let's change our CSS class and then we'll have
a look at adding the short code to a post
so we can test it out. So we're going into
our first post, Amy. Now we do it is to put it into curly braces
open and close, and open and close the arrows. Then you provide the name of the shortcodes is
going to be IMG dash, index or whatever
you'd like to name it. By default, it looks
for the index is 0, or you can provide it. If you want to do a
different number, we'll leave it blank for now. And then we'll look
at adding a number. So I will get that
in the browser. Aunty Amy, and the image
is being pulled in. Let's have a look at
adding some CSS so we can center it and constrain
the size so it isn't too big. We'll do is copy in a row. Do d, flex, justify content. So top. And then we'll do a row with
the flicks, justify content. And we'll make our
column called Bash MD. Bye for now. And then
we'll pop out Imaging. Today. We'll check that. That's working so far.
Then we'll look at constraining the height
of it because currently, but the width constraint, if you have a look at it, that's a full column width
because they're below MD. That then if we
check it this way, you see it's five
out of 12 wide. Now look at constraining
the height. So go back into our assets
and then Custom CSS. I'll show you how
to do the M style. Let's have a look now
at the utility cost also will do for
example dot IMG, dash H, dash ten. And we'll copy that code in. And then we'll have a go
at say 15 for this one. So we'll do dot
IMG, dash, dash 15. And we'll change our
heart to 15. Save that. And then back heel. Get rid of that beam style. I'm going to do IMG
dash H dash 15. And we can get back
into our list. Find out image IMG h dash ten. And we can get rid
of that post summary because we're currently
not using it. Comment in there. Depreciated. So we'll check that out. So now it's being constrained
to a height of 15 rim to 40 pixels high, that is 16 pixels times 15, so 15 or aim high. And then I'll show
you how you can use SPSS to generate
these classes fully. What we'll do is, first of all, we'll define our heights. Example 5101520,
trying to do too many because it will end up polluting your CSS file with too
many classes will do. At each height, in heights. Now you've got to copy and paste basically down
your height exactly, but you can choose
what you put here. You could do each H and
heights if you want. I'm just doing each heights, height in height system
make it nice and clean. We do the brace
and we'll do dot, IMG, dash, height, H dash. Then we do a hash sign, open, close curly braces, and
we'll assign height. So it's going to pull in that five and pop it in
there for the class. So we'll then get
IMG dash H and S5, IMG delta H dash ten and so on. And each time we
iterate through, then we put in
some curly braces. And then we'll copy and
paste in CSS rules. For our height. We'll do hash. Rooms, embraces a brace and
then doodle assign height, then close the brace. And then we'll comment
out and save it. And then we'll inspect. And it's pulling it in. If you click on it, it'll
actually show you the source. But if we go into the output
score right to the bottom, you'll see there's our
generated classes, 5101520, because you got to
work out what works for you. But don't generic too many because you're
only going to fill up your CSS with extra classes. Let's have a look at the talk. A little soap will do here. Dollar sign title equals blank. And I will do if dollar
sign dot get one. If we have a second parameter. And we'll do total
equals total width. Else. Title equals dollar
sign dot py page. Title to initialize title there. In what we're doing, we're checking if
a second parameter is provided with a shortcut and I'll show you how
to set up an amendment. And that's for the actual
custom title of the image. Else, we're just going
to use the page's title. So then down here for title, we can Alt click
for both of those. It will be dollar sign
title for the title. Let's also have a
look at setting up. Figure. What we'll do. We'll do a figure. And we'll set the class to
figure out for Bootstrap. We'll put our immediate inside. Speaks up the indentation. And I'll put a class
of figure image. We have to put it
out fig caption. The class will be figure dash
captioned for Bootstrap. And the texts will
just be the title. We can set. What we do is we put in
our first parameter, which is the index number. And then we'll do our
second one and that'll be, for example, picture of me. Crocker. Save that and have a look. And we're pulling in the picture of any cramping and
notice it's much fainter and it's lined up immediately because
it's a figure caption. We do an inspect. You'll see we've got How
figure they bootstrap figure, but I figured image. And then we've got
our caption below. You'll notice it's using the
lighter color, smaller size. And assistive technologies
will be able to pick up that. That's a caption for the actual figure
caption for the image. Example, we'll put a
second image into. Amy, will grab the
name of it, filename. And then two images,
1 second 1 in. We'll put some texting and
then you've got short period. We look for the second item. And that's gonna be
photo of bender. We'll save that. And then
before we have a look at it, you might want to disable
the default image here. So we'll do a bit of that whole row that we've pulled out, that top image you might
put some padding in. But that's how I pulling in images out of the image array. And that works well with
things like Netlify, CMS. We upload images and they
are automatically placed in the images permanent
array for you. Let's add some padding. So
we'll go to our content row. We'll do P t three. Now I've got some
padding in there and you can go
through and you can add as much
customization is like. And I'll put a quick
lesson in at the end of this course on how you can
customize things further. Solid leaves the setup with the two images and
the short code there. So you've got an example
of how that works.
9. Widget: Recent Posts: Let's look at widgets. We're going into our layouts
holder and then partials. And we'll create a new
folder called widgets. And then we'll start
with index.html. And then we'll do a recent
Dash, postdoc HTML. I will call them in
the index is we'll do a range and we'll
do the site dot. Params dot widgets
will put the integrin. We're going to run any partial, and it will be, which it's slash percent. This will use print f for that. Hey, I may just provide the dot. And the contexts that
partials is where it's complicated.
With a dollar sign. The dollar sign goes back to the root of this
particular file, so you don't assign 0s before
we end up in the range. The range we've
raison de contexts. Yes, that does get
a bit complicated. We could put dot HTML in here, but it's not required. Well then go in and set
up our config file. So under params and
we'll do widgets. And easiest way
to do it is we'll start with our recent Dash. We can start with our HTML. Let's just talk about
the basics of it. We'll do a variable
called recent. And it will be a dot
or Yellow Pages. Top of capital T because it's
built-in variable is Posts. And we're looking
at, for example, first five go in and if recent because
we don't want to display the partial if there if we haven't
gotten the post there, we'll put in in tagging. And then for the bare-bones
just to get things started will range over recent. Him. We'll do an a and
it will be real. And then we'll use dot title. We'll just do a indenting
final end tagging. And then to get
things working and you have to go into base off, get rid of the Lorem
Ipsum for your side pain. And we run partial widgets slash index and parsing
the dot contexts. We've got a list there of
posts with links that work. Let's go through and
we'll put in some HTML. We'll do div dot. Widget will also do widget
dash, dash, recent. So using BM style
CSS there again. And dash, dash is
to modify the type. And that will be for the recent Dash posts
to be more correct. So we're doing a recent
post type of widget, will then look at the headings. So for example, we can do it H3, and we will do dark widget, underscore, underscore heading. Then we'll put in recent posts. Glenn put in a URL. We'll get our range. Do it. We'll fix up some
of the indenting, can pull that back if you want to save it and have a look. And then we'll do some CSS. We've got our five recent posts out there with their titles. And they're going to
listen to look at some CSS now to make this
work a little bit better, we'll go back into assets
and CSS in our custom CSS. Then do dot widget. And then we'll do
some padding bottom. I'll put one remain for now. Then for example, if
you want to change the heading, you could do. And underscore heading. We'll leave that empty. It's just an example. We've then got our
UL and we'll put in padding left 0 to
override the default margin. 0 was trying to override all of the CSS resets that Bootstrap
is including for us. Do list style is none. Then we'll do an LI
inside the list, add some padding underneath
I 0.5, rem for now. And then we'll look at the links inside out
widget instead of b, a, and we'll do text-decoration. None. So we didn't
get underlines. Then say for example,
we wanted to modify the override for the
recent posts widget. You could do dash,
dash, dash, else. We're going to leave
that empty for now, but you could override
anything inside that. And that's changed a lot. We'll have a look now at we
can put the date underneath. And then we'll look
at moving onto the next widget and you can customize this CSS
to suit your needs. Go back into our recent posts. Let's do a bit of reformatting. So this title inside of dividends to force
it onto its own line. Then we'll do a small
dot text dash muted. So meaning the text
also making it small. And then we'll do we publish date. I'm putting in tagging
before we forget. We'll move that up above our text. It should always
be published date, but just in case there
is no data at all. And then we put in
a time and we'll do datetime as W4 be dark format. We'll do 2006 dash, one, dash O to a
machine-readable format. And then we'll put the
time in and we'll go back to our list. We can grab the
format out of there. So using our config file format and you can change
it to your location. We'll save that and
I'll have a look just at the inverted commerce
there that are missing. And we'll save that
and have a look at the dates appearing below.
10. Widget: Related Posts: We're gonna do a widget
on related posts. This one's a little
bit more complex. We do have to set up some
configuration for it. We've got a default config here. We'll copy that, go
into our config file. And above the params. We'll put a little
note in there. For adipose, include new app. We'll put that to true. Let's four pages which are
newer than the current. And then here is all
of the search terms. So we're looking at categories, and then we're looking at tags, set them both at a
100 and search query. That to true. It does slow things down a bit. We'll save that and
then we'll have a look at setting up our widget. So we're going to widget,
so we'll make a new one related to post.html. What we'll do is we'll copy over eating
out about recent posts. So paste that in. And then we'll go
into config and we'll add lighted dash price. We'll say both of them. Look in the browser, check it's working. We've got our two recent
post high IOPS now we can customize it and turn
it into leaded posts. So what we'll do is
we'll go through all about duloxetine recent and will change all
occurrences to related. And we'll change our CSS. And heading to related posts. Will then get rid of
our published date. We can get rid of the
div around the title. I'm going to check how
things are going so far. So far, so good. And then we'll get rid of
the where, the top of posts. And we'll do site dot
regular pages, dot related. Then we'll add a
dot as the contexts for the related function. So save that and have a look. I'm going to one of
the posts and you'll see related posts
pop up below it. We've got five of those
pulled in as well. Let's have a look at
being able to configure the number of devices. So we'll do site dot, params dot related posts. Go back here. And we'll do related posts. Five, or the command control, the number of widgets. Then we'll set one
up for recent posts, will make that 15 as well. We'll save that. And we'll still got
five and we'll go into that by recent
posts as well. We can copy that text. Recent price. And that's working great.
11. Widget: Post Categories: Sound a widget for
post categories. So we'll create a new HTML
file called post Dash. Had to restart HTML. And they'll add that
to our config file. Save that. We'll go back into. Another widget,
will copy the code, paste it in, and you can see we've got it working and then we'll look at
customizing it now. So it will do, will
change dollar sign. Recent dollar sign categories, will change CSS,
post dash, berries. And then we'll change our
heading as well. Then. Or change categories to
site dot taxonomies, capital T dot categories. Then we'll do a range over it, will do dot by account and
the capital B, capital T. That way it puts
the categories with the highest amount
of post first. That way there's a higher
chance to get a user to click on the actual category. We'll get rid of
the published date. And we'll get rid of that
div, which is around it. Clean that up. Then what we'll do is we'll put in
page dot real permalink, page title with capitals. And if you want, you can, in brackets in parenthesis, you can put in the
actual number of pages, so you can do these dot count. Let's look at that. We've got the number of pages per category
and as you can see, they're ordered to by account.
12. Widget: Post Tags: This is kinda similar
to the previous lesson. What we'll do is we'll
create a new file. We'll call it post dash tags, thought HDL, to our config. Dash tags. Save that. And then we'll copy the code from categories into
tags and save it. You can see we've got the two
coming up on the website. Now I can do some customization, will highlight all
of our doors on categories and change
all occurrences to dole assign tags. And it'll be taxonomy dot tags. Now, we're going to change
our heading to pose tags and CSS class. This time what we'll do is we'll limit the number that
are being shown. So put in here first and
we'll use Sites, dot, params, dot posts, tags. Before we hit Save, go into our config file. We'll put in post tags, say for example ten. And we'll just change our
comment to the number of items. We'll save that. Go
back into our partial. We'll save that. And showing
up well now our customizer. And we'll put some buttons
in through each of the tags. What we'll do is for our
link will do a class equals. I'll put in btn, btn dash, primary, BTN dash m. That's for a small button
and a primary color. And then we'll do margin, end of one and a
margin bottom of two steps to multiline have to put in a
role equals button. So it's a cliche to assistive technologies what
this links for. And we'll say that now
look, button's working. We just got to remove
the list and list items. Then we'll get rid
of the two UL tags. And we'll get rid of the LI and the closing LI tag,
end tag looking great. You can then go in and
reorder them if you want. I think last thing
we'll do is we'll put in some defaults for when we're using
the first function. We'll do put some
brackets around. Now. Perimeter. Then what we can do is we
can put in a pipe default, anything sensible default
by her example tin. You can save that. And
then if you didn't have that particular
configuration item present, you won't get an error because here we pulling
through the default, then we'll go back into recent
posts and related posts. And we'll add some
defaults in there too. We're going to recent posts. And we've got our first, I'll put parenthesis around. And we'll do default and five. And then Reddit
posts. Same thing. That's really
important when using configuration items that you do set defaults to see
if I get an error. Check, everything's
still working. And it's still working.
13. Widget: Search: Last widget that I'll be showing you what we'll do
to keep it simple. We will go down into, and I've left the
link to this page in the resources section, the Bootstrap navbar,
and we'll take out their search input. So copy that text. And then we'll make a new
widget file called search.html. And we'll paste it in and we'll
make a couple of changes. First thing we'll do is for the formal role equals search. And then for the input, we'll do a name equals Q. And then what we'll do, we'll save that
and we'll go into config dot YAML and we'll
add search to be the first one. We'll save that. We've got our search
work and want us to add our CSS classes to it so we
get some padding underneath. So for our class and we'll
do widget and we get dash, dash, search and have a look. Now it's pulling
the global styling. Now. It will not function
the search widget. You'll have to look at my
course on searching with Hugo. It's quite a lot to go through very quickly and unfortunately too
large for this course. But if you go to that course, you'll learn
everything you need to implement a search
feature on your blog. So best of luck with that. What's the link below in
the resources section? So you can find my
course on how to implement a search
feature with Hugo.
14. Create New Post: So you guys are great built-in command for creating a new page, or in this case a new post. So you run the
command Hugo knew, and we have to tell it
where to place the file. So if we go to Content,
you notice there's a post folder, will
place it in there. And you'll notice
inside every one of the folders we
have an index dot MD will create an
in toasts slash. Then we use today's
date in an ISO format. So we use 2022, dash 05, dash 30. You can put whatever
you want here, but I'm just using a system
to make it easy to find the posts on these double dash. And I'll put in the
title of the post. So we'll do test dash, post, slash, index dot, md for it to enter. If we go into the octopus holiday syllabus
posts archetype, That's everything
in the post folder. And this is a template
that will be used. The total would be
quite what we want, but we can modify that. We have our date or inset up to today's date
and that'll also the published date will
also be holding to the date which is great
for displaying in posts. Draft is set to false, which means the
page will display by default, which
is what I want. But you don't want to
put draft the truth. You don't want things we've
probably straightaway, but I don't usually
have that many things. Right. Waiting around. I usually used to one posted
a time and then I publish it by uploading the
FTP or committing to get. And we'll have to set
up our categories, tags and images manually. Enter will then go to our photo, which is easy to find
because both the date and the total air to search for in terms
of the photo, He's our index dot MD, or copy and paste in imaging. If we right-click and rename, we can grab the file name. I'll paste that into
the array and tags. I'll copy it off here. So we've got human and
categories will copy. One, will do punnett express
so they can link it in. Now let's put some inverted
commas around that because it's more than one word. Then we'll put our text in some Lorem Ipsum in the
Moran, run our server. We look in the browser.
Here's our test post. And it's pulled in the
published date and the texts. We've actually haven't
got it configured to automatically display images. So if we go back into Amy Wong, That's how we're going to
get out image to display. That's ready to go. We've got our title on me.
15. Code Syntax Highlighting: It's a code
highlighting actually works out of the
box straightaway, although we can actually remove the inline styles and move
them to a style sheet, you'll probably have
a slight reduction in the size of your code. And the other reason
you want to do that is if you're using CSP
for security reasons, you're not, you've locking
inline styles for example. And therefore
you'll have to move your code highlighting
styles to a style sheet. Anyway, let's just get it into the default method,
works out of the box. So you've got to put
in three backticks. Then we'll put in our code. So I'll show you an example. There's some Hugo code in case you're running
and Hugo blog. So we'll go into our partials and then we'll grab something
a bit more interesting. For example, here, copy that, paste it in another
three backticks in. Then we need to provide a language for the
syntax highlighting. The hiccup page for
syntax highlighting and leaves the link to this page
in the resources section. If you scroll down,
you'll notice we've got the HTML templates and you
have to copy that exact text. Paste that in. We'll save it. I'll
look in the browser. And there's our
syntax highlighting. And that's configured to work out of the box as
long as you provide. You didn't have to, but
it's recommended you provide the actual language
of trying to highlight. Let's look now at how to
remove the inline styles. Because if you
right-click and inspect, I've looked at our code, you'll notice that
we've got a whole heap of spans happening
with different styles. For each span, we can actually
use a style sheets that, for example, if you've
blocked inline styles. So the syntax highlighting, we've put a link to
configure highlighting. And what we're interested in, these are all the defaults
is the no classes. So currently it's set to
not include any classes. We want to change that also a type with I
probably said that to me, that's just a
personal preference. But I think you'll feel much
more on the page that way. So copy all of that
configuration. And then we'll go
into our config file. And above params. We'll paste it in. And then you'll see I've already got some mock-up up here, but that's for Goldmark. We're currently configuring
highlight tool, cut everything out a
whole lot and get rid of the markup and
we'll paste it in. Thanks. Sure didn't then
probably under Goldmark. Now, what we're trying to
change is the no classes. So I'll set that to false. We'll put a comment in there. False needs a style sheet. Currently got the
Style System WannaCry. It depends on what
style sheet we provide. So back on the syntax
highlighting page, we've got the
generating the CSS. So we've set the no
classes to false. What we now have to do
is generate the CSS. So here we're generating
a style of WannaCry. You can check out all
the different styles. He would the link. I'm just going to stick with WannaCry because I
personally like it. This will generate a syntax dot CSS file and we're
going to move that. So we'll copy that
text to the command. Creating new terminal. It will paste in the command. Will look for our
syntax dot CSS. We'll cut that, pop it
into our assets folder. And the SCSS. You probably have an
easier time if you rename it to SCSS. Then we have to import it. Won't look comment import,
syntax highlighting CSS. We use at Import. And
it's the same photo. So this is syntax dot SCSS actually put a
semicolon at the end. Then we'll make sure we've
got our dev server running. And it's complaining about
the fact that it's UTF 16. So going into syntax, CSS, and then we can
change our encoding, UTF-8, which is pretty much the standard
Lego into the browser. And we'll have a look. Now, you can say it's still displaying,
which is great news. Let's do a quick refresh
to make sure I didn't go and inspect anyone else. Now we've got all of our
classes setup with span. And if you look on
the right, you'll see we've got chroma as
the parent class, and then Sam is the
child and chroma dot cm will give you that color setSpeed
setup with classes. So they can be reused. If you've got a lot of syntax
highlighting and you're going to use the one-stop
shop for all of it. You could even customize
it if you need to. That'll definitely help you out. If you have disabled inline styles with
your security headers.
16. Customise Styles: Just a few different ways
we can change the styles. The first way is using
the utility classes. So if you go into, for example, we'll go into our posts
and single dot HTML. And if we're looking to
change the way the headings, despite we're going to go
into our total partial. And it's currently a H1, but I want to make it a bit smaller. I'm putting that H2 class. We'll save that. Now
right-click on the post. Let us, we've got
our H2 class there, and that's going to be
reducing the font size for us. But what's really
important is looking at variables and also Style Sheets. If you go into the
assets and SPSS, you'll see I've set up a page
called Custom Variables. And this is where it starts
to really get interesting. So we've got here
our primary color. You could use one of these built-in variables,
but let's face it. Everyone else out there
has already done that. And you don't want your
website to look like a Bootstrap website by default. So what we can do is we can change the color and
you gotta be very careful. It's gotta be
something tasteful. Otherwise it probably
wouldn't work, but you can use trial and error. So that's my primary.
We'll save that. And I can see all of the
primary colors have changed, but we can do a lot
more than that. For example, down here
we've got our pagination. There's two ways
you can go about working out which
variables to change. You can go into our
node modules folder, then Bootstrap, SCSS, and then
variables down the bottom. And you can do Control F
and look for pagination. Then it's a case of
copying and pasting that whole section down into the bottom of
your variables. The problem you can
come in to run into is when these variables refer to another variable
you haven't got. For example, we've
got a link color. We've already got
white up the top. So that shouldn't be a problem. But for example, link color probably haven't got
that in the already. So what I recommend you do is you highlight the whole
lot and comment them, and then work out which
part you actually want to use. Example. We've got here hover
background of gray 200 and hover border color. So I'm going to take those out. I want my watercolor to be the darker 500 omega background, a bit darker at 300.
So we'll save that. And now we've got
our dark background and the outline,
it darker again. The other way you can
do it is looking up the docs for the
Bootstrap pagination. Make sure you're on the
bootstrap five-page. It's extremely potent.
Pretty much at the bottom of every single docs
page on Bootstrap, we've got a variable section and you can copy and paste
directly out of there. The problem with this
is, for example, here we've got linked color and you prepared and have that
in your variables already. So what you have
to do is go back into the bootstrap variables
fall out of node modules and do a Control
F for link color. And you'll have to
go to the first one because that's where
it's first define. And you'll have to copy
and paste. That line. Will go like above. This is where it starts
to get a bit messy. And then we can have that
line on commented out. But in reality, you probably don't want to have, if
you're trying to change it, you can either change
the link color or if you want to
make it different, you can just put something
else into this line. For example, you could just put a color in there
if you wanted to, a Hicks and so on. Otherwise, you can use one
of these variables here, primary, secondary
success, so on. Or if you want to change
all of your links at once, is just go about
changing link color. You don't even need to
have that line enabled because we just care about
changing link color. You might want to
make that secondary, for example, get rid
of the default tag. Those. So you're
supposed to do it. And we'll save it. And now all of our links are
using the secondary color. And the last way is
using style sheets so I can do styles. We've got our custom CSS, and we've got
widgets, for example. And I've pretty much show
you this throughout the, throughout when
we're making them. I've used sort of
hybrid beam style here. And let's have a quick
look at our widgets. So say for example, I want to have less
padding below the heading. We'll right-click and inspect and we'll see how it's set up. And there's our hitting. This is margin bottom there, 0.5 rem under the heading. So I'm going to do
margin dash bottom. I point to REM, we'll save it. And that's just shrunken down the other side bit of
space on the page. You might want to get rid
of all of it so we can override the states
using Bootstrap three, but currently you are
overriding it with 0.2. We can actually just
put 0 in a heating 0. You don't use a unit
like Remy just put in 0. And you'll see there it's shrunken down again
and we've got rid of all the
padding altogether. There's nothing in-between
the heading and the content. And that could be useful
if you're trying to save some space on the page.
Sean Emerson, Web Developer and Static Site Specialist
