28 lines
73 KiB
JSON
28 lines
73 KiB
JSON
|
[{
|
|||
|
"name": "About Hugo",
|
|||
|
"description": "Hugo is the world’s fastest framework for building websites. It is written in Go.It makes use of a variety of open source projects including: https://github.com/russross/blackfriday https://github.com/alecthomas/chroma https://github.com/muesli/smartcrop https://github.com/spf13/cobra https://github.com/spf13/viper Learn more and contribute on GitHub.",
|
|||
|
"body": "Hugo is the world’s fastest framework for building websites. It is written in Go.It makes use of a variety of open source projects including: https://github.com/russross/blackfriday https://github.com/alecthomas/chroma https://github.com/muesli/smartcrop https://github.com/spf13/cobra https://github.com/spf13/viper Learn more and contribute on GitHub.",
|
|||
|
"url": "http://localhost:1313/about/"
|
|||
|
},{
|
|||
|
"name": "Creating a New Theme",
|
|||
|
"description": "Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.We’ll start with creating a new site with a very basic template.",
|
|||
|
"body": " Introduction This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I’ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won’t cover using CSS to style your theme.We’ll start with creating a new site with a very basic template. Then we’ll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.In this tutorial, commands that you enter will start with the “$” prompt. The output will follow. Lines that start with “#” are comments that I’ve added to explain a point. When I show updates to a file, the “:wq” on the last line means to save the file.Here’s an example:## this is a comment $ echo this is a command this is a command ## edit the file $ vi foo.md +++ date = "2014-09-28" title = "creating a new theme" +++ bah and humbug :wq ## show it $ cat foo.md +++ date = "2014-09-28" title = "creating a new theme" +++ bah and humbug $ Some Definitions There are a few concepts that you need to understand before creating a theme.Skins Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors.You have two ways to create a skin. The simplest way is to create it in the layouts/ directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the layouts/ directory so it will always find the skin.Your second choice is to create it in a sub-directory of the themes/ directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it?The difference between creating a skin in layouts/ and creating it in themes/ is very subtle. A skin in layouts/ can’t be customized without updating the templates and static files that it is built from. A skin created in themes/, on the other hand, can be and that makes it easier for other people to use it.The rest of this tutorial will call a skin created in the themes/ directory a theme.Note that you can use this tutorial to create a skin in the layouts/ directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme.The Home Page The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html.Site Configuration File When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it.Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your content/ directory and template files in your themes/ directory. It will create HTML files in your public/ directory. You can change this by specifying alternate locations in the configuration file.Content Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML.Front Matter The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or
|
|||
|
"url": "http://localhost:1313/post/creating-a-new-theme/"
|
|||
|
},{
|
|||
|
"name": "Migrate to Hugo from Jekyll",
|
|||
|
"description": "Move static content to static Jekyll has a rule that any directory not starting with _ will be copied as-is to the _site output. Hugo keeps all static content under static. You should therefore move it all there. With Jekyll, something that looked like▾ <root>/ ▾ images/ logo.png should become▾ <root>/ ▾ static/ ▾ images/ logo.png Additionally, you’ll want any files that should reside at the root (such as CNAME) to be moved to static.",
|
|||
|
"body": " Move static content to static Jekyll has a rule that any directory not starting with _ will be copied as-is to the _site output. Hugo keeps all static content under static. You should therefore move it all there. With Jekyll, something that looked like▾ <root>/ ▾ images/ logo.png should become▾ <root>/ ▾ static/ ▾ images/ logo.png Additionally, you’ll want any files that should reside at the root (such as CNAME) to be moved to static.Create your Hugo configuration file Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the Hugo configuration documentation for details.Set your configuration publish folder to _site The default is for Jekyll to publish to _site and for Hugo to publish to public. If, like me, you have _site mapped to a git submodule on the gh-pages branch, you’ll want to do one of two alternatives: Change your submodule to point to map gh-pages to public instead of _site (recommended).git submodule deinit _site git rm _site git submodule add -b gh-pages git@github.com:your-username/your-repo.git public Or, change the Hugo configuration to use _site instead of public.{ .. "publishdir": "_site", .. } Convert Jekyll templates to Hugo templates That’s the bulk of the work right here. The documentation is your friend. You should refer to Jekyll’s template documentation if you need to refresh your memory on how you built your blog and Hugo’s template to learn Hugo’s way.As a single reference data point, converting my templates for heyitsalex.net took me no more than a few hours.Convert Jekyll plugins to Hugo shortcodes Jekyll has plugins; Hugo has shortcodes. It’s fairly trivial to do a port.Implementation As an example, I was using a custom image_tag plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing.Jekyll’s plugin:module Jekyll class ImageTag < Liquid::Tag @url = nil @caption = nil @class = nil @link = nil // Patterns IMAGE_URL_WITH_CLASS_AND_CAPTION = IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = /(\\w+)(\\s+)((https?:\\/\\/|\\/)(\\S+))(\\s+)"(.*?)"(\\s+)->((https?:\\/\\/|\\/)(\\S+))(\\s*)/i IMAGE_URL_WITH_CAPTION = /((https?:\\/\\/|\\/)(\\S+))(\\s+)"(.*?)"/i IMAGE_URL_WITH_CLASS = /(\\w+)(\\s+)((https?:\\/\\/|\\/)(\\S+))/i IMAGE_URL = /((https?:\\/\\/|\\/)(\\S+))/i def initialize(tag_name, markup, tokens) super if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK @class = $1 @url = $3 @caption = $7 @link = $9 elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION @class = $1 @url = $3 @caption = $7 elsif markup =~ IMAGE_URL_WITH_CAPTION @url = $1 @caption = $5 elsif markup =~ IMAGE_URL_WITH_CLASS @class = $1 @url = $3 elsif markup =~ IMAGE_URL @url = $1 end end def render(context) if @class source = "<figure class='#{@class}'>" else source = "<figure>" end if @link source += "<a href=\\"#{@link}\\">" end source += "<img src=\\"#{@url}\\">" if @link source += "</a>" end source += "<figcaption>#{@caption}</figcaption>" if @caption source += "</figure>" source end end end Liquid::Template.register_tag('image', Jekyll::ImageTag) is written as this Hugo shortcode:<!-- image --> <figure {{ with .Get "class" }}class="{{.}}"{{ end }}> {{ with .Get "link"}}<a href="{{.}}">{{ end }} <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt=&a
|
|||
|
"url": "http://localhost:1313/post/migrate-from-jekyll/"
|
|||
|
},{
|
|||
|
"name": "(Hu)go Template Primer",
|
|||
|
"description": "Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates.This document is a brief primer on using Go templates.",
|
|||
|
"body": " Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates.This document is a brief primer on using Go templates. The Go docs provide more details.Introduction to Go Templates Go templates provide an extremely simple template language. It adheres to the belief that only the most basic of logic belongs in the template or view layer. One consequence of this simplicity is that Go templates parse very quickly.A unique characteristic of Go templates is they are content aware. Variables and content will be sanitized depending on the context of where they are used. More details can be found in the Go docs.Basic Syntax Golang templates are HTML files with the addition of variables and functions.Go variables and functions are accessible within {{ }}Accessing a predefined variable “foo”:{{ foo }} Parameters are separated using spacesCalling the add function with input of 1, 2:{{ add 1 2 }} Methods and fields are accessed via dot notationAccessing the Page Parameter “bar”{{ .Params.bar }} Parentheses can be used to group items together{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} Variables Each Go template has a struct (object) made available to it. In hugo each template is passed either a page or a node struct depending on which type of page you are rendering. More details are available on the variables page.A variable is accessed by referencing the variable name.<title>{{ .Title }}</title> Variables can also be defined and referenced.{{ $address := "123 Main St."}} {{ $address }} Functions Go template ship with a few functions which provide basic functionality. The Go template system also provides a mechanism for applications to extend the available functions with their own. Hugo template functions provide some additional functionality we believe are useful for building websites. Functions are called by using their name followed by the required parameters separated by spaces. Template functions cannot be added without recompiling hugo.Example:{{ add 1 2 }} Includes When including another template you will pass to it the data it will be able to access. To pass along the current context please remember to include a trailing dot. The templates location will always be starting at the /layout/ directory within Hugo.Example:{{ template "chrome/header.html" . }} Logic Go templates provide the most basic iteration and conditional logic.Iteration Just like in Go, the Go templates make heavy use of range to iterate over a map, array or slice. The following are different examples of how to use range.Example 1: Using Context{{ range array }} {{ . }} {{ end }} Example 2: Declaring value variable name{{range $element := array}} {{ $element }} {{ end }} Example 2: Declaring key and value variable name{{range $index, $element := array}} {{ $index }} {{ $element }} {{ end }} Conditionals If, else, with, or, & and provide the framework for handling conditional logic in Go Templates. Like range, each statement is closed with end.Go Templates treat the following values as false: false 0 any array, slice, map, or string of length zero Example 1: If{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }} Example 2: If -> Else{{ if isset .Params "alt" }} {{ index .Params "alt" }} {{else}} {{ index .Params "caption" }} {{ end }} Example 3: And & Or{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr
|
|||
|
"url": "http://localhost:1313/post/goisforlovers/"
|
|||
|
},{
|
|||
|
"name": "Getting Started with Hugo",
|
|||
|
"description": "Step 1. Install Hugo Go to Hugo releases and download the appropriate version for your OS and architecture.Save it somewhere specific as we will be using it in the next step.More complete instructions are available at Install HugoStep 2. Build the Docs Hugo has its own example site which happens to also be the documentation site you are reading right now.Follow the following steps: Clone the Hugo repository Go into the repo Run hugo in server mode and build the docs Open your browser to http://localhost:1313 Corresponding pseudo commands:",
|
|||
|
"body": " Step 1. Install Hugo Go to Hugo releases and download the appropriate version for your OS and architecture.Save it somewhere specific as we will be using it in the next step.More complete instructions are available at Install HugoStep 2. Build the Docs Hugo has its own example site which happens to also be the documentation site you are reading right now.Follow the following steps: Clone the Hugo repository Go into the repo Run hugo in server mode and build the docs Open your browser to http://localhost:1313 Corresponding pseudo commands:git clone https://github.com/spf13/hugo cd hugo /path/to/where/you/installed/hugo server --source=./docs > 29 pages created > 0 tags index created > in 27 ms > Web Server is available at http://localhost:1313 > Press ctrl+c to stop Once you’ve gotten here, follow along the rest of this page on your local build.Step 3. Change the docs site Stop the Hugo process by hitting Ctrl+C.Now we are going to run hugo again, but this time with hugo in watch mode./path/to/hugo/from/step/1/hugo server --source=./docs --watch > 29 pages created > 0 tags index created > in 27 ms > Web Server is available at http://localhost:1313 > Watching for changes in /Users/spf13/Code/hugo/docs/content > Press ctrl+c to stop Open your favorite editor and change one of the source content pages. How about changing this very file to fix the typo. How about changing this very file to fix the typo.Content files are found in docs/content/. Unless otherwise specified, files are located at the same relative location as the url, in our case docs/content/overview/quickstart.md.Change and save this file.. Notice what happened in your terminal.> Change detected, rebuilding site > 29 pages created > 0 tags index created > in 26 ms Refresh the browser and observe that the typo is now fixed.Notice how quick that was. Try to refresh the site before it’s finished building. I double dare you. Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.Step 4. Have fun The best way to learn something is to play with it.",
|
|||
|
"url": "http://localhost:1313/post/hugoisforlovers/"
|
|||
|
}
|
|||
|
]
|