From 7f1ff71e30984df1ee94709ee812433b519f6965 Mon Sep 17 00:00:00 2001 From: mspnr Date: Thu, 4 Feb 2021 23:23:52 +0100 Subject: adding steps into quick start guide --- README.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 577e5f1..503a148 100644 --- a/README.md +++ b/README.md @@ -38,9 +38,63 @@ https://caressofsteel.github.io/demos/hugo/hugo-story/ ## Using -This theme uses Hugo Pipes to compile SCSS & Sass so you'll have to use the **extended** version of Hugo. +1. Install Hugo -[Install Hugo (Extended Version)](https://gohugo.io/overview/installing/) + *This theme uses Hugo Pipes to compile SCSS & Sass so you'll have to use the **extended** version of Hugo.*:
+ [Install Hugo (Extended Version)](https://gohugo.io/overview/installing/) + + Further several steps are cited looking back to the official [Hugo Quick Start Guide](https://gohugo.io/getting-started/quick-start/). + + +2. Create a new site: + + ``` + hugo new site story-examplesite + ``` + +3. Clone this git repository: + + ``` + cd story-examplesite + git submodule add https://github.com/caressofsteel/hugo-story.git themes/hugo-story + ``` + + Hint: See a note for non-git users [here](https://gohugo.io/getting-started/quick-start/#step-3-add-a-theme). + +4. Copy `data` and `config.toml` with overwrite from `themes/exampleSite` to the main directory: + + ``` + cp -r themes/hugo-story/exampleSite/data ./ + cp themes/hugo-story/exampleSite/config.toml ./ + ``` + + Hint: Using `config.toml` tells Hugo to use the theme and sets some basic theme parameters. + + Hint: Using `data` provides some default contents for the site. + +5. Start Hugo server: + + ``` + hugo server + ``` + +6. Open Hugo site in your browser http://localhost:1313/ + + Now you should see the orginal Story site. You can also take a look into it in folder `originalStorySite`. + +7. Further steps + + - Change the contents of folder `data`. E.g. by altering `banner.yml` you can change the top block on the site. See more details [here](https://gohugo.io/templates/data-templates/). + + - Copy default `index.html`: + + ``` + cp themes/hugo-story/layouts/index.html layouts/ + ``` + + Now you can create your own structure of the site by manipulating `{{ partial ... }}` tags. See more details [here](https://gohugo.io/templates/partials/). + + - Continue exploring Hugo and the template! ## Credits -- cgit v1.2.3