forked from Git/hugo-story
Update Readme
This commit is contained in:
parent
96d1bbc2e5
commit
45804939fa
95
README.md
95
README.md
@ -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
|
[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.*<br>
|
```
|
||||||
[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:
|
- Continue exploring Hugo and the template!
|
||||||
|
|
||||||
```
|
|
||||||
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
|
## 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/).
|
||||||
|
Loading…
Reference in New Issue
Block a user