Below you can search this site, using the very simple Google search box. This site search uses the Google cache to find its pages. So if you want to use this too, make sure you have an XML sitemap installed. This helps Google to find the latest additions to your website.| Hugo Codex
Introduction Modern websites have a search bar, searching within the site for specific content. These search boxes often search the database in real-time. That is not possible within a static website. Therefore another solution must be found. An demo can be found on the search page. How it works This search relies on a local index. It uses the Lunr.js script to search. This script does not require jQuery. First a local index is build, using the documents variable. Then the Lunr.js code is cal...| Hugo Codex
About this blog In our blog we keep you updated on stuff that is going on at this website. Do you have a great topic or do you miss something? Drop me a line through twitter @jhvanderschee. (puedes leer la versión traducida al español acá: Español.| Hugo Codex
If you like this website, but you do not have any money to spare, please share the love by posting something about this website on social media. You can use the buttons above. They will share the homepage. Thank you, you are the best!| Home on Hugo Codex
A perfect coffee in the morning absolutely makes my day. Buy me a small one for a good start or a big one to keep going all day!| Home on Hugo Codex
I like beer a lot! IPA, Guinness, Stout, craft beers… and I love to try new ones. Buy me half-a-pint to get going or a pint to get a good buzz.| Home on Hugo Codex
Buy me a fancy box of chocolates… not for me, but for my wife. Giving her chocolates will most certainly buy me extra programming time in my Linux powered man cave.| Home on Hugo Codex
If you buy this, I will sponsor BEP through Github, which will get me some very cool Hugo stickers. That enables me to decorate my laptop, my walls, my doors, my bike and my kids! I feel that I need at least 3 months of sponsoring on the 9 dollar plan, but feel free to buy me 6 months or a full year. BEP deserves it and I will keep sponsoring as long as the money keeps coming in.| Home on Hugo Codex
You can sponsor a feature from the ‘without plugins’ page/library. I will not only give you an honourable mention on the site, but I will also let you suggest some additional functionalities of this feature.| Hugo Codex
Introduction This is a simple webshop using Stripe that does not require a monthly fee. Great for a simple webshop. Check out the demo! Note that this webshop does not use a cart, or extra’s like add-ons costs for shipping. If you are looking for these functionalities, use the other implementation. How it works We leverage Stripes payment links to do most of the heavy lifting for us. We create a payment link for every product variant in Stripe. Then, in Hugo we create the product pages and ...| Hugo Codex
Introduction This script creates an image gallery. The script reads all images from a specific (user-defined) folder in the assets directory of Hugo, automagically crops them to 300px squares and shows them in rows of five. Beautiful Mountains Museum of Pop Culture Seattle View Seattle by Night Space Needle How it works The script searches for any file in the folder ‘album’ in the assets directory of Hugo. It creates an image tag with a thumbnail for these images.| Add-ons for Hugo on Hugo Codex
Introduction It can be very useful to allow people to easily share the content they have just read. Share buttons are often found on the footer of a blog post. This script automatically adds them to the content you want. How it works The script reads the .Permalink and creates a share link. The partial has some config options to adjust the colors and the icons that are shown. Installation Step 1.| Add-ons for Hugo on Hugo Codex
Extend Hugo’s functionality Hugo does not have plugins (like some other SSG’s) that can alter the way Hugo works, but luckily most functionalities do not require that. Below a list of add-on functionalities for Hugo. They are all easy to install and, most important, very easy to adjust to your needs. Let’s give WordPress users a run for their money!| Hugo Codex
If you like this website, but you do not have any money to spare, please share the love by posting something about this website on social media. You can use the buttons above. They will share the homepage. Thank you, you are the best!| Hugo Codex
A perfect coffee in the morning absolutely makes my day. Buy me a small one for a good start or a big one to keep going all day!| Hugo Codex
I like beer a lot! IPA, Guinness, Stout, craft beers… and I love to try new ones. Buy me half-a-pint to get going or a pint to get a good buzz.| Hugo Codex
Buy me a fancy box of chocolates… not for me, but for my wife. Giving her chocolates will most certainly buy me extra programming time in my Linux powered man cave.| Hugo Codex
If you buy this, I will sponsor BEP through Github, which will get me some very cool Hugo stickers. That enables me to decorate my laptop, my walls, my doors, my bike and my kids! I feel that I need at least 3 months of sponsoring on the 9 dollar plan, but feel free to buy me 6 months or a full year. BEP deserves it and I will keep sponsoring as long as the money keeps coming in.| Hugo Codex
You can sponsor a feature from the ‘without plugins’ page/library. I will not only give you an honourable mention on the site, but I will also let you suggest some additional functionalities of this feature.| Hugo Codex
There are many ways to install Hugo. The best thing about Hugo is that installing is/can be very simple. It basically all comes down to the same thing: On Windows you should download the Windows version (tar.gz), uninstall it in your project folder and run ‘hugo server’ from the command line. On a Mac you should download the MacOS version (tar.gz), uninstall it in your project folder and run ‘hugo server’ from the command line.| Hugo Codex
Now we have Hugo installed, let’s start with a very simple webpage. First you have to create two files. First you create an empty file called ‘config.yaml’. Then you create a file called ‘index.html’ with some simple HTML: This is a very simple webpage You have to store the ‘config.yaml’ file in the root of your project and the ‘index.html’ file in a directory called ’layouts’.| Hugo Codex
Now we have an ‘index.html’ file, we are going to separate the code from the content. Hugo uses Markdown for this. All content is saved in ‘.md’ (Markdown) files in a ‘content’ directory in the root of your project. Create a Markdown file, called ‘_index.md’, that looks like this: --- title: My first content file --- My first paragraph in Markdown Save the file in the ‘content’ directory. Now change your ‘/layouts/index.| Hugo Codex
A website typically consists of a few elements that get repeated on every page, like a header with a menu and a footer. Instead of adding them to every page, you can use a ‘partial’. Partials need to be saved in the ‘/layouts/partials’ directory. Create a ‘header.html’ file that looks like this: Create a ‘footer.html’ file that looks like this: Store both files in the ‘/layouts/partials’ directory.| Hugo Codex
Our website is taking shape ;-). But we are missing a nice contact page. To create it, we should create a file ‘/content/contact.md’. This file should look like this: --- title: Contact page --- Send me an email at joost@vdschee.nl We already had a layout file (index.html), but that file was only valid for the homepage. Therefore we now need another file. This file can be an exact copy of the ‘index.| Hugo Codex
Every website has a news section or a blog. That is why are going to add a ‘posts’ directory to our content folder. In this new directory we create a markdown file named ‘hello-world.md’, which is our first post. This file should look like this: --- title: Hello world date: 2016-02-01 10:00:00 --- This is my first blog post The date should be the current date. The time is optional. Additionally we are going to add a (new) layout file for our blog overview (a list view of our posts).| Hugo Codex
“Hugo Codex wants to make it easier for you to choose for Hugo in your next project.” For front-end developers Hugo Codex is created by Joost van der Schee ( @jhvanderschee or jhvanderschee@gmail.com) to make it easier for fellow front-end developers to choose for static web technology in their next project. The getting started guide even shows how to do that without touching the command-line. If you want to know more about Hugo, please visit the official Hugo documentation.| Hugo Codex
Hugo, the website framework that is super fast, because fast is simply better.| Hugo Codex
Hugo, the website framework that is super fast, because fast is simply better.| Hugo Codex
Hugo, the website framework that is super fast, because fast is simply better.| Hugo Codex
Hugo, the website framework that is super fast, because fast is simply better.| Hugo Codex
Hugo, the website framework that is super fast, because fast is simply better.| Hugo Codex
Quantity Price € 0.00 continue shopping Shopping cartCheckoutPayment| Hugo Codex
First name Last name Email address Address Zipcode City Shipping The Netherlands (+ € 0.00) European Union (+ € 7.50) Rest of the world (+ € 15.00) Country Gift wrapping Not gift wrapped (+ € 2.00) Message back to cart Payment total Shopping cart: € 0.00 Payments are 100% secure and will be handled by either Mollies Paylink service, called Plink, or Paypal.me. In the next screen you will be redirected to a secure checkout process on either useplink.| Hugo Codex
Choose your payment method You will be paying ‘Usecue’ and you will see your order number as a reference. You will have to pay €.| Hugo Codex
Leaseweb hosting This website is hosted on Leaseweb servers. Usecue CMS is used as external CMS. Leaseweb (like any hosting company) can have full insight in visitor data, like connecting IP addresses, visited pages, etc. Note that Leaseweb is not known to actively profile visitors. By using a VPN you can (try to) prevent this! Google Analytics This website uses Google Analytics. However, we have taken all actions we can to limit the power of Google.| Hugo Codex
Simple site search Below you can search this site, using the very simple Google search box. This site search uses the Google cache to find its pages. So if you want to use this too, make sure you have an XML sitemap installed. This helps Google to find the latest additions to your website.| Hugo Codex
Hugo, the website framework that is super fast, because fast is simply better.| Hugo Codex
Introduction Lightbox is a solution that loads your image links, your Youtube links and your Vimeo links automatically in a minimalistic and responsive pseudo window/overlay. No adjustment to your links is required, just follow the installation instructions below. How it works Links that point to images, Youtube and Vimeo video’s are automagically recognized and provided with an additional class by javascript. Video’s get an additional data-id in case of a video.| Hugo Codex
Introduction Paul Irish did a nice thing. He created a lighter Youtube embed. His solution does no longer slow your website down, like normal Youtube embeds do. There is only one downside: it loads content from Youtube without consent, while Youtube is a service from a company that is known for tracking and profiling. This is not very privacy friendly. The solution is to host the poster yourself and link it to Youtube.| Hugo Codex
Introduction A lot of websites use auto-collapsing menu’s with nested pages. They are a great way to show a lot of content in a structured way, but it requires a hierarchical view of all your pages. This is a nested menu that can be added through a simple include. If you want to see this in action, you can view a demo. How it works This script reads the folders in your section and automatically creates an auto-collapsing nested menu.| Hugo Codex
Introduction Breadcrumb paths are a single line of links (often placed above the title) that show a page’s location in the site hierarchy. Every website should have breadcrumbs, as it benefits SEO as well as the users understanding of the sites structure. How it works This code looks at the Ancestors variable to create the breadcrumb path. This approach has a small footprint. Additionally, this code does not require the breadcrumbs to be explicitly defined in the front matter / YAML.| Hugo Codex
Introduction To be compliant with the GDPR, you have to have user consent for all non-functional and third party cookies and scripts. This can be done by adding this ‘cookie consent banner’ to the footer of the website. This banner gives you a detailed overview and fine grained control over the scripts that are loaded. How it works The code inserts a consent banner at the bottom of the screen. When you click ‘Deny’, ‘Allow’, ‘Allow all’ or ‘Save preferences’ it creates a c...| Hugo Codex
Introduction Forms are the most important parts of a websites. They range from simple contact forms to forms that handle complete webshop orders or event sign-ups. WordPress has extremely popular form solutions, like ‘Contact Form 7’ and ‘Gravity Forms’, but Hugo does not. To fill this void I created a basic form builder for Hugo. How it works The form uses HTML5. The form can be submitted by CloudCannon or Netlify.| Hugo Codex
Introduction Live Chat is one of the most important features a website can offer. This live chat solution should be free or freemium and it should be very simple for visitors to engage in real time. Also, it should be easy to operate, manage and customize and it should have an mobile app for the operator. I have found these things in Crisp, thanks to some extensive research by Appernetic.| Hugo Codex
Introduction According to many site owners, external links and PDF’s should open in a new window. Markdown makes it relatively hard to specify this. This script automates this for you, so you do not have to worry about this. How it works This script detects external links and PDF’s. It automagically adds ’target="_blank"’ to these links. This is done by the following code. [expand] {{ $link := .Destination }} {{ $isRemote := (or (strings.| Hugo Codex
Introduction The reading time indicator is a simple script which helps to create a reading indicator displaying the estimated reading time for the content. The script takses advantage of the reading time page variable, already present in Hugo. How it works To display the reading time of an article, the code below is used. Reading time: {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }} Installation Step 1. Download the file reading-time.| Hugo Codex
Introduction Modern websites have a search bar, searching within the site for specific content. These search boxes often search the database in real-time. That is not possible within a static website. Therefore another solution must be found. How it works This search relies on the index from Google. It queries the Google Search engine directly. Results will be shown within the Google interface (on a new page), but will be limited to the site you specified.| Hugo Codex
Introduction A lot of websites have a slider (or carousel). Most of them in the header. The big question is: Should I add a carousel to my Hugo website? If you decide you should… this page shows you how to use a decent one. The carousel is based on a carousel with CSS scroll snap. This carousel weighs only 3kb (uncompressed). On desktop you can interact with the arrows and the bullets, on mobile you can swipe.| Hugo Codex
Introduction Sometimes when you want to create a ‘read more’ link, it is overkill to create a whole new page. In that case a text expand functionality, using javascript is very useful. On this website it is used for clarity and brevity. How it works The script looks for an [expand] tag on a single line and then looks for the [/expand] tag (again on a single line, thus being the only content of its paragraph).| Hugo Codex
Introduction Paul Irish did a nice thing. He created a lighter Youtube embed. His solution does no longer slow your website down, like normal Youtube embeds do. There is only one downside: it loads content from Youtube without consent, while Youtube is a service from a company that is known for tracking and profiling. This is not very privacy friendly. The solution is to host the poster yourself and link it to Youtube.| Hugo Codex
Introduction This is a simple webshop with serveral payment methods that does not require a monthly fee. Great for a simple webshop. The webshop currently does not allow for variable tax calculations. It also does not provide an alternative shipping address, although that can be added easily. An email parser would allow you to automate the buying processes even further. How it works We do not have a database, so we have to create our cart in localStorage.| Hugo Codex