Merge pull request #10 from applikationsprogramvara/add_quick_start_to_readme

Adding steps into quick start guide

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.*<br>
+    [Install Hugo (Extended Version)](https://gohugo.io/overview/installing/)
+
+    See the official [Hugo Quick Start Guide](https://gohugo.io/getting-started/quick-start/) for more information.
+
+
+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