Update Readme

This commit is contained in:
DR 2021-02-05 15:56:51 -05:00
parent 96d1bbc2e5
commit 45804939fa

View File

@ -33,69 +33,60 @@ This theme is designed for those who are comfortable editing HTML and integratin
- Google Analytics Support - Google Analytics Support
## Demo ## Demo
https://caressofsteel.github.io/demos/hugo/hugo-story/ https://caressofsteel.github.io/demos/hugo/hugo-story/
## Using ## Using
### 1. Install Hugo
1. Install Hugo
*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/) [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. > _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
2. Create a new site:
``` ```
hugo new site story-examplesite hugo new site story-examplesite
``` ```
### 3. Clone this Git repository
3. Clone this git repository:
``` ```
cd story-examplesite cd story-examplesite
git submodule add https://github.com/caressofsteel/hugo-story.git themes/hugo-story 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).* > _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`
4. Copy `data` and `config.toml` with overwrite from `themes/exampleSite` to the main directory:
``` ```
cp -r themes/hugo-story/exampleSite/data ./ cp -r themes/hugo-story/exampleSite/data ./
cp themes/hugo-story/exampleSite/config.toml ./ 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 `config.toml` tells Hugo to use the theme and sets some basic theme parameters.* > _Hint: Using `data` provides default content for the site._
### 5. Start Hugo Server
*Hint: Using `data` provides some default contents for the site.*
5. Start Hugo server:
``` ```
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.
6. Open Hugo site in your browser http://localhost:1313/ > _Hint: A copy of the default generated site is located in the _`originalStorySite`_ folder should you need to reference it._
Now you should see the orginal Story site. You can also take a look into it in folder `originalStorySite`. ### 7. Further steps
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/)._
- 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/). - Create a custom site layout.
- Copy the default `index.html`.
- Copy default `index.html`:
``` ```
cp themes/hugo-story/layouts/index.html layouts/ 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/).
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 ## Credits
This theme was created using the _Story_ template by [HTML5 UP](https://html5up.net/uploads/demos/story/). This theme was created using the _Story_ template by [HTML5 UP](https://html5up.net/uploads/demos/story/).