Now that you have some idea of where to put things, let’s look at how to build a page template. It can be helpful to know what kind of Page Bundle you want for each section: Leaf, which has no children, or Branch. To Hugo, _index.md and index.md mean different things. ![]() Here’s how you might organize your content/ directory in Hugo. This prevents Hugo from trying to render pages you don’t want, such as 404.html, as site content. In Hugo, all rendered content is expected in the content/ folder. You can change the location of the site source in your Jekyll configuration. Here’s how you might organize these pages in your Jekyll site root. It expects pages in the root of your site, and will build whatever’s there. Jekyll isn’t strict with its content location. You’ll need two sections (“Introduction” and “Advanced Usage”) containing their respective subsections. ![]() To create a site menu that looks like this: Introduction These features let you organize your content multiple ways, but for now, let's look at where to put some simple pages. For example, Jekyll lets you define collections, and Hugo makes use of page bundles. These directory structures aren’t set in stone, as both site generators allow some measure of customization. The layouts/partials/ directory contains the buttery reusable bits, and stylesheet files have a spot picked out in static/css/. Unlike Jekyll, Hugo uses these specific file names to distinguish between list pages (like a page with links to all your blog posts on it) and single pages (like one of your blog posts). Note that the _default page type has files for a list.html and a single.html. Hugo’s page template files are tucked into layouts/. You can scaffold a new Hugo theme by running hugo new theme. The _sass folder is for Sass files used to build your site’s stylesheet. The _layouts directory contains templates for different types of pages on your site. The _includes directory is for small bits of code that you reuse in different places, in much the same way you’d put butter on everything. The directory names are appropriately descriptive. When you run jekyll new-theme, Jekyll will scaffold a new theme for you. This method hides theme files in the gem, so for the purposes of this comparison, we aren’t using gem-based themes. Jekyll supports gem-based themes, which users can install like any other Ruby gems. To organize theme template files in a sensible way, you first need to know what directory structure the site generator expects. To create them, you’ll need template files that tell the site generator how to generate the HTML page. There are two main elements: the main content area, and the all-important sidebar menu. For Jekyll, run jekyll serve, and for Hugo, hugo serve. If you’re planning to build-along, it may be helpful to serve the theme locally as you build it – and both generators offer this functionality. Here’s a crappy wireframe of the theme I’m going to create. ![]() How to configure and deploy to GitHub Pages.Creating a menu with nested links from a data list.Creating a top-level menu with the pages object.This post isn’t a comprehensive theme-building guide, but is rather intended to familiarize you with the process of building a theme in either generator. I decided to create the same theme in both frameworks, and to give you, dear reader, a side-by-side comparison. In typical developer rationality, there was clearly only one option. ![]() Both projects needed the same basic features, but one uses Jekyll while the other uses Hugo. I recently took on the task of creating a documentation site theme for two projects. In this article, we'll compare the nuances of creating themes for the top two static site generators.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |