In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Jekyll or Hugo? Which Static Site Generator Best Suits Your Website?

Jekyll or Hugo? Which Static Site Generator Best Suits Your Website?

by Adrian Ababei on Oct 26 2017

“It depends...” This is the very first honest answer to your “Jekyll or Hugo?” dilemma. Since your own use case scenario is (obviously) different from all the rest:

 

  • Which feature do you value most: extensibility or page build speed?
  • Do you prefer high performance over the simplicity of use?
  • A massive community to rely on or out-of-the-box experience and simple workflow?
  • Is it a small-sized website or a content-heavy, large-scale generated site that you have in plan?
  • How frequently will you (or your team) be updating content on your site?

     

Once you've answered this “questionnaire” and you've identified your website's profile, delve into the Jekyll or Hugo 2017 comparison that our team of Toronto developers has prepared for you:

Here it goes:

 

But First: When and Why Should You Go for a Statically Generated Site?

“...instead of a dynamically generated one?” 

Remember how the web used to be, back in the old days? “Databases-less” and static! Meaning: ideally simple and blazingly fast!

Well, that's precisely what you get when opting for a static site generator:

 

  • a static website made of “pure” HTML and CSS with “a touch” of JavaScript, too, if you prefer 
  • one with no dynamically generated content on the server side, with no moving parts (which, when not closely “monitored” and kept up to date turn into some major security risks)
  • just speedy old static and secure HTML pages guaranteeing you a workflow comparably convenient to that of a dynamic site.

     

“But is a static site generator the best fit for my own website?”

Now, this is just the right type of question to be asking yourself right now. Our answer is: 

 

  • go for a statically generated site if its content gets viewed more often than edited
  • ... and you don't need dynamic content to be constantly pulled from a database
  • use a static site generator if it's a blog that you want to set up 

     

What do you gain from using it? 

 

  • boosted security
  • you're cutting off unnecessary complexities that a dynamically generated content might lead to
  • higher page load time (practically a static site generator builds a requested page beforehand, not “right after” the user has requested it)

     

When not to use Jekyll or Hugo or any other site generator:

 

  • the most relevant example is that of an e-commerce site since products get added to the customer's shopping cart dynamically; a statically generated site can't cope with this kind of requests...

     

Introducing Hugo 

The powerful “younger” rival of Jekyll with an ever-growing community of followers ”seduced” by all those features that it's been equipped with and which Jekyll lacks:

 

  • it's way faster (thanks to its Go-based templating)
  • it delivers you an “out-of-the-box experience”

     

Key limitations:

 

  • it doesn't excel when it comes to extensibility: practically it's distributed in one compiled file
  • ... and it's close to impossible for you to upgrade it with plugins or additional functionalities
  • it comes with no admin function like Jekyll does

     

Introducing Jekyll 

The most widely used static site generator! Favored for its:

 

  • extended features and collection of plugins 
  • recently added admin function 
  • massive supportive community 
  • Github support: get your site/blog up and running in no time, right after you've hosted it using the Github Pages

     

Jekyll or Hugo? 6 Criteria to Evaluate The 2 Static Website Generators

1. Installation 

We need to admit that both Hugo and Jekyll provide you with very good documentation and great quick-start guides. So, you can launch your site with just one simple command:

 

  • hugo new site <your_site>, in Hugo
  • jekyll new site <your_site>, in Jekyll 

     

Still, if we are to compare the two based on this criterion only, we need to add that Jekyll does have a slight advantage: you get a default theme and some example content to start with.

It depends on your own site's needs if you take it as an advantage or not quite (for you might not even use the default theme and content when you start up a new site anyway). 

 

2. Speed

There's no debate here: Hugo is a static site generator way faster than Jekyll!

It's built on Go (compared to Jekyll, that runs on Ruby) and that explains a lot.

So, if:

 

  • page build speed is a critical factor for you
  • your site carries a heavy ecosystem of pages, content-packed pages that need constant, frequent editing, then Hugo might just be the right choice for you

     

3. Extensibility

“Extensibility” is, no doubt, Jekyll's trump card! 

Thanks to its plugin architecture it enables you to easily add extra functionality, to extend your Jekyll-powered website's features once you've set it up.

So, the “Jekyll or Hugo?” question is primarily a “speed vs extensibility” debate.

 

4. Workflow

The provided workflow for building your website is another aspect where the 2 static website generators seem to be neck-and-neck.

Both the Jekyll server and Hugo server are configured to automatically catch up with any updates that you make to your theme, images, content or configuration while working on your website.

Also, they both enable you to add new content to your website's backbone structure just by creating new files in the right place.

Note: it's here that we can still “detect” an advantage of Hugo over Jekyll (so they're not THAT even after all); it provides you with certain functions which automatically check that your new files get created precisely in the right parts of your site's frame.

 

5. Themes

In a “Jekyll or Hugo” dilemma the theming aspect does weight a lot, doesn't it?

Well, we have 2 types of news for you: a good and a “so and so” one:

 

  1. each one of them comes with its own surprisingly diversified collection of themes, suitable for all types of websites
  2. some might argue that, as you dig through these impressive collections, identifying the one that best fits your own site, narrowing down your searches isn't really a breeze 

... since you're not provided with sufficiently detailed information on each one of them

 

6. Community

And here we have a clear winner: Jekyll!

Since it was the very first modern site generator ever built no wonder that it gathered such a large community around it!

In short: if support is crucial for you, you'll be thrilled by Jekyll's wide community of peers generating content, backing you up and being there to answer your questions. 

So, which one of them has won you over so far, now that you've defined your site's specific profile and you've scanned through these 2 major static website generators' strengths and weaknesses: Jekyll or Hugo? 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Writing HTML Code for Screen Readers: 6 Best Practices 
And developing a website with accessibility in mind means precisely that: to write your HTML code for screen readers. For those website visitors who depend on assistive technologies to fully enjoy the user experience delivered there. Therefore, the way you'll configure your HTML elements will have a sure impact on your website's overall accessibility: good or bad. In this respect, here's a checklist of the most effective (and handiest) ways to make your HTML elements fully visible and comprehensible to screen readers:   1.  Provide Alternate Text for Every Image on Your Website By far the handiest way to write HTML code for screen readers: just grow a habit of adding a succinct, yet perfectly comprehensive “Alt text” description to every new and old image on your website. Make it descriptive enough, but do look out for overly specific (and long) descriptions. Keep in mind to provide context... You'd thus prevent awkward situations where the assistive technology would just let that website visitor know that... there's an image on that page.   2. Writing HTML Code for Screen Readers: Use ARIA Attributes One of the best HTML accessibility best practices is to add ARIA (Accessible Rich Internet Applications) to your HTML elements. Why bother? Because this way you're providing visually-impaired users with more information about specific elements on a web page Take this example: the “role” attribute gives more context; it makes it easier for the screen reader (and the assisted user implicitly) to see what that element's “role” is in the context of that specific web page. Just add the “navigation” value to that “role” attribute and the screen reader can then interpret the HTML element as being a... menu. And then present the user with all the options listed there. Something intuitive for a user, but not so much for a visually-impaired one. And this is but one of the many functions for ARIA attributes that you could add to your HTML code to enhance its accessibility.   3. Declare A Page's Language in HTML You can and should do that via HTML. This way, if your website's accessed: from a different country by a visitor with different language settings … the screen reader “detecting” its default language will be quick to translate it. Note: if you have snippets of text in a language different from the default one on your website, remember to add a new language tag to each snippet. This way, you'll be signaling to screen readers that those specific parts should be translated accordingly.   4. Keep Your Links Short, but Not Too Short Try to find that ideal balance between confusingly long and ineffectively short text for your links. It's one of the “trickiest” parts of writing HTML code for screen readers: if you use too many words, since the link will get read out loud by the screen reader, it might just confuse the visitor in question if you make it too short, those users who rely on screen readers but still use their mouses to navigate websites might just... miss it   5. Use Semantic Tags: Make Your Content Readable and Understandable What do you think of when you say “semantic tags”? Tags like &lt;b&gt;, for bold text (and, therefore important information) or &lt;i&gt; for italicized text (which might indicate a quote) might be the first the come to your mind, right? But still, these are indicators for how the text should be displayed. And that's irrelevant for visually-impaired users... By comparison, 100% semantic tags, like &lt;strong&gt; and &lt;em&gt; indicate to the screen readers how that text should be interpreted. They're valuable “stage directions” on how it should be read to enhance the users' understanding.   6. Structure Your Pages so They... Make Sense to Screen Reader Users Writing HTML code for screen readers means also structuring your web pages with accessibility in mind. So, ask yourself common questions like: when a visitors tells his/her screen reader to jump to the main context section on a page, are the links there short enough not to confuse him/her and long enough not to... miss them? does that main context make sense to someone who can't interpret visual details like color scheme, layout, route of navigation? Would he/she still be able to make sense of your web page's structure? The END! Needless to add that the list of ways that you could tweak your HTML code for screen readers, for enhancing accessibility, is a... never-ending one. Start by focusing on these 6 aspects that will help you develop the right mindset for accessibility then... keep adding on more techniques. ... Read more
Silviu Serdaru / Mar 23'2019
How to Create an Angular Project with Angular CLI in 5 Simple Steps
About to build your very first Angular app? Then you must be planning to create an Angular project with Angular CLI, right? The much-acclaimed tool that the Angular team built precisely to jumpstart the whole development process. … to have a simple app scaffolded, generated and deployed in no time, by entering just a few commands (so they say, at least).  And since I'm sure that you don't want to waste these bundles of convenience by letting yourself tangled up in overly complex explanations instead, I've kept things simple with this guide. So, here's how you create and run your first Angular project via the Angular command-line interface:   1. But How Precisely Can Angular CLI Jumpstart Your App's Development Process? Take this command-line interface as a starter kit “present” that the Angular team has nicely wrapped for you:   it's practically geared at empowering you to get up and start developing a new Angular app in no time it takes just one short command to generate a default Angular project that would include all the needed dependencies (in the node_modules folder), as well as testing files for each component   Now, this is what I call a major kickstart! It's got you covered from the stage of setting everything up, to creating the Angular project itself, to testing it and finally deploying it. Other key usages of the Angular CLI that we're not going to focus on in this tutorial here are:   real-time server maintenance and support building applications for production adding new features to your existing app  running tests on your application units    2. Setting It Up: Install Angular CLI Globally Before you jump to the part where you create an Angular app using Angular CLI, you need to install the command-line interface itself. Globally! And this is the “power” command to enter in your terminal with the npm installed: npm install -g @angular/cli Notes: if you already have the CLI installed, make sure it's the latest version if you need to update it, these are the commands to enter: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli And there's more! A few more must-have dependencies that you need to make sure that are already installed and upgraded to their latest versions: Node.js: v6.9.x + npm: 3.x.x +   3. Create an Angular Project With Angular CLI With your command line interface ON, use it to enter THE one and only command that will generate a new Angular project for you. One incorporating, by default, all the needed dependencies: ng new ng-yourproject Tada! A “yourproject” named directory has just been generated. That's where your new Angular project — along with all the requested dependencies — gets stored. Eager to test it out? Just run the following command in your terminal: ng serve   Your Angular app will then get built and served up to localhost:4200. Feel free to open this URL in your browser and it's the here-below screen that you should be able to see: Basically, it's the default application shell itself rendered by the CLI.   4. “Deconstructing” Your New Angular Project: What Does It Include? Now, before you go ahead and do your “tweaking” on your newly created app, let's see what you've got in there! What are the elements that the CLI has generated for you to help you jump to development right out of the box? For this quick “scan”, open your Angular project in your IDE of choice and start “exploring” your src/folder:   src/*    styles.css any styles that you'll plan to apply globally, it's this file that you can add them to; and it's here, as well, that you can import new .css files (Bootstrap or any other styling frameworks of your choice)   index.html  where your Angular app gets started   src/app/*    app.component.ts this is where your app's one and only (for now at least) component gets stored   app.module.ts  the modules Angular needs for managing your app's components note: @NgModule marks the class file as a module and this is what makes it similar to @Component   5. Create a New Component  Remember your “one and only component” that I mentioned during the previous “inventory” of all the “bunch of stuff” that CLI has generated in your project? Well, how about creating a new one now? One that would load under that root component? Just run the following command to generate it: ng generate component the-quote Next, time to “show it off” in your browser: &lt;h3&gt;{{myQuote.quote}}&lt;/h3&gt; &lt;small&gt;- {{myQuote.by}}&lt;/small&gt; Add the app-the-quote selector to the root component that the CLI generated in your Angular project: &lt;h1&gt; {{title}} &lt;/h1&gt; &lt;app-the-quote&gt;&lt;/app-the-quote&gt; 6. Apply External Styling  Now you do agree that when you create an Angular project with Angular CLI applying styling is a key step. So, let's add your favorite CSS framework to your new application! Me, it's Bulma that I'll be using in this tutorial here: npm install bulma --save With our CSS framework installed, we'll need to enable it to load the CSS file into our Angular app. For this, just place the relative path within the .angular-cli.json file., to the file in the styles array more precisely. ... "styles": [ "../node_modules/bulma/css/bulma.css", "styles.css" ], ...   “Tempted” to display some icons now, as well? Then go ahead and add the font-awesome library as cdn link. For this, just include the stylesheet right into your index.html: &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt; Et voila! This is how you create an Angular project with Angular CLI! What do you think? Is the Angular command-line interface an extremely useful tool to jumpstart your project with or did you expected your “starter kit” to include, right out-of-the-box, more elements to get you started? ... Read more
RADU SIMILEANU / May 25'2018
How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project 
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely? How do you properly integrate it into your Angular 4 CLI project? Great news: you have not just one, but 3 options at hand for adding it! Let me get into details:   On Using Bootstrap in Your Front-End Development Process Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific. After all, it's the most popular framework for styling websites built in HTML, CSS and modern web &amp; mobile JavaScript frameworks (like Angular here): It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”. And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:   Step 1: Create a New Angular Project Using Angular CLI  The very first step to take is obviously setting up a brand new project. Use the Angular Command Line Interface to generate it. But first, install it to on your system: $ npm install -g @angular/cli It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.  For doing this, just type the following command in your CLI: $ ng new myproject Next, feel free to change into that specific directory and to turn on the web server: $ cd myproject $ ng serve “App works!” This is the message that you should be seeing in your browser right now.   Step 2: Install Bootstrap to Your Project Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well. And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.   Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It Option 1: Install Bootstrap from CDN And there are 2 particular files that you'll need to install from CDN into your project:   the Bootstrap CCS file the Bootstrap JavaScript file    Note: keep in mind to add the jQuery JavaScript library file, as well! Next, open the src/index.html file and insert the following:   the &lt;link&gt; element to add the Bootstrap CSS file at the end of the head section a &lt;script&gt; element for adding jQuery at the bottom of the body section a &lt;script&gt; element for inserting the Bootstrap JS file at the bottom of the body section   Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:   open the src/app/app.component.html enter the following code there:   &lt;div class="container"&gt; &lt;div class="jumbotron"&gt; &lt;h1&gt;Welcome&lt;/h1&gt; &lt;h2&gt;Angular &amp; Bootstrap Demo&lt;/h2&gt; &lt;/div&gt; &lt;div class="panel panel-primary"&gt; &lt;div class="panel-heading"&gt;Status&lt;/div&gt; &lt;div class="panel-body"&gt; &lt;h3&gt;{{title}}&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; And it's the following message that this HTML template code should trigger in your browser: “app works!” Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser. Just copy the file's URL and use it to replace the string assigned to the href attribute of the &lt;link&gt; element, in the index.html file. And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!   Option 2: Install Bootstrap using NPM And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma! Simply enter: $ npm install bootstrap@3 jquery –save It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory. Moreover, it will include these 2 dependencies in the package.json file, as well. Once properly installed, you can find both packages at:   node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js   Note! You have 2 options for integrating those files into your Angular 4 project:   add the file paths to the script array and to the file path of the angular-cli.json file add the corresponding &lt;script&gt; and &lt;link&gt; elements to your index.html file   Option 3: Add NG-Bootstrap to Your Project The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based. Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.  For this, just enter the following command in your Angular 4 project directory: npm install --save @ng-bootstrap/ng-bootstrap Next, make sure you also install Bootstrap 4 to your project: $ npm install bootstrap@4.0.0-alpha.6 And, the final step is to add the following files:   jquery.min.js bootstrap.min.js bootstrap.min.css   … to your .angular-cli.json file Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package. To do this, just type the following import statement into app.module.ts: import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.  And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule: either in your project's child modules  or in your the root module itself … in this article here on Using Bootstrap with Angular.   Using The NG-Bootstrap Components: Which Are They?  With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components. To leverage them in your app.component.html. Speaking of which, here are the components at hand:   Accordion Alert Rating Tabs Carousel Progressbar Collapse Datepicker Buttons Pagination Typeahead Popover Timepicker Dropdown Modal Tooltip   The END! Does this answer your “How to Use Bootstrap with Angular 4” question?  Which method of adding this front-end framework to your project is more suitable for you? ... Read more
Silviu Serdaru / Apr 30'2018