forked from Git/hugo-story
2023 Updates
This commit is contained in:
36
README.md
36
README.md
@ -1,7 +1,7 @@
|
||||
# Hugo Story
|
||||
## A (modular, highly tweakable) responsive one-page theme for Hugo.
|
||||
|
||||

|
||||

|
||||
|
||||
Hugo Story is a port of the static HTML template Story by HTML5 UP. It is designed to mirror the look and feel of the original template as closely as possible while incorporating some of the features Hugo has to offer.
|
||||
|
||||
@ -34,56 +34,50 @@ This theme is designed for those who are comfortable editing HTML and integratin
|
||||
|
||||
## 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
|
||||
### 2. Create a new example site called `mystory`.
|
||||
|
||||
```
|
||||
hugo new site story-examplesite
|
||||
hugo new site mystory
|
||||
```
|
||||
### 3. Clone this Git repository
|
||||
### 3. Clone the Git repository.
|
||||
|
||||
```
|
||||
cd story-examplesite
|
||||
cd mystory
|
||||
git clone 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`
|
||||
### 4. Copy contents of `themes/hugo-story/exampleSite/` to `mystory` root folder with overwrite.
|
||||
```
|
||||
cp -r themes/hugo-story/exampleSite/data ./
|
||||
cp themes/hugo-story/exampleSite/config.toml ./
|
||||
cp -r themes/hugo-story/exampleSite/* ./
|
||||
```
|
||||
> _Hint: Using `config.toml` tells Hugo to use the theme and sets some basic theme parameters._
|
||||
> _Hint: This sets up the `mystory` website with a copy of the `layouts`, `data`, and `configuration` files outside of the theme folder._
|
||||
|
||||
> _Hint: Using `data` provides default content for the site._
|
||||
### 5. Start Hugo Server
|
||||
### 5. Start Hugo Server.
|
||||
```
|
||||
hugo server
|
||||
```
|
||||
### 6. Open Hugo Server in your browser
|
||||
### 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.
|
||||
|
||||
### 7. Further steps
|
||||
|
||||
- Change the contents of `YML` files in the `data` folder.
|
||||
- Edit 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`.
|
||||
- Edit the `index.html` within `mystory/layouts/` to customize the layout the site.
|
||||
|
||||
```
|
||||
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/).
|
||||
|
||||
- Continue exploring Hugo and the template!
|
||||
|
Reference in New Issue
Block a user