In partnership with Reboot, this is a complete workshop for building sites with Hugo. We’ll cover why build static sites instead of traditional CMS-driven websites along with the concept of JAMStack, and what's so special about Hugo; We'll start with reviewing themes, content structure, basic templating, deployment and hosting.
Latest Showcase Sites
Popular ToolsArticle Count on upper-right corner
- Automating Static Website Deployment, Part 1by AlphaGeek TutorialJun 28, 17
Now that I have 8 static websites deployed into AWS using S3 and CloudFront I need to automate the deployment process so that I can make changes quickly and get them to production with less effort. To that end I have developed some scripts and configurations that automate the deployment of this site to a QA environment and production when changes are pushed to either branch.
- Discovering Hexo: E-Commerce with Node.js Blog Frameworkby Snipcart TutorialJun 26, 17
Hexo being primarily a blog framework we’ll show you how you can integrate a Snipcart housed buy-button into your blog platform. You’ll never know when you’ll want to give the option to your reader to buy a product you’re writing about, so why not offer it directly on your page?
- Embed your typeform on Hugo sitesby Typeform TutorialJun 25, 17
Adding a typeform to your Hugo site is as easy as you would expect with a static site.
- Switching to Hugo from Nikolaby Sadanand Singh ArticleJun 24, 17
Hugo is a light weight, fast and modern static website engine written in go. It literally takes just milliseconds to build your entire site. For the given lightness, it is highly flexible as well.
- Hugo and Madoko in a Custom Docker Image for GitLab CI/CDby Bryan Klein TutorialJun 21, 17
Tips for how to setup Hugo and Madoko inside of an Alpine Linux-based Docker image for Gitlab CI/CD
- Building a JAMstack site with Hugo and Azure Functionsby Henrik Lau Eriksson TutorialJun 13, 17
- Deploying Hugo on Bluemixby Ryan Tiffany, dev.to TutorialJun 08, 17
In today’s post we will be showing how to deploy a Hugo site to Bluemix using the Cloud Foundry command line and build tools.
- Migrating from Jekyll+Github Pages to Hugo+Netlifyby Sara Soueidan TutorialJun 07, 17
During the last 18 months, working on my Web site became a daunting task—be that for developing, redesigning it, writing a blog post, or making updates to my speaking and workshop pages. My then static site generator, Jekyll, is why. And a change has long been overdue…
- Netlify CMS 3rd party OAuthby Václav Klecanda TutorialJun 02, 17
I wanted to allow users to authenticate with their github accounts, but Netlify did’t have support for 3rd party OAuth providers (learn more here). It allows you to create account in their app, connect your repository with the web and let them to serve it via their fast CDN network. But I didn’t need serving via other service. I just needed to let users edit the webs with knowing nothing about GIT. That is why I wrote netlify-cms-github-oauth-provider.
- HBuild, Test, And Deploy Statically Generated Websites With Hugoby Ricardo Feliciano, CircleCI TutorialMay 31, 17
Building a Hugo website on CircleCI 2.0 is fast and simple, so let’s start here. We’ll walk through snippets of an example .circleci/config.yml with the whole file at the end of this post.
- Delaying Disqus comments to save (a ton of) requestsby Igor Kulman TutorialMay 30, 17
- Adding a JSON Feed to an Octopress/Jekyll generated siteby Jake McCrary TutorialMay 30, 17
SON Feed is an alternative to Atom and RSS that uses JSON instead of XML. I figured I could add support for it in less than the time it would take to enjoy my coffee and maybe some readers would find it useful.
- Building a Static Documentation Site with Metalsmithby Greg Leeds TutorialMay 23, 17
At work my company’s product team has been using GitHub wiki for years for all of our use facing documentation. As they have grown from a small open source project to a much larger team with a more fully featured enterprise offering, they had outgrowing using GitHub wiki. We went out in search of a set of tools to build our own self hosted documentation web site with the following set of requirements…
- GraphCMS - GraphQL Based Headless CMSby Jeff Escalante TutorialMay 17, 17
One of the great advantages of headless CMS’ is that they are able to be consumed by a wide variety of different applications and build tools, rather than being tied specifically to a web frontend. And today we’ll be talking about using GraphCMS to create a static site - an architecture that suits many use cases much better than using a dynamic site or single page app.
- Displaying dynamic opening times in Jekyllby Michael Mckeever TutorialMay 15, 17
A problem I came across when building Trying to work was how do I display “Google-like” dynamic opening times using only liquid—Jekyll’s templating language? Well, as it turns out, quite easily.
- Displaying Medium Posts on Your Jekyll Websiteby James Hamann TutorialMay 09, 17
The solution below uses your RSS feed from Medium, parses it and stores each post as a ‘virtual document’, in a newly created Jekyll collection. From here you’re able to access the title and content of each post, which can then be displayed on whatever page you want.
- Converting WordPress Export File to Hugoby Elmar Klausmeier TutorialApr 24, 17
I have written on the Hugo static site generator here. Now I have written a migration program in the Go programming language to convert from WordPress export format to Hugo format.
- Replacing Disqus with Github Commentsby Don Williamson TutorialApr 23, 17
I’ve been considering removing comments from this blog for a while; mainly because the site doesn’t trigger much discussion and I didn’t like keeping the overhead of Disqus around. After looking into Disqus load-time behaviour I was pretty shocked what I was forcing on people loading the site
- Jekyll For Wordpress Developers – Smashing Magazineby Mike Neumegen TutorialApr 21, 17
Jekyll is gaining popularity as a lightweight alternative to WordPress. It often gets pigeonholed as a tool developers use to build their personal blog. That’s just the tip of the iceberg — it’s capable of so much more!
- Hugulp, a Hugo + Gulp toolchainby Juan B. Rodriguez TutorialApr 20, 17
Having decided on Hugo, I created a workflow that would allow me to replicate the famous Ruby on Rails Asset Pipeline. The basic premise of the Asset Pipeline is to minify, concatenate and fingerprint the assets used in your blog (images, stylesheets, scripts) so that less (and smaller in size) network requests are made by the browser.
- Switching from WordPress to Nikolaby Alan Pope TutorialApr 18, 17
For a long while my personal blog has been running WordPress. Every so often I’ve looked at other options but never really been motivated to change it, because everything worked, and it was not too much effort to manage. Then I got ‘hacked’
- Getting Hugo running on Netlifyby Richard Littauer TutorialApr 17, 17
Running Hugo on Netlify is satisfyingly great. You can get a static website running with almost no operating costs (unless you’re at major scale), and you’re also able to quickly deploy by pushing to GitHub, as well as getting SSL through LetsEncrypt automatically at the push of a button.
- Powering a Website Publishing workflow with Forestry CMS and Aerobaticby Aerobatic TutorialApr 11, 17
Fortunately a new breed of CMS tools that are emerging that bridge the gap — providing a slick interface for content editors but utilizing Git as the storage repository rather than a proprietary database. As we’ll see, this enables a universal deployment pipeline where changes from developers and changes from content contributors follow the same flow to production.
- Testing your Jekyll Website with Capybaraby Philipp Hansch TutorialApr 07, 17
I recently had problems when I was migrating this blog from Jekyll 2.5 to Jekyll 3.3. The permalinks were broken after the upgrade and I only noticed this after the change went live. Some basic tests could have easily prevented this.
- Hugo Easy Galleryby Li-Wen Yip TutorialApr 05, 17
Using Hugo’s built-in shortcodes, Hugo Easy Gallery makes Hugo image galleries easy.
- Quick Tip: How to Build Customizable HTML Widgets in Jekyllby Jon Persson, Sitepoint TutorialApr 05, 17
The static site generator Jekyll is known in web design circles for being light-weight and “hacky”. But that is only part of the truth. Jekyll is surprisingly powerful in terms of what you can do with it, and how user-friendly you can make it to non-technical users and clients.
- Creating a Category Based Pagination in Liquid for Jekyll without Gemsby Jay Aevyz L. TutorialApr 02, 17
In this post, I shall describe the Paginator I wrote purely in Liquid. This was my first main feature, thus was a little rough on the edges. It was also the feature that convinced me to ditch purely Liquid based solutions since documentation and debugging of it is atrocious.
- Install Jekyll on a Windows Machineby Dinika Saxena TutorialApr 02, 17
The seemingly simple [installation] instructions on the home page of its official website didn’t work for me since I use a Windows machine.
- Serverless Stack - Step-by-step tutorials for creating serverless React.js appsby Anomaly Innovations TutorialMar 24, 17
Serverless Stack is a comprehensive guide to creating full-stack serverless applications. Create a note taking app from scratch using React.js, AWS Lambda, API Gateway, DynamoDB, and Cognito. Follow our step-by-step tutorials and use our live chat if you have any questions.