Shorten your Summary: The 2 Methods
If you are anything like me and blog about code a lot, you will sometimes want to start with a short paragraph, then straight into some code. Like this: 1 echo "Hello World" Problem: But if you do this, then the .Summary data on your list will look like this (notice the line number and code in it): When perhaps you would like it to look like this (free of code):
Shortcode: Add Raw HTML to Your Posts
There are times that your imagination streches beyond markdown’s capabilities. When this happens it can be easiest to use HTML with your post, but Hugo doesn’t always like this. If we create a shortcode though we can switch between markdown and html easily.
Shortcode: Add a Retina Image to Posts
In this shortcode post, we show you how to conveniently insert a retina screen ready image into your page - while still writing your posts in markdown. This means you won’t have to resort to putting raw html in your posts.
Add a Last Edited Date to Posts
With frequently changing information it can be useful to record both when a post was created and when it was last updated - showing that it’s been reviewed recently. We do this on this site by showing the created date and showing the last modified date if it’s different from the created date (see above the title). There’s two ways of doing this in Hugo: recording when you last changed it using the last changed date in Git (if you use it) (or a blend of the two)
Create a New Hugo Project
You’ve got your great new idea! Now how to get started? If you’re using Hugo as the tool to build your website then this post should be for you. We’ll be looking at how to create a new basic project and the first few tasks on a clean new site. You’ll need Hugo installed first, if you don’t then take a look at our guide on installing it. 1. To Begin Using the terminal or command prompt (what ever you decide to call it!
How to Install the Latest Version of Hugo
Ubuntu 20.04 For Debian-based linux distributions, it’s often easiest to pick up the latest copy over on the Hugo github (under Releases). One reason for this is how quickly new versions come out, the versions inside package managers can become out-dated quickly. Recommended Way: View Latest Github Releases And choose to download and install either of these (we’ve replaced the version with an X) hugo_extended_0.X.0_Linux-64bit.deb hugo_0.X.0_Linux-64bit.deb Other way:
Make a Static Page in Hugo
Add Search To A Hugo Site
As with many sites these days, once they get beyond a certain size then search becomes an essential part of them. It can however we one of the trickier parts of a statically built websites because without a back-end to do the search for you then it has to be done client-side in the web browser. Luckily solutions to this problem already exist and we show off one these solutions below which uses both FuseJS and MarkJS.
Show All Tags For a Post as a List
When showing your blog post, either as a single page or within a blog post list it can be nice to show the tags associated with that post (we do here on MakeWithHugo!). This is going to be a quick post (hopefully) showing you how to add your tags as a list and each linked up. You can add this code to either your single.html layout file or inside the loop in list.
Print UK Date Format for Post Date
When making this site, we wanted to show the date (above the title) in the British format by putting the day before the month. Controversial, I know. This also means including the date ordinal/suffix after the day, e.g. th, st and nd. If you were writting this format in PHP it would look like this: 1 jS M Y With the ‘S’ standing for: English ordinal suffix for the day of the month, 2 characters