diff --git a/README.md b/README.md index beecb51..48fd791 100644 --- a/README.md +++ b/README.md @@ -33,69 +33,60 @@ This theme is designed for those who are comfortable editing HTML and integratin - Google Analytics Support ## Demo - https://caressofsteel.github.io/demos/hugo/hugo-story/ - ## Using +### 1. Install 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. See the official [Hugo Quick Start Guide](https://gohugo.io/getting-started/quick-start/) for more information._ +### 2. Create a new site - *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/) +``` +hugo new site story-examplesite +``` +### 3. Clone this Git repository - See the official [Hugo Quick Start Guide](https://gohugo.io/getting-started/quick-start/) for more information. +``` +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 `exampleSite` +``` +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._ -2. Create a new site: +> _Hint: Using `data` provides default content for the site._ +### 5. Start Hugo Server +``` +hugo server +``` +### 6. Open Hugo Server in your browser +``` +http://localhost:1313/ +``` +Here you'll see the site running on the local Hugo server. You can now make changes to and Hugo will rebuild the site automatically. + +> _Hint: A copy of the default generated site is located in the _`originalStorySite`_ folder should you need to reference it._ + +### 7. Further steps + +- Change the contents of `YML` files in the `data` folder. + - _Altering `banner.yml` will change the top block on the site. See more details [here](https://gohugo.io/templates/data-templates/)._ + +- Create a custom site layout. + - Copy the default `index.html`. ``` - hugo new site story-examplesite + cp themes/hugo-story/layouts/index.html layouts/ ``` + - By manipulating the the `{{ partial ... }}` tags within this file you can create a custom layout for the site. See more details [here](https://gohugo.io/templates/partials/). -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! - +- Continue exploring Hugo and the template! ## Credits This theme was created using the _Story_ template by [HTML5 UP](https://html5up.net/uploads/demos/story/).