JavaScript building with Hugo the Static Site Generator | Sean Emerson | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript building with Hugo the Static Site Generator

teacher avatar Sean Emerson, Web Developer and Static Site Specialist

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      1

      1:48

    • 2.

      Getting Started

      0:52

    • 3.

      NPM Setup

      5:24

    • 4.

      Basic JavaScript Build

      3:25

    • 5.

      Import JavaScript Modules

      2:32

    • 6.

      Development and Production Config

      5:51

    • 7.

      Fingerprinting

      3:10

    • 8.

      Treeshaking

      3:15

    • 9.

      Set Output Target

      3:42

    • 10.

      10

      3:23

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

54

Students

--

Projects

About This Class

This class is designed for people who don't have any knowledge of JavaScript building, or know about JS building, and would like to learn how to do it natively with Hugo. 

I step you through the process of setting up JavaScript building with hugo, using its build in JavaScript builder - esbuild.

Ideally you would have some experience with Hugo, why not check out my Introduction to Hugo Course?

Meet Your Teacher

Teacher Profile Image

Sean Emerson

Web Developer and Static Site Specialist

Teacher
Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1: Hi, my name is Sean and welcome to my JavaScript building for Hugo course. You've got has powerful built-in JavaScript building features so that you're building requirements are streamlined and you don't have to use external programs like parcel rollup or Webpack. Maybe begin as he may be wondering, what is JavaScript building and bundling and why would I want to do it? This involves getting multiple JavaScript modules or libraries and you combine them into one file. You can actually only include the components of the modules that you need. And we call this tree shaking. You can transfer the output of the code to work with older browsers. And you can also minify the code that you output and that is compressing it to make it smaller so you get a faster page learning. How does Hugo bundle you go uses ESP, which is a fast JavaScript bundle, and it's written in Go. It has a great API interface with Hugo. Your code will automatically refreshing the browser on Save. Since ES building integrated with you guys library load development server, you can optionally use Babel with AS build to transpire and include poly fills for older browsers. What does this course cover? We'll look at JavaScript bundling and building in general, using npm to download libraries such as Bootstrap, module or library imports, fingerprinting the output source maps for development so you can work out where the errors have come from. Magnification for reduction. So your code loads faster. Targeting browsers for the output to older browsers are compatible with the code tree shaking. Only the parts of the library that you're using are actually included. And creating a partial so you can reuse your code and not have to copy and paste. Join me on this course and you'll never use an external JavaScript building tool with Hugo again, seeming the course. 2. Getting Started: Get started. First thing you have to do is download the files in the results section, you'll only have one file to get started, and that's the zip file which is called star dot zip. You'll have to extract the files and then you can open the folder in Visual Studio code. Before I show you that you must have the latest version of the following software, you need Hugo Visual Studio code, node.js, which includes NPM and on Windows and also includes chocolate from Solon ego. And optionally, the recommended is CLI and GitHub Desktop. Once you've extracted the folder, if you've set up VS code like I recommended in my getting started with Hugo course. That's just the first video of the course. And I'll lift that LinkedIn in the results section below. You can right-click and open with code. Then from there, everything's ready to go in Visual Studio. In the next lesson, I'll show you how to get started with all these files. 3. NPM Setup: The first thing you have to do before we get into JavaScript building is setup our NPM environment. We're going to initialize the project within him in it. We then going to install the bootstrap file package with npm install Bootstrap. And then we're going to create some basic indium scripts for the development server and the build command. I've opened up the Getting Started dot zip the extracted folder, and I've opened that in Australia code as per the last video, you need to go into the terminal menu and then new terminal and type npm init. Now it's going to ask you quite a few questions. And these questions are targeted towards people who are trying to publish there project on the NPM registry. We're not going to be doing that too. Not all these questions are actually that important. The first question is the package name and that gets pulled from the name of the folder that the project sitting. Default is usually fine unless your folder name isn't quite correct. Just hit enter to accept the default. If you happy with that version, isn't that important unless you're focusing on versioning and I'm not gonna go through versioning in this video. That's for another video. Description doesn't really matter. Again, that's for the NPM. Registry. Entry point doesn't really matter. Test command doesn't matter for us. And I do like to make sure they get repository IES correct because it's a good record of where they get repository is easiest as an easy record defined in case you needed. He was that matter. Author doesn't matter, and losses doesn't really matter, not publishing. You then got to hit Enter to confirm that everything's okay. Then you'll see a package.json file. If you open that up, it'll reflect everything that we just didn't put it except for the addition of a test script, which actually doesn't do any testing. Let's go ahead and install Bootstrap and then we'll head back into these package.json file. So close that off and get back to the terminal and typing npm, install Bootstrap and hit Enter. You'll see it's installed to packages. Let's kind of looking at node modules folder we should just being credit. Honestly, I have Bootstrap and pop ab.js. And pop ab.js is actually a dependency of Bootstrap. If you ever been Bootstrap and their package.json file, you'll notice set, if we scroll down, they've got a P dependency of puppet dot js. And that's another package that bootstrap actually uses for its JavaScript. It's other Bootstrap folder. You'll see. You'll see some soils falls. And we're gonna be working by importing files out of his Bootstrap folder and modifying them as necessary and then building them with Hugo. Close that package.json Dann die get confused. Minimize the node modules folder, and we'll go back into the package.json. And you'll see that we've now got a dependency at the bottom of Bootstrap. Project relies on Bootstrap. We're then going to look at our scripts, will back out all of the content of that test script will keep the inverted commas. And then we'll back out the word test. More price that with div. During the development server, we need to run he goes space server. Then we're gonna run an option which is dash, dash, disable fast, render. Make sure you put a capital F and capital R. The next option will use his dash, dash GC. And that stands for garbage collection. What that's gonna do, because we're actually producing resources with Hugo would making some JavaScript files. We want you guys to get rid of any old files when it runs, and that's what garbage collection is all about. Thanks, I'm gonna do, we're gonna run a build script. So put a comma in and then interfere new line. Put some inverted commas in and we'll write, build, and then a colon and a space and some more inverted commas. We're gonna run Hugo. But this time I'm going to run dash, dash, dash, dash. Then we'll save that. You don't put a comma after your second law and last law, and you can only put commas in-between lines, otherwise, it will generate an error. You'll then let us individuals pseudocode down the bottom that the word, words NPM script will repeat from them. We can actually run the script quite easily without using the command line. We'll start off with the dev server will hit play and we'll check that works. That's working great and you can Control click to open it up. In the survey, I said to you that you have the actual website that building working on in this course and it's using the library load server. So if you make any changes in Visual Studio Code and hit Save, Reload automatically in the browser. Now throughout this course, what we're doing if you go to right-click and inspect, or if you shrink your window down, you get into the mobile mode. You'll notice there's a little menu in the top right. If you click on that, it actually uses the Bootstrap JavaScript library to do that drop-down. That animation is controlled by JavaScript. That's a great way to check that JavaScript is actually working. We go into the head. You'll see that currently where you'll see the JavaScript for the automatic reload through Hugo. That's the first thing that comes in there. And then later on you'll see a link to the JavaScript library. Down in the footer. That's a CDN, that's an online server that's setting up the JavaScript to the browser that Bootstrap requires. 4. Basic JavaScript Build: Now let's look at doing a basic JavaScript build using Hugo. Although we're not going to get heavy into the configuration yet, what we're gonna do is we're going to use a generic configuration to build Bootstrap's JavaScript library from its node module source which were previously downloaded. By doing this, we don't have to rely on the CDN, which is quite for offline development. And later on we're going to actually want to customize the build as we have access to the source. So we're going to actually not include the whole library. We're only going to include the parts we're using to minimize, minimize false eyes. We can also customize which browsers the JavaScript build is his arm to work with. Because as default, the source will only work with the most modern browsers. We're going to use some translation to get that modern code made a little bit older so that other browsers will actually work with it. I'll leave links to these two pages that we're going to look at in the resources section under this lesson, the first link is to ear spilled. We're not going to go much into this page at all because it does get quite complicated quite quickly. The great reference to have because of the Hugo doc isn't that complex or in-depth? There's a good little graphic of the star and it shows you a good comparison as to how quick ASPE would actually use. Another advantage to AS build is that it's written in Go and it has a great API and it works really fast with Hugo because he goes root and we go as well. We're really concerned with however easily Hugo docs page for JavaScript building. And as I said that links also in the resources section, There's a bunch of options that we can provide at the moment, we're not so worried about the options. If you just go right to the bottom, you'll see an example. Where can I heart that example and copy it? And then we'll paste it into the project. It's actually quite simple. You can even hand write it in. In the project. You can close the package.json file hitting two layouts and then partials. And we'll go into script footer. And we're gonna keep that first-line for the footage JavaScript file, but we're going to highlight everything else and do Control Casey to comment it out. And we'll save that. And then we'll go into the head. Then after your CSS, we'll make a new line. We'll do bootstrap In this. Highlight that and then we'll comment it with Control K. See, what they have to do is paste in that code. At the moment, we're not sorry, I had the option so we can get rid of those top two lines. And then after JS doc build will get rid of the ops we're going to edit in later, but for now we'll get rid of it. We'll save that before that's going to work and you'll see an area that's come up. It's asking for a file in script slash main.js. We're going to change that to js slash main.js. Probably wondering where does that go? If you click in the root of the project and make a new folder or making a new folder called assets. Inside that, we're going to place any file that we want Hugo to modify or build width. So we're gonna make a folder called js. And all of these links are relative to the Assets folder inside that JS folder will make a file called main.js. Will save Adam will re-save the head. Then we'll kill the server and we'll run developments over again and we shouldn't get an error. And everything's great. When I'm ready for the next lesson where we important Bootstrap. 5. Import JavaScript Modules: It's never going to import a JavaScript module to be able to bring the Bootstrap JavaScript library into our JS builder and output a file. We need to use an import statement with JavaScript. Importing will pull the library or the module. They're actually all modules, but we're working with the library into the file where the import statement called. If you need to import another library, they'll provide instructions on how to do the import. Back in the project. We'll go into the main.js file and we're gonna use an import statement. And to do that you write import, going to import style, which is everything as bootstrap from. And then we'll use the signal embedded comments. And we'll import from bootstrap. And that will direct the JavaScript builder to our node modules folder. What did they end? Does it goes into the Bootstrap folder up, as we've specified up here. And it will look into the package.json. And because ES6, because ESBL is actually an ES6 buildup, It will then look down for the keyword of module. And then from there, module specify which file to import. You'll say, Hey, we have a module directive and that's decent slash js slash bootstrap.css, ab.js. So we're looking there, decreased slash, slash, bootstrap dot ESM, not JS. That's the actual file. It's gonna be important mobile. Look more into that in a moment. I will say that it is actually grayed out and that's because we've declared the variable Bootstrap, but it's never been used. And that's okay because Bootstrap actually initializes on its own. Bootstrap doesn't need us to actually call that variable Bootstrap to get started, starts on its own. So don't worry about that. We run the dev server, will check everything's working. You probably have to kill the server and run it again with things aren't working for you. Once you've opened up in the browser, you click, you can make your screen smaller and click on the menu, any of that menu dropping down, everything's correct. You can check it out by going into the head and scroll down and you'll see a link to the main.js file that we've built. And if you go into sources, you'll see the JavaScript folder. And there's the main.js file. And the first thing that's very important is the puppet dot js dependency score. Out to the bottom, you'll see the copyright notice for Bootstrap JavaScript lottery. That's working well, we've imported the whole library. 6. Development and Production Config: Similar to look at creating some configuration for development and production environments, we do actually need the configuration to be slightly different depending on whether a developing and that's when we're working on a debugging the website. Or if we're trying to ship production code which needs to be as smallest possible to a server. So you need to make things a bit different. Now here's the basics, what we're going to sit in development. We want source maps to the enabled, but we don't want any magnification. We don't have to actually set the minification option because that happens by default. In production. We want source maps disabled. And that's actually bought a fault as well, but we do need to minify the code. In your project. You need to go into the Layouts folder and then open up the header.html. You'll see we've got Bootstrap JS here. After JS doc build, we need to specify the option to opt. And then we're gonna create a variable here for ops. Put in some double curly braces. And then we do a dollar sign and we do UPS. Now because we are defining this variable for the first time, we have to use a colon equals. Now to provide options to the JavaScript building, we need to use a dictionary, and it's also referred to as a map. So dict. Let's then go to the docs and we'll have a look at what the options are. If we scroll up, look down, and you'll say minify. And that can be set as true or false by default, it's on false. The next option we need to do is a source map. And if we want to enable it, we have to use inline. Let's go and set that up. For production. We're going to set minify makes you put that in inverted commas. And then next to that we're going to do true. And you don't need inverted commas for that. Now, before we move on, if you put dashes at the start and the end of all your lines of code with curly braces. That means that no new lines or spaces will be inserted into your actual HTML. That makes debugging lot easier. I'll do it here as well. Makes you put a space between the dash and the comment. Introduce face and the dash. And we'll do it here as well. But I will not put a dash at the end because I do want a new line before the script tag gets inserted. So that's our production options. Radula, comment for myself production options. And I'll highlight that and do draw Casey, what I'm gonna do our development options. That these options will be override the default developing. Let's have a look how that works. So we do make a new line. I'll put some dashes in as well before we forget. I'll do that for these comments as well. It makes debugging a lot easier if you didn't already put new lines and new code will do if EQ, and that stands for if equals. That's Hugo. Dot environment makes use a capital a. And then inverted commas development. Go environment will return the environment we're currently in. And if we're in a development environment, the word development will be returned. And that is equal to development. And then the following will happen. Will put us Bay alanine and we'll do an end tag with some dashes. Then what we'll do, we'll copy our UPS line and paste it in. But the most important thing is you must remove that column because we were redefining the variable. You have to remove the column will have an issue. We'll get rid of minify. And we'll do source map. You must use a capital M for source map. The only option available is inline. What our initial options for production. If we're developing initial step will take place. And that's okay. And it will overwrite with this law and he is a noun minification will take place for development. We do have an inline source map. We'll save that. And we'll give it a go. We'll run the dev script. Let's have a look in the server. We've still got our JavaScript working because that mobile news functioning. We go into the JS file. You'll notice now there's a node modules folder there. And you probably wondering why, what isn't node modules folder doing in my JavaScript folder for my website. If you go into main.js and swore right to the bottom, you'll see a line there and it's got the source map URL. What that's doing, if we're trying to debug the code, the brass is actually pulling in our node modules dependencies. And you can actually click on a Era and it'll actually show you where that error exists in the falls that you'll pulling into Build. You can actually go back to the soil so work out where the error occurs and that tell a source map works. But in production that's not gonna happen. So let's have a look at production now and see how it's different. Foodie production. You'll notice the codes full of spaces and new lines and invented very neatly and it's very easy to read. Let's go ahead and check out our production code. What we'll do, we'll hit the Trash button to kill the terminal, the build button. This won't run in the server, but what happens is he creates a public folder for us. And in here are all the files are ready to upload to an FTP server. We open the JavaScript file and then the main.js. You'll notice that things are completely different. We haven't gotten me spaces on new lines anymore. And all the variables have been shortened down to really short characters to try and compress the size of the file and minimize the amount of characters is being used. So that's like one long big Alon that's for the whole file. So it's much smaller than it used to be. 7. Fingerprinting: The next step is fingerprinting, will be generating a fingerprint that's a hash file based on the output of JavaScript file. For many reasons, the actual filename, we'll have the fingerprint added to the file name, which makes the fall unique. The browser won't get a newer built file confused with an old file because I both have different hashes in the actual file names. The other reason is the browser can use the fingerprint to check that the JavaScript file hasn't been replaced and that's a security check. We're actually going to provide a check number and that will be checked against the actual file. The browser can work out whether the file that's being downloaded and loaded into the browser is actually the correct fall that we've put there ourselves. So let's get started. The link to this page in the results section below, these guys through how the fingerprinting works with Hugo. Now if you ever look the way it works here, they've got the actual resource and then they're running, they're using a pipe and then they're running through resources, not fingerprint. We can actually remove the resources part and just run fingerprint. We must use a lowercase f. And the spacing specifying SHA-512 top of fingerprint. We can leave that off if we want. What we can do now is after we've done that, we can put the integrity property in. We've just got a specify the same variable as the source. But instead of doing a dot permalink or real permalink, we have to specify dot, dot, dot integrity. And that will be a hash. Let's give that a go. I go into layouts and then partials and head. You'll see we getting our resource, then we're doing a pipe and we're running it through JS build. It will then put another piping Moran fingerprint. Then the script tag after the source, we'll talk integrity. Then just likely source we're using a built-in variable. We'll type in built for this time we'll do dot data with a capital D and dot integrity. We'll close our double curly braces. Then we'll save that and we'll run the dev server. And we'll have a look. We'll just check out JavaScript's working with the dropdown, which is great. They go into js file. Learners to JS file now has a hash out to the file name. The file itself is the same. What a hash on the inside. As we update our JavaScript, a new file will be output as new hash and the browser is forced down with the new file. You won't have any caching issues. The other thing we can do is we can go to elements and then open up the head of the document and scroll down and you'll notice we've got our filename there with the hash, that attitude, and we've got our integrity in there. By default it's SHA-256 sets. The encoding is that hash will be checked against this file, not the actual filename, but the contents of it. And if the contents of that file turn out to be that hash, then we're good to go and the security checks passed. 8. Treeshaking: This lesson is all about tree shaking. Tree shaking, where we only include the required parts of the library and then they are built. To do this, you must first only import the library components that you need. Esbl, which is what Hugo uses, supports tree shaking by default. That's based on the components which are important, so it's actually quite easy to do. And the main reason we do this is it helps keep file sizes down because a lot of the file is the slower the pages to load. And if you're using a few different libraries and your page, it's gonna slow down quite quickly. So let's get into it. We're gonna do, is we're going to have a look at, first of all, open up the assets and main.js and we'll highlight that and do Control case either comment it out above it. We'll put in a comment that is import the whole bootstrap library. And we're not gonna do that anymore, but we'll leave it anyways as a reference. The next thing we'll do is import only the required parts of the library. He is how we'll do it. We're going to do import. Then those parts from bootstrap. The way we work out which parts we can actually import. We go into our no modules folder and then bootstrap. And we worked out that the file that's being used for building is the going to disk and then js, and then it's bootstrap dot ESM dot js. If you score right to the bottom of the file, you'll notice we have our export. If you highlight all of those words in there and copy them, you can paste them in here. That will actually be importing everything. But we don't want that. So what we're gonna do is we're gonna put all of these words on new lines. Then we can easily comment them out. If need be. To keep hitting Enter to get those new lines. Will get that last breakout newline. Now by default, the only thing you actually need for the site that I've got set up is collapse. We use Control Casey to comment all of these out. You don't need drop-down for a drop-down menus diving lot drop-down menu setup anyway. Then we'll control Casey that actually tooltip. Last one topic. Then we'll hit Control S to save run the dev server. And we'll have a look. We'll check our JavaScripts working. So the collapses obviously being important. Then go into the head and you can see where still importing the same file. And then we'll go into sources and JavaScript. And there's our import. It's still gonna be importing pop app.js, which is not the biggest library. But at the end running gonna be importing the part of the Bootstrap. While I read that we require, which is gonna be quite a saving of size. 9. Set Output Target: Now we just set our output target. Esp world can translate most new JavaScript syntax into older versions down to a maximum of ES 2015. Espn cannot translate down to S5 and ears 5's what Internet Explorer and many other older browsers use. But fortunately, that's generally not a requirement and it's not something that Bootstrap supports anyway, it's about a fault AS build translates language up to the newest ears version is actually called ES next, which is to modern for most browsers support a fault. He going ESP old and actually set up to work in the majority of browsers. We're gonna set up ESBL, so it translates down to ES 2015. I love this link in the there's also section. It's a really good site called Can I use? And in Kenya I use, I'll put in ES6, which is also called ECMAScript 20152015. And you'll notice that Internet Explorer doesn't support most of the S6 Edge from 20, $17 Firefox back in 2017 does Chrome from 2016. Safari from 2016, ES6 has actually got quite good support and I'll show you what Bootstrap currently support on that bootstrap GitHub page, if you scroll down and open up browsers list RC. And I'll leave a link for this in the resources section. This is what the file that Bootstrap provides to the CDN. This is what they support out of the box. They support Chrome version 60, Firefox version 60, iOS 12, Safari 12, and not Internet Explorer. Let's go and compare that to ES6. They're doing Chrome version 60. Es6 is actually down to Chrome 51. They do Firefox version 60, we're actually gonna support down to Version 54. And then they do version 12 for Safari on iOS. Version tool for Safari works, you're gonna be supporting the integration tin. So by specifying ES6 in hago were actually supporting a little bit more than what Bootstrap actually supports by default. So there isn't any harm in doing that. So back on the JavaScript building docs page, you'll see an option called target, and you'll see the default ES next. And that's not very useful because that's gonna be using some of the most modern language features which a lot of browsers aren't going to support. We're going to choose ES 2015. There is an auctioneer of ES five, but the reality is ESBL doesn't know how to translate. Most language fixes down to ES five. And if you actually say as five, you're more than likely gonna get errors. Use a target of IAS 2015 will go into the Layouts folder, and then partials, and then head. And you'll see we've got our options here. For both those will use Alt click will do target. Es 2015. We'll just run a quick check so that it looks like it's related. When I'm changing configuration like this, I'll have to kill the server and restart it just to be sure. And then we'll check that in the browser. When you start, when you erase out, so that you do have to refresh in the browser. So our JavaScript still working. We can see we're still getting up file in there. Everything is good. 10. 10: If you've made it this far, you're doing really well. This is the last thing we're gonna do in the course, and that is creating a partial. Got to move all of the JavaScript build code which we've just completed into a partial. And we're doing that so we can reuse the code for any JavaScript building tasks that we have. We didn't have to copy and paste anything. We can just reuse it. Now normally you'd assign the dot context to a partial. But in this case we're going to actually assign the path of the JavaScript file, which we're going to build to the partial. And that will instruct the partial on which fall needs to be built. Link to the docs page about partial templates case. You won't do any further reading in terms of this lesson. I'm trying to keep it as simple as possible. We'll do is we will leave our Bootstrap JS comment in there, and then below it we will write partial. Then we're going to provide a part of the partial and we will just call that partial ES build. Then normally you would put a dot in here for the contexts you provided to the partial. But in this case what we'll do is we will do js slash main.js. Copying that from down here. What we'll do is we will replace it with the dot, and then we'll grab all that code and Control X to cut it. I'm not gonna say this because I've actually got the server running that at one an era. I'm then going to go into my layouts and then partials and I'll make a new partial code, ESBL dot HTML. And I'll paste that code in. What's really important is you've got the dot there for the actual resource you're building and that will be assigned by providing the path to the fall he after the partial. I'll say that. I'll save my head and then we'll check it out. Go right-click and inspect. And then we'll go to sources. And we'll say that under JavaScript, we've got our main JavaScript file. Just to test the concept. We will now have got building the footage IS there's not much in it, but we'll build it anyway just for the sake of testing. I'll just put a copy and paste these two lines below and we'll call this footage IS you probably wouldn't normally separate them, but just for testing early dot js. And then we'll have to do is go into the static and JS and drag that into our SSH assets slash js folder. Then I'll save the head. Now we've got our footer file being built by ES building Hugo said there's not much in it. I'll probably wouldn't normally include that in the main file because it's no point splitting it out. But just to demonstrate how powerful these partials really are. If you have any other JavaScript files you'd like to build, all you have to do is copy and paste the line and change the path. And that is relative to the Assets folder because we are dealing with the results says dot get function.