diff options
author | William McGann <contact@WilliamMcGann.com> | 2014-04-12 16:04:17 -0400 |
---|---|---|
committer | spf13 <steve.francia@gmail.com> | 2014-04-26 23:05:41 -0600 |
commit | 96b6ae81eb48cd250c507e6c200a16b91a054eb7 (patch) | |
tree | f749ebd5963991144e9a8890b2f640e5c35f5fa6 | |
parent | b52e94638122061d3045605d9bf81f8c15e02752 (diff) |
Adding example blog
35 files changed, 14709 insertions, 0 deletions
diff --git a/examples/blog/.gitignore b/examples/blog/.gitignore new file mode 100644 index 000000000..958340e12 --- /dev/null +++ b/examples/blog/.gitignore @@ -0,0 +1,12 @@ +# Hugo default output directory +/public + +## OS Files +# Windows +Thumbs.db +ehthumbs.db +Desktop.ini +$RECYCLE.BIN/ + +# OSX +.DS_Store diff --git a/examples/blog/README.md b/examples/blog/README.md new file mode 100644 index 000000000..731839781 --- /dev/null +++ b/examples/blog/README.md @@ -0,0 +1,42 @@ +Hugo Example Blog +================= + +This repository provides a fully-working example of a [Hugo](https://github.com/spf13/hugo)-powered blog. Many +Hugo-specific features are used as a way to see them in action, and hopefully ease the learning curve for creating your +very own site with Hugo. + +Features +-------- + +- Recent Posts at main index +- Indexes for `tags` and `categories` +- Post information block, with links for all `tags` and `categories` post belongs to +- [Bootstrap 3](http://getbootstrap.com/) ready + - Currently using the Yeti theme from http://bootswatch.com/ + +Common things that should be added in the near future *(pull requests are welcome!)*: + +- Disqus integration +- More content types to demonstrate different layout methods + - About Me + - Contact + +Getting Started +--------------- + +To get started you should simply fork or clone this repository! That's definitely an important first step. + +[Install Hugo](http://hugo.spf13.com/overview/installing) in a way that best suits your environment and comfort level. + +Edit `config.yaml` and change the default properties to suit your own information. This is not required to run the +example, but this is the global configuration file and you're going to need to use it eventually. Start here! + +In a command prompt or terminal, navigate to the path that contains your `config.yaml` file and run `hugo`. That's it! +You should now have a `public` directory with a complete blog! Open `public/index.html` in your browser and bask. + +If that wasn't amazing enough, from the same terminal run `hugo server -w`. This will watch your directories for changes +and rebuild the site immediately, *and* it will make these changes available at http://localhost:1313/ so you can view +your finished site in your browser. Go on, try it. This is one of the best ways to preview your site while working on it. + +To further learn Hugo and learn more, read through the Hugo [documentation](http://hugo.spf13.com/overview/introduction) +or browse around the files in this repository. Have fun!
\ No newline at end of file diff --git a/examples/blog/config.yaml b/examples/blog/config.yaml new file mode 100644 index 000000000..0e3b4aef1 --- /dev/null +++ b/examples/blog/config.yaml @@ -0,0 +1,5 @@ +--- +baseurl: "http://blog.hugoexample.com/" +title: "Hugo Example Blog" +canonifyurls: true +---
\ No newline at end of file diff --git a/examples/blog/content/post/another-post.md b/examples/blog/content/post/another-post.md new file mode 100644 index 000000000..2db5a923b --- /dev/null +++ b/examples/blog/content/post/another-post.md @@ -0,0 +1,55 @@ ++++ +title = "Another Hugo Post" +description = "Nothing special, but one post is boring." +date = "2014-04-09" +categories = [ "example", "configuration" ] +tags = [ + "example", + "hugo", + "toml" +] ++++ + +TOML, YAML, JSON - Oh my! +------------------------- + +One of the nifty Hugo features we should cover: flexible configuration and front matter formats! This entry has front +matter in `toml`, unlike the last one which used `yaml`, and `json` is also available if that's your preference. + +The `toml` front matter used on this entry: + +``` ++++ +title = "Another Hugo Post" +description = "Nothing special, but one post is boring." +date = "2014-04-09" +categories = [ "example", "configuration" ] +tags = [ + "example", + "hugo", + "toml" +] ++++ +``` + +This flexibility also extends to your site's global configuration file. You're free to use any format you prefer, simply +name the file `config.yaml`, `config.toml`, or `config.json` and go on your merry way. + +JSON Example +------------ + +How would this entry's front matter look in `json`? That's easy enough to demonstrate: + +``` +{ + "title": "Another Hugo Post", + "description": "Nothing special, but one post is boring.", + "date": "2014-04-09", + "categories": [ "example", "configuration" ], + "tags": [ + "example", + "hugo", + "toml" + ], +} +```
\ No newline at end of file diff --git a/examples/blog/content/post/hello-hugo.md b/examples/blog/content/post/hello-hugo.md new file mode 100644 index 000000000..d88bd43c6 --- /dev/null +++ b/examples/blog/content/post/hello-hugo.md @@ -0,0 +1,61 @@ +--- +title: "Hello Hugo!" +description: "Saying 'Hello' from Hugo" +date: "2014-04-08" +categories: + - "example" + - "hello" +tags: + - "example" + - "hugo" + - "blog" +--- + +Hello from Hugo! If you're reading this in your browser, good job! The file `content/post/hello-hugo.md` has been +converted into a complete html document by Hugo. Isn't that pretty nifty? + +A Section +--------- + +Here's a simple titled section where you can place whatever information you want. + +You can use inline HTML if you want, but really there's not much that markdown can't do. + +Showing Off With Markdown +------------------------- + +A full cheat sheet can be found [here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) +or through [google](https://google.com/). + +There are some *easy* examples for styling, though. I can't **emphasize** that enough. +Creating [links](https://google.com/) or `inline code` blocks are very straightforward. + +``` +There are some *easy* examples for styling, though. I can't **emphasize** that enough. +Creating [links](https://google.com/) or `inline code` blocks are very straightforward. +``` + +Front Matter For Fun +-------------------- + +This is the meta data for this post. It is located at the top of the `content/post/hello-hugo.md` markdown file. + +``` +--- +title: "Hello Hugo!" +description: "Saying 'Hello' from Hugo" +date: "2014-04-09" +categories: + - "example" + - "hello" +tags: + - "example" + - "hugo" + - "blog" +--- +``` + +This section, called 'Front Matter', is what tells Hugo about the content in this file. The title of the item,the +description, the date it was posted. In our example we're adding two custom bits of data, too. The `categories` and +`tags` sections are used in this example for indexing/grouping content. You will learn more about what that means by +examining the code in this example and through reading the Hugo [documentation](http://hugo.spf13.com/overview/introduction)
\ No newline at end of file diff --git a/examples/blog/layouts/_default/single.html b/examples/blog/layouts/_default/single.html new file mode 100644 index 000000000..29679d5af --- /dev/null +++ b/examples/blog/layouts/_default/single.html @@ -0,0 +1,21 @@ +{{ template "chrome/header.html" . }} +<body> +{{ template "chrome/navbar.html" . }} +<div class="container"> + <div class="row"> + <div class="col-md-9"> + <div class="well well-sm"> + <h3>{{ .Title }}<br> <small>{{ .Description }}</small></h3> + <hr> + {{ .Content }} + </div> + </div> + + <!-- Sidebar --> + <div class="col-md-3"> + {{ template "chrome/menu.html" . }} + </div> + </div> +{{ template "chrome/footer.copyright.html" . }} +</div> +{{ template "chrome/footer.html" . }}
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/footer.copyright.html b/examples/blog/layouts/chrome/footer.copyright.html new file mode 100644 index 000000000..2a7aa873f --- /dev/null +++ b/examples/blog/layouts/chrome/footer.copyright.html @@ -0,0 +1,9 @@ + <footer> + <div class="row"> + <hr> + <div class="col-sm-12"> + <p>© Enthusiastic Hugo User 2014<br> + Built with <a href="https://github.com/spf13/hugo">Hugo</a></p> + </div> + </div> + </footer>
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/footer.html b/examples/blog/layouts/chrome/footer.html new file mode 100644 index 000000000..8a028c31f --- /dev/null +++ b/examples/blog/layouts/chrome/footer.html @@ -0,0 +1,5 @@ + + <script src="/js/jquery.js"></script> + <script src="/js/bootstrap.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/header.html b/examples/blog/layouts/chrome/header.html new file mode 100644 index 000000000..4a2c3f69c --- /dev/null +++ b/examples/blog/layouts/chrome/header.html @@ -0,0 +1,10 @@ +<!doctype html> +<html lang="en"> +<head> + {{ template "chrome/meta.html" . }} + + <title>{{ .Title }} - {{ .Site.BaseUrl }}</title> + <link rel="canonical" href="{{ .Permalink }}"> + {{ template "chrome/header.includes.html" . }} + {{ if .RSSlink }}<link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />{{ end }} +</head>
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/header.includes.html b/examples/blog/layouts/chrome/header.includes.html new file mode 100644 index 000000000..92891d0cc --- /dev/null +++ b/examples/blog/layouts/chrome/header.includes.html @@ -0,0 +1,4 @@ + + <link href="/css/bootstrap.css" rel="stylesheet"> + <link href="/css/font-awesome.css" rel="stylesheet"> + <link href="/css/custom.css" rel="stylesheet">
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/menu.html b/examples/blog/layouts/chrome/menu.html new file mode 100644 index 000000000..295fb90cc --- /dev/null +++ b/examples/blog/layouts/chrome/menu.html @@ -0,0 +1,15 @@ + <div class="panel panel-default"> + <div class="panel-heading" style="padding: 2px 15px;"> + <h4>Connect. Socialize.</h4> + </div> + <div class="panel-body"> + <a href="https://github.com/SomeSillyUserNameHere/" class="btn btn-primary btn-xs"><i class="fa fa-github-square fa-2x"></i></a> + <a href="https://www.facebook.com/SomeSillyUserNameHere" class="btn btn-info btn-xs"><i class="fa fa-facebook-square fa-2x"></i></a> + + <div class="alert alert-info alert-dismissable" style="margin-top:25px;margin-bottom:5px;"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <strong>Hey, listen!</strong><br> + You should modify the <code>layouts/chrome/menu.html</code> template and include your own profile links. + </div> + </div> + </div>
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/meta.html b/examples/blog/layouts/chrome/meta.html new file mode 100644 index 000000000..95fd2a711 --- /dev/null +++ b/examples/blog/layouts/chrome/meta.html @@ -0,0 +1,6 @@ + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content="{{ .Description }}"> + <meta name="author" content="A Hugo User"> <!-- This should be modified to be your name, if you want to include this information -->
\ No newline at end of file diff --git a/examples/blog/layouts/chrome/navbar.html b/examples/blog/layouts/chrome/navbar.html new file mode 100644 index 000000000..c4ef82334 --- /dev/null +++ b/examples/blog/layouts/chrome/navbar.html @@ -0,0 +1,22 @@ + <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> + <span class="sr-only">Toggle Navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="{{ .Site.BaseUrl }}">{{ .Site.Title }}</a> + </div> + <div class="collapse navbar-collapse navbar-ex1-collapse"> + <ul class="nav navbar-nav"> + <li><a href="/post/">Post Index</a></li> + <!-- + And here is where you'd add more links to sections, or anywhere you like. + <li><a href="#">About Me</a></li> + --> + </ul> + </div> + </div> + </nav>
\ No newline at end of file diff --git a/examples/blog/layouts/index.html b/examples/blog/layouts/index.html new file mode 100644 index 000000000..5eb216127 --- /dev/null +++ b/examples/blog/layouts/index.html @@ -0,0 +1,19 @@ +{{ template "chrome/header.html" . }} +<body> +{{ template "chrome/navbar.html" . }} +<div class="container"> + <div class="row"> + <div class="col-md-9"> + {{ range first 10 .Data.Pages }} + {{ .Render "summary" }} + {{ end }} + </div> + + <!-- Sidebar --> + <div class="col-md-3"> + {{ template "chrome/menu.html" . }} + </div> + </div> +{{ template "chrome/footer.copyright.html" . }} +</div> +{{ template "chrome/footer.html" . }}
\ No newline at end of file diff --git a/examples/blog/layouts/indexes/category.html b/examples/blog/layouts/indexes/category.html new file mode 100644 index 000000000..2551b79b8 --- /dev/null +++ b/examples/blog/layouts/indexes/category.html @@ -0,0 +1,24 @@ +{{ template "chrome/header.html" . }} +<body> +{{ template "chrome/navbar.html" . }} +<div class="container"> + <div class="row"> + <div class="col-md-9"> + <div class="well well-sm"> + <strong>Items in category <code>{{ .Title | lower }}</code></strong> + <ul class="list-unstyled"> + {{ range .Data.Pages }} + {{ .Render "li" }} + {{ end}} + </ul> + </div> + </div> + + <!-- Sidebar --> + <div class="col-md-3"> + {{ template "chrome/menu.html" . }} + </div> + </div> +{{ template "chrome/footer.copyright.html" . }} +</div> +{{ template "chrome/footer.html" . }}
\ No newline at end of file diff --git a/examples/blog/layouts/indexes/post.html b/examples/blog/layouts/indexes/post.html new file mode 100644 index 000000000..bd8d90d66 --- /dev/null +++ b/examples/blog/layouts/indexes/post.html @@ -0,0 +1,24 @@ +{{ template "chrome/header.html" . }} +<body> +{{ template "chrome/navbar.html" . }} +<div class="container"> + <div class="row"> + <div class="col-md-9"> + <div class="well well-sm"> + <strong>Blog Post Archive</strong> + <ul class="list-unstyled"> + {{ range .Data.Pages }} + {{ .Render "li" }} + {{ end}} + </ul> + </div> + </div> + + <!-- Sidebar --> + <div class="col-md-3"> + {{ template "chrome/menu.html" . }} + </div> + </div> +{{ template "chrome/footer.copyright.html" . }} +</div> +{{ template "chrome/footer.html" . }}
\ No newline at end of file diff --git a/examples/blog/layouts/indexes/tag.html b/examples/blog/layouts/indexes/tag.html new file mode 100644 index 000000000..16f626dc2 --- /dev/null +++ b/examples/blog/layouts/indexes/tag.html @@ -0,0 +1,24 @@ +{{ template "chrome/header.html" . }} +<body> +{{ template "chrome/navbar.html" . }} +<div class="container"> + <div class="row"> + <div class="col-md-9"> + <div class="well well-sm"> + <strong>Items with tag <code>{{ .Title | lower }}</code></strong> + <ul class="list-unstyled"> + {{ range .Data.Pages }} + {{ .Render "li" }} + {{ end}} + </ul> + </div> + </div> + + <!-- Sidebar --> + <div class="col-md-3"> + {{ template "chrome/menu.html" . }} + </div> + </div> +{{ template "chrome/footer.copyright.html" . }} +</div> +{{ template "chrome/footer.html" . }}
\ No newline at end of file diff --git a/examples/blog/layouts/post/li.html b/examples/blog/layouts/post/li.html new file mode 100644 index 000000000..d57be9c80 --- /dev/null +++ b/examples/blog/layouts/post/li.html @@ -0,0 +1,4 @@ + <li> + <h5><a href="{{ .Permalink }}">{{ .Title}}</a><br> + <small>posted on {{ .Date.Format "January 2, 2006" }}</small></h5> + </li>
\ No newline at end of file diff --git a/examples/blog/layouts/post/single.html b/examples/blog/layouts/post/single.html new file mode 100644 index 000000000..05ecc53c7 --- /dev/null +++ b/examples/blog/layouts/post/single.html @@ -0,0 +1,35 @@ +{{ template "chrome/header.html" . }} +<body> +{{ template "chrome/navbar.html" . }} +<div class="container"> + <div class="row"> + <div class="col-md-9"> + <div class="well well-sm"> + <h3>{{ .Title }}<br> <small>{{ .Description }}</small></h3> + <hr> + {{ .Content }} + </div> + </div> + + <!-- Sidebar --> + <div class="col-md-3"> + <div class="well well-sm"> <!-- Post-specific stats --> + <h4>{{ .Date.Format "January 2, 2006" }}<br> + <small>{{ .WordCount }} words</small></h4> + <hr> + <strong>Categories</strong> + <ul class="list-unstyled"> + {{ range .Params.categories }} + <li><a href="/categories/{{ . | urlize }}">{{ . }}</a></li> + {{ end }} + </ul> + <hr> + <strong>Tags</strong><br> + {{ range .Params.tags }}<a class="label label-default" href="/tags/{{ . | urlize }}">{{ . }}</a> {{ end }} + </div> + {{ template "chrome/menu.html" . }} + </div> + </div> +{{ template "chrome/footer.copyright.html" . }} +</div> +{{ template "chrome/footer.html" . }}
\ No newline at end of file diff --git a/examples/blog/layouts/post/summary.html b/examples/blog/layouts/post/summary.html new file mode 100644 index 000000000..f70b6827a --- /dev/null +++ b/examples/blog/layouts/post/summary.html @@ -0,0 +1,9 @@ +<div class="well well-sm"> + <h4> + <a href="{{ .Permalink }}">{{ .Title }}</a> <small class="pull-right">Posted on {{ .Date.Format "Jan 2, 2006" }}</small><br> + <small>{{ .Description }}</small> + </h4> + <hr> + <p>{{ .Summary }}</p> + <a class="btn btn-primary btn-xs" href="{{ .Permalink }}">Read More <span class="fa fa-angle-double-right"></span></a> +</div>
\ No newline at end of file diff --git a/examples/blog/layouts/rss.xml b/examples/blog/layouts/rss.xml new file mode 100644 index 000000000..7cb7568a6 --- /dev/null +++ b/examples/blog/layouts/rss.xml @@ -0,0 +1,20 @@ +<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> + <channel> + <title>{{ .Title }} on {{ .Site.Title }} </title> + <link>{{ .Permalink }}</link> + <language>en-US</language> + <author>Enthusiastic Hugo User</author> + <rights>Copyright (c) 2014, Enthusiastic Hugo User; all rights reserved.</rights> + <updated>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 MST" }}</updated> + {{ |