mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-01-18 19:00:24 +00:00
docs: fix oddities in the installation tutorial #840
This commit is contained in:
Sören Weber
parent
26b356081c
commit
1d783931d6
2 changed files with 57 additions and 48 deletions
|
|
@ -12,9 +12,9 @@ The following tutorial leads you through the steps of creating a first, minimal
|
|||
You don't need to edit any files besides your `hugo.toml` and only need to execute the commands in the given order.
|
||||
{{% /notice %}}
|
||||
|
||||
## Create your project
|
||||
## Create your Project
|
||||
|
||||
Hugo provides a `new` command to create a new website:
|
||||
Hugo provides the `new` command to create a new website:
|
||||
|
||||
````shell
|
||||
hugo new site my-new-site
|
||||
|
|
@ -28,31 +28,49 @@ cd my-new-site
|
|||
|
||||
Every upcoming command will be executed from inside your new site's root.
|
||||
|
||||
## Install the theme
|
||||
## Install the Theme
|
||||
|
||||
### From Download
|
||||
### Downloading as Archive
|
||||
|
||||
You can [download the theme as .zip](https://github.com/McShelby/hugo-theme-relearn/archive/main.zip) file and extract it into them `themes/hugo-theme-relearn` directory.
|
||||
You can [download the theme as .zip archive](https://github.com/McShelby/hugo-theme-relearn/archive/main.zip) and extract its content into them `themes/hugo-theme-relearn` directory.
|
||||
|
||||
### With Hugo's Module System
|
||||
Afterwards add this at the end of your `hugo.toml`.
|
||||
|
||||
Install the Relearn theme by following [this documentation](https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme) using Hugo's module system.
|
||||
{{< multiconfig file=hugo >}}
|
||||
theme = "hugo-theme-relearn"
|
||||
{{< /multiconfig >}}
|
||||
|
||||
This theme's repository is: https://github.com/McShelby/hugo-theme-relearn.git
|
||||
### Using Hugo's Module System
|
||||
|
||||
### Using Git or Git Submodules
|
||||
You can install the Relearn theme by following [the standard documentation](https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme) using Hugo's module system:
|
||||
|
||||
If you install the theme from your git repository or GitHub, you have several options.
|
||||
````shell
|
||||
hugo mod init example.com
|
||||
````
|
||||
|
||||
If you use the `head` of the `main` branch, you are using the development version. Usually it is fully functional but can break from time to time. We try to fix newly introduced bugs in this version as soon as possible.
|
||||
Afterwards add this at the end of your `hugo.toml`.
|
||||
|
||||
Additionally you can checkout one of the tagged versions. These tagged versions correspond to an official [releases from the GitHub repository](https://github.com/McShelby/hugo-theme-relearn/releases).
|
||||
{{< multiconfig file=hugo >}}
|
||||
[module]
|
||||
[[module.imports]]
|
||||
path = 'github.com/McShelby/hugo-theme-relearn'
|
||||
{{< /multiconfig >}}
|
||||
|
||||
Besides the usual version tags (eg `1.2.3`) there are also tags for the main version (eg. `1.2.x`), major version (eg. `1.x`) and the latest (just `x`) released version making it easier for you to pin the theme to a certain version.
|
||||
### Using Git Submodules
|
||||
|
||||
## Basic Configuration
|
||||
If you plan to store your project in a git repository you can create one with:
|
||||
|
||||
When building the website, you can set a theme by using `--theme` option. However, we suggest you modify the configuration file `hugo.toml` and set the theme as the default.
|
||||
````shell
|
||||
git init
|
||||
````
|
||||
|
||||
Now add the theme as a submodule by:
|
||||
|
||||
````shell
|
||||
git submodule add https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn
|
||||
````
|
||||
|
||||
Afterwards add this at the end of your `hugo.toml`.
|
||||
|
||||
{{< multiconfig file=hugo >}}
|
||||
theme = "hugo-theme-relearn"
|
||||
|
|
@ -60,70 +78,61 @@ theme = "hugo-theme-relearn"
|
|||
|
||||
## Create your Home Page
|
||||
|
||||
If you don't create a home page, yet, the theme will generate a placeholder text with instructions how to proceed.
|
||||
If you don't create a home page, yet, the theme will generate a placeholder text with instructions on how to proceed.
|
||||
|
||||
Start your journey by filling the home page with content
|
||||
Start your journey by creating a home page:
|
||||
|
||||
````shell
|
||||
hugo new --kind home _index.md
|
||||
````
|
||||
|
||||
By opening the given file, you should see the property `archetype=home` on top, meaning this page is a home page. The Relearn theme provides [some archetypes](cont/archetypes) to create those skeleton files for your website.
|
||||
|
||||
Obviously you better should change the page's content.
|
||||
The newly created home page `content/_index.md` is empty and you obviously should add some meaningful content.
|
||||
|
||||
## Create your First Chapter Page
|
||||
|
||||
Chapters are pages that contain other child pages. It has a special layout style and usually just contains the _title_ and a _brief abstract_ of the section.
|
||||
Chapters are meant to be top level pages that contain other child pages. They have a special layout style and often just contain the _title_ and a _brief abstract_ of the section.
|
||||
|
||||
````md
|
||||
# Basics
|
||||
|
||||
Discover what this Hugo theme is all about and the core concepts behind it.
|
||||
````
|
||||
|
||||
renders as
|
||||
|
||||
|
||||
|
||||
Begin by creating your first chapter page with the following command:
|
||||
Now create your first chapter page with the following command:
|
||||
|
||||
````shell
|
||||
hugo new --kind chapter basics/_index.md
|
||||
````
|
||||
|
||||
By opening the given file, you should see the property `archetype=chapter` on top, meaning this page is a _chapter_.
|
||||
|
||||
The `weight` number will be used to generate the subtitle of the chapter page, set the number to a consecutive value starting at 1 for each new chapter level.
|
||||
When opening the newly created file `content/basics/_index.md`, you should see the `weight` frontmatter with a number. This will be used to generate the subtitle of the chapter page, and should be set to a consecutive value starting at `1` for each chapter level.
|
||||
|
||||
## Create your First Content Pages
|
||||
|
||||
Then, create content pages inside the previously created chapter. Here are two ways to create content in the chapter:
|
||||
Then create content pages inside the previously created chapter. Here are three ways to create content in the chapter:
|
||||
|
||||
````shell
|
||||
hugo new basics/first-content.md
|
||||
hugo new basics/second-content/_index.md
|
||||
hugo new basics/first-content/_index.md
|
||||
hugo new basics/second-content/index.md
|
||||
hugo new basics/third-content.md
|
||||
````
|
||||
|
||||
Feel free to edit those files by adding some sample content and replacing the `title` value in the beginning of the files.
|
||||
|
||||
## Launching the Website Locally
|
||||
{{% notice note%}}
|
||||
Please note that Hugo overrides the default archetype template coming with this theme when using `hugo new site my-new-site`. To actually see your page later, you have to remove the `draft=true` from the page's frontmatter.
|
||||
{{% /notice %}}
|
||||
|
||||
Launch by using the following command:
|
||||
## Testing your Website Locally
|
||||
|
||||
Launch your new web site by using the following command:
|
||||
|
||||
````shell
|
||||
hugo serve
|
||||
````
|
||||
|
||||
Go to `http://localhost:1313`
|
||||
Go to [`http://localhost:1313`](http://localhost:1313) in your browser.
|
||||
|
||||
You should notice three things:
|
||||
You should notice a few things:
|
||||
|
||||
1. The home page contains some basic text.
|
||||
2. You have a left-side **Basics** menu, containing two submenus with names equal to the `title` properties in the previously created files.
|
||||
3. When you run `hugo serve` your page refreshes automatically when you change a content page. Neat!
|
||||
1. The home page contains your provided text.
|
||||
2. You have the menu **Basics** in the sidebar. Clicking on it reveals three submenus with names equal to the `title` properties in the previously created content pages.
|
||||
3. While you are running `hugo serve` your page refreshes automatically when you change a content page. Neat!
|
||||
|
||||
## Build the Website
|
||||
## Build and Deploy your Website
|
||||
|
||||
When your site is ready to deploy, run the following command:
|
||||
|
||||
|
|
@ -131,6 +140,6 @@ When your site is ready to deploy, run the following command:
|
|||
hugo
|
||||
````
|
||||
|
||||
A `public` folder will be generated, containing all content and assets for your website. It can now be deployed on any web server.
|
||||
A `public` directory will be generated, containing all content and assets for your web site.
|
||||
|
||||
Now it's time to deploy your page by simply uploading your project to some web server or by using one of [Hugo's many deployment options](https://gohugo.io/hosting-and-deployment/).
|
||||
It now can be deployed to any web server by simply uploading its contents or you can check out one of [Hugo's many other deployment options](https://gohugo.io/hosting-and-deployment/).
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Loading…
Reference in a new issue