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" . }} +
+{{ template "chrome/navbar.html" . }} +