Static site generators are growing in usage. There are a number of reasons but the main two are:
They are super fast (compared to server side scripted sites). They do not suffer from the same security issues as Server side controlled CMS sites. Why Hugo? There are many static site generators, so why HUGO? Simple, if you are searching to improve your sites performance then you should also consider the performance of the generator and HUGO is the fastest!
Adding email services for free to your netlify hosted site. add zoho dns record to netlify dns entry (not your original domain registrar) create an email address in your zoho mail dashboard add the mx records to your netlify dns control but be aware that when you write ‘@’ netlify will automatically replace it with your domain. continue to follow all of the zoho instructions and create all of the dns records it asks for.
how to add a favicon to your hugo site Create your favicon Design your favicon in your favorite art package I use Inkscape on mac and create SVG versions) Upload your image to https://realfavicongenerator.net and follow the settings. Download your favicon package and extract to the /static/ directory. The static directory sits in the root of your HUGO site. When you generate your site, the favicon will be copied into public, the root of the generated site.
Using Images and Javascript - Basically any static content. Nearly all content is enhanced when accompanied by informative or supportive images, videos or animations. There can be added easily to any page:
Where to store them You store all of your static content such as images, css, js, videos etc in the static folder.
How to use them. They can be used in the content files by:
create a folder in the static directory to contain all of that type of content e.
Categories and tag sections Having the ability to section out your site into logical areas is often essential for sites that discuss more than one thing.
add the control variables top the config.toml file:
[taxonomies] category = "categories" tag = "tags" series = "series" add in the content variables to the content pages front matter:
categories: "learn hugo" tags: "cats and tags" series: "learn hugo" showing the categories.
No theme in hugo Hugo does not have to use a theme, even though it asks you to go download one in the installation process.
Instead you can add your own design to the template files and use a static css with static images and javascript. If you like more control over your site and a little uniqueness, like I do, then this is the way to go.
I often start off learning something by working backwards.
Adding a theme to your site There are many tutorials out there about starting off with Hugo, but nearly all of them take you through installing and then ask you to select a Hugo template. Now lets be honest there are not that many of them and most of what is available are not the best designs. This is one area that really needs some work.
To ensure this tutorial covers all angles this page will discuss adding a theme to your hugo.
setting up the blog area of a hugo Site create a directory in the content directory called blog. add a section (in this case blog) index page using hugo command of hugo new blog/_index.md in this page you only need to have the front matter add new blog content pages. can use hugo command of hugo new blog/blogtitile.md add content in markdown to the new md file create a similar folder structure in the layouts directory to that in the content directory ( “/layouts/blog/” similar to “/content/blog/”) create a list.
What are partials? Partials are chunks of code that you will use multiple times throughout your site. The header or nav or even footer are the most common ones.
Rather than having to code these in every page you simply code them once. This also helps a lot if you need to change them after you have them in many pages.
How and when to use them. It makes sense to create a partial every time you think you may need to use this code in more than one place.
how to create a static page that is not the index page.
Create a flow chart of the process :)
Create new content page - /content/pagename.md ensure you add the following variables to the front matter: type: “static” (set this to anything you like but for static pages “static” just makes sense) page: “static/single.html” (this will be a link to a template file the page will be rendered using) title: “Your short page title” # Make it short as this is used in the automated nav as link text description: “A longer title if you like” # You can use this as the actual page title in the browser and page date: 2017-08-20T18:56:24+01:00 (added automatically if you use the hugo new command to create the page) draft: false (This is a switch to make post/page live or not - false = live, true = not live) Create a static directory in the layouts folder Create a template file in the static folder
Mac Installing on a mac could not be easier with brew. If you do not have brew installed you can follow the instructions at https://brew.sh/
Step 1 install hugo via brew:
brew install hugo and abracadabra thats it!
other platforms To install hugo using windows or linux head to https://gohugo.io/getting-started/installing/ to see the detailed instrauctions.
Config file This file is essential to getting your hugo site set up correctly.
A simple hugo site to capture how to learn HUGO. The content for this home page comes from /content/_index.md the page itself has a layout in the layouts folder called index.html.
the index looks like:
{{ partial "homepage-header.html" . }} {{ .Content }} <p>The /layouts/index.html can also contain content in html format!</p> {{ partial "footer.html" . }} The index.html sets out the structure of the page:
firstly it calls in the common header content which we create asa partial (/partial/homepage-header.
A simple hugo site to capture how to learn HUGO. The content for this home page comes from /content/_index.md the page itself has a layout in the layouts folder called index.html.
the index looks like:
{{ partial "homepage-header.html" . }} {{ .Content }} <p>The /layouts/index.html can also contain content in html format!</p> {{ partial "footer.html" . }} The index.html sets out the structure of the page:
firstly it calls in the common header content which we create asa partial (/partial/homepage-header.