https://hugo-mini-course.netlify.app/Recent content in Home on Hugo Mini CourseHugo -- gohugo.iohttps://hugo-mini-course.netlify.app/sections/deploy/build/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/deploy/build/Congratulations on creating your new site! 🎉 You have accomplished to build something completely from scratch, now it’s time to show it to the world! Before we begin deploying our servers, we need to understand the build process. The Process The Hugo build process is simple in theory, we run a command in our terminal and instead of starting a local development server, we tell Hugo to build a production site.https://hugo-mini-course.netlify.app/sections/styling/custom/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/styling/custom/Now comes the section that is really fun. We get to make our site feel the way we want. We get to choose colors and fonts and styles to match our personality. CSS is a language made specifically for styling HTML elements to look the way we want. Properties There are over a hundred different CSS properties available, meaning the combination of styles is nearly infinite. We can create combinations of styles that have never been done before - allowing our site to be unique.https://hugo-mini-course.netlify.app/sections/templating/intro/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/intro/Before we begin getting into Hugo Templates, we will do a quick overview of HTML, which is the base language of all templates. If you already know HTML, feel free to skip to the next section. What is HTML? HTML is the language used for describing the layout of web pages. It allows us to put buttons, links, text, images and videos into a page. To start experimenting with HTML and the things covered in this overview, create a file on your desktop called index.https://hugo-mini-course.netlify.app/sections/optimizing/images/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/optimizing/images/Now that we have our site setup, we may want to add images to our posts or our layouts. The easiest way to do this is to use the static folder. Static The static folder in our project is another special Hugo feature. Hugo will allow anything in the static folder to be accessed easily inside markdown posts or in layouts, just by using a slash /. For example: place an image inside the static folder.https://hugo-mini-course.netlify.app/sections/intro/welcome/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/intro/welcome/Welcome to the Hugo Mini Course made by Jason & Lera! What are we building? In this course, we will teach you how to create your very own blog website from scratch! This course is for absolute beginners and is completely free! We will go over everything as detailed as possible. Our goal is for you to understand how to create your own blog and customize it as much as you want when you are done the course.https://hugo-mini-course.netlify.app/sections/styling/bulma/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/styling/bulma/CSS is notorious for taking a while to master but there are many different libraries out there that help you write CSS faster and with less errors. Bulma is popular CSS library that comes with pre-made classes that we can use on our HTML elements to make them look nicer. This can cut down on the amount of CSS we need to write. Adding Bulma Open the baseof.html and inside the head above our styles.https://hugo-mini-course.netlify.app/sections/intro/installation/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/intro/installation/Before we get started, let us install some tools on our computer that will help us build our site. Hugo CLI First we will install the Hugo Command Line Interface (CLI). The Hugo CLI will help us generate our project folder and provide us a development server so we can work on our site without any real servers. MacOS Head over to the Hugo releases page and find the link that starts with hugo_x.https://hugo-mini-course.netlify.app/sections/deploy/netlify/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/deploy/netlify/Netlify offers a free web service for hosting static files like we need, it also provides a nice domain name like [project-name].netlify.app for free! It is the easiest method for deployment and our preferred method for this course. Signup Head over to Netlify’s site and signup if you don’t already have an account. Upload files Once you have signed up, logged in, and followed the on-boarding steps, head over to your team page and at the bottom of the page there should be a large area that says Want to deploy a new site without connecting to Git?https://hugo-mini-course.netlify.app/sections/optimizing/seo/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/optimizing/seo/SEO is a huge topic when talking about content creation and discovery. There are many things that are taken into account when search engines are crawling websites and indexing them for their search results. We will learn about a few techniques to make sure your site is easily found by Google and others. Robots.txt robots.txt is a file that we can create with some data inside about which pages we will allow search engine crawlers to visit our site.https://hugo-mini-course.netlify.app/sections/templating/templatesyntax/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/templatesyntax/Basics Hugo templates are HTML files that have extra syntax added to them to make them more dynamic. It allows us to have HTML code generated for us based on content, instead of having to write code manually for every post. The way to access Hugo’s special features inside of an HTML file, all we need to write is {{ }} and inside those curly braces we write Hugo code.https://hugo-mini-course.netlify.app/sections/templating/baseof/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/baseof/Now we will start learning about Hugo, our static site generator. On this page we will learn about the baseof.html template. What is baseof.html? Before we explain, I would like you to create a folder called _default inside your layouts folder in your new hugo project called my-blog. Then inside, create a file called baseof.html Your project structure should now look like this: my-blog ├── archetypes | └── default.md ├── content ├── data ├── layouts | └── _default | └── baseof.https://hugo-mini-course.netlify.app/sections/optimizing/css/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/optimizing/css/CSS minification is the process of removing a lot of the whitespace and blank lines in our CSS files. Whitespace is good for humans to easily read the code, but it is unnecessary for computers and it causes the files to be a much larger size than they need to be, and larger files = slower download = bad time for users waiting. Minify Hugo provides a feature to minify custom CSS files, just like we learned about Hugo’s ability to compress images.https://hugo-mini-course.netlify.app/sections/deploy/done/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/deploy/done/Congratulations for creating and deploying your site! If you would like to show some appreciation, you can: Tweet about us Click here for a tweet template about successfully completing this course! Contact us If you have any suggestions or questions, check out our contact form.https://hugo-mini-course.netlify.app/sections/intro/setup/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/intro/setup/Now that we have our tools installed and working, we can start our project. Generate Project Open your Terminal app, (or Command Line app on Windows). Type: hugo new site my-blog and a new folder called my-blog will be generated, in your home folder, with a few files inside. Open VSCode and open that new folder there to view the contents. See below for a full Terminal example, but you can also use the Finder or Explorer to find the generated folder and open by clicking the VSCode icon.https://hugo-mini-course.netlify.app/sections/templating/homepage/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/homepage/The first real page we will create together is our homepage. If you do not have your local Hugo development server running, run the hugo serve command in your Terminal now to start your site running on http://localhost:1313. Make sure you are inside your my-blog folder when you run the command. cd my-blog hugo serve Index.html To create a homepage, create a file called index.html inside the folder layouts. Your folder structure should now look like this:https://hugo-mini-course.netlify.app/sections/intro/markdown/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/intro/markdown/Before we start developing our new fancy site. We are going to learn about Markdown. Markdown is a language used for writing content. Content can be anything, like blog posts, food recipes, books, documentation, etc…Markdown is then converted to code like HTML that can be understood by browsers, like Chrome or Firefox to display on screen. It is very simple to learn and it allows us to consistently and easily format our content, meaning all page titles and subtitles will look the same, all quotes and paragraphs will look the same, and all lists will look the same.https://hugo-mini-course.netlify.app/sections/templating/singlepage/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/singlepage/Before we start writing awesome blog posts, we need to create a layout for displaying them. Right now when we click a link on our homepage, we see a 404 error. Let’s fix that. Single.html Create a file called single.html inside the layouts/_default folder. Your project structure should look like this: my-blog ├── archetypes | └── default.md ├── content | └── posts | └── my-first-post.md ├── data ├── layouts | ├── _default | | ├── summary.https://hugo-mini-course.netlify.app/sections/templating/listpage/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/listpage/Right now we have a home page that shows our last 5 posts that we wrote - when we click the link it brings us to a full page view of that post. But what if we want to see a list of all our posts? That is where Hugo’s list template comes in. Template Create a file called list.html inside of /layouts/_default. Our folder structure should now look like this:https://hugo-mini-course.netlify.app/sections/templating/404/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/404/Hugo generates a bunch of URL’s when it builds our site. Hugo does this by analyzing our content folder and layouts folder. But sometimes users will visit our site and go to a URL that does not exist. So what do we show when this happens? Most sites show a default 404 page, 404 is the http status code used when web server cannot find something that is requested. In this case, the web server can not find a page that the browser is looking requesting.https://hugo-mini-course.netlify.app/sections/templating/partials/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/sections/templating/partials/Hugo provides a powerful feature called Partials that allow us to create small reusable templates that can used inside of larger page templates. In this lesson, we will create a navigation bar at the top of our site that will be the same for all pages, and we will use a partial for this. Navbar Create a folder named partials inside of your layouts folder. Inside of the new partials folder, create a file named navbar.https://hugo-mini-course.netlify.app/contact/Mon, 01 Jan 0001 00:00:00 +0000https://hugo-mini-course.netlify.app/contact/For any questions or inquiries, feel free to send us a message! Name * Email * Message * Send