description: This tutorial will show you how to create a simple theme in Hugo.
weight: 10
weight: 10
---
---
@ -31,7 +32,7 @@ func main() {
fmt.Print("Hello")
fmt.Print("Hello")
}
}
```
```
> There are a few concepts that you need to understand before creating a theme.
> There are a few concepts that you need to understand before creating a theme.
### Skins
### Skins
@ -131,13 +132,13 @@ INFO: 2014/09/29 Using config file: config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content
0 draft content
0 future content
0 future content
0 pages created
0 pages created
0 tags created
0 tags created
0 categories created
0 categories created
in 2 ms
in 2 ms
$
$
```
```
The "`--verbose`" flag gives extra information that will be helpful when we build the template. Every line of the output that starts with "INFO:" or "WARN:" is present because we used that flag. The lines that start with "WARN:" are warning messages. We'll go over them later.
The "`--verbose`" flag gives extra information that will be helpful when we build the template. Every line of the output that starts with "INFO:" or "WARN:" is present because we used that flag. The lines that start with "WARN:" are warning messages. We'll go over them later.
@ -620,9 +621,9 @@ INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 draft content
0 future content
0 future content
2 pages created
2 pages created
0 tags created
0 tags created
0 categories created
0 categories created
in 4 ms
in 4 ms
@ -655,7 +656,7 @@ There are three other types of templates: partials, content views, and terms. We
The home page will contain a list of posts. Let's update its template to add the posts that we just created. The logic in the template will run every time we build the site.
The home page will contain a list of posts. Let's update its template to add the posts that we just created. The logic in the template will run every time we build the site.
```
```
$ vi themes/zafta/layouts/index.html
$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body>
<body>
@ -693,26 +694,26 @@ INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 draft content
0 future content
0 future content
2 pages created
2 pages created
0 tags created
0 tags created
0 categories created
0 categories created
in 4 ms
in 4 ms
$ find public -type f -name '*.html' | xargs ls -l
$ find public -type f -name '*.html' | xargs ls -l
@ -887,7 +888,7 @@ Let's add an "about" page and display it at the top level (as opposed to a sub-l
The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level:
The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level:
nodejh
8 years ago
