2024-09-23 21:12:00 +00:00
+++
2024-10-12 17:28:28 +00:00
categories = ["tutorial"]
2024-09-24 06:05:40 +00:00
description = "Initialize your website in a few simple steps"
2024-09-23 21:12:00 +00:00
title = "Getting Started"
weight = 1
+++
2024-10-04 10:38:36 +00:00
Here's how to start your new website. If you're new to Hugo, we recommend learning more about it in its excellent [starter's guide ](https://gohugo.io/getting-started/ ).
2024-09-23 21:12:00 +00:00
## Install Hugo
2024-10-04 15:40:29 +00:00
Download and install Hugo {{% badge color="fuchsia" icon="fa-fw fab fa-hackerrank" title=" " %}}0.126.0{{% /badge %}} or newer for your operating system [following the instructions ](https://gohugo.io/installation/ ).
The _standard_ edition of Hugo is sufficient but you can also use the _extended_ edition.
2024-09-23 21:12:00 +00:00
## Create your Project
2024-09-24 11:13:46 +00:00
Use Hugo's `new site` command to make a new website
2024-09-23 21:12:00 +00:00
````shell
hugo new site my-new-site
````
2024-09-24 11:13:46 +00:00
Then move into the new directory
2024-09-23 21:12:00 +00:00
````shell
cd my-new-site
````
2024-09-24 11:13:46 +00:00
Run all future commands from this directory.
2024-09-23 21:12:00 +00:00
## Install the Theme
2024-09-24 11:13:46 +00:00
### Download as a Zip File
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
You can [download the theme as a .zip file ](https://github.com/McShelby/hugo-theme-relearn/archive/main.zip ) and unzip it into the `themes/hugo-theme-relearn` directory.
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
Then add this at the top of your `hugo.toml`
2024-09-23 21:12:00 +00:00
{{< multiconfig file = hugo > }}
2024-10-12 16:37:59 +00:00
theme = 'hugo-theme-relearn'
2024-09-23 21:12:00 +00:00
{{< / multiconfig > }}
2024-09-24 11:13:46 +00:00
### Use Hugo's Module System
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
Install the Relearn theme using [Hugo's module system ](https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme )
2024-09-23 21:12:00 +00:00
````shell
hugo mod init example.com
````
2024-09-24 11:13:46 +00:00
Then add this at the end of your `hugo.toml`
2024-09-23 21:12:00 +00:00
{{< multiconfig file = hugo > }}
[module]
[[module.imports]]
path = 'github.com/McShelby/hugo-theme-relearn'
{{< / multiconfig > }}
2024-09-24 11:13:46 +00:00
### Use as a Git Submodule
2024-09-23 21:12:00 +00:00
2024-10-04 10:38:36 +00:00
If you're using [Git ](https://git-scm.com/ ) for your project, you can create a repository now
2024-09-23 21:12:00 +00:00
````shell
git init
````
2024-09-24 11:13:46 +00:00
Add the theme as a Git submodule
2024-09-23 21:12:00 +00:00
````shell
git submodule add --depth 1 https://github.com/McShelby/hugo-theme-relearn.git themes/hugo-theme-relearn
````
2024-09-24 11:13:46 +00:00
Then add this at the top of your `hugo.toml`
2024-09-23 21:12:00 +00:00
{{< multiconfig file = hugo > }}
2024-10-12 16:37:59 +00:00
theme = 'hugo-theme-relearn'
2024-09-23 21:12:00 +00:00
{{< / multiconfig > }}
## Create your Home Page
2024-09-24 11:13:46 +00:00
Start by making a home page
2024-09-23 21:12:00 +00:00
````shell
hugo new --kind home _index.md
````
2024-10-15 16:12:08 +00:00
The new home page file `content/_index.md` has two parts: the page info (like `title` ) at the top, called [front matter ](https://gohugo.io/content-management/front-matter/ ), and the page content below.
2024-09-23 21:12:00 +00:00
## Create your First Chapter Page
2024-09-24 11:13:46 +00:00
Chapters are top-level pages that contain other pages. They have a special layout.
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
Make your first chapter page
2024-09-23 21:12:00 +00:00
````shell
2024-10-11 20:40:10 +00:00
hugo new --kind chapter first-chapter/_index.md
2024-09-23 21:12:00 +00:00
````
2024-10-11 20:40:10 +00:00
The new file `content/first-chapter/_index.md` has a `weight` number in the front matter. This sets the chapter's subtitle and its order in the menu.
2024-09-23 21:12:00 +00:00
## Create your First Content Pages
2024-09-24 11:13:46 +00:00
Now make content pages inside the chapter. Here are three ways to do this
2024-09-23 21:12:00 +00:00
````shell
2024-10-11 20:40:10 +00:00
hugo new first-chapter/first-page/_index.md
hugo new first-chapter/second-page/index.md
hugo new first-chapter/third-page.md
2024-09-23 21:12:00 +00:00
````
2024-09-24 11:13:46 +00:00
Hugo treats these files differently based on their file names. Learn more in [Hugo's guide ](https://gohugo.io/content-management/ ).
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
Feel free to edit these files. Change the `title` , add a `weight` if you want, and write your content.
2024-09-23 21:12:00 +00:00
## Test your Website Locally
2024-09-24 11:13:46 +00:00
Start your new website on your computer with this command
2024-09-23 21:12:00 +00:00
````shell
hugo serve
````
2024-09-24 11:13:46 +00:00
Open [http://localhost:1313 ](http://localhost:1313 ) in your web browser.
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
You can keep the server running while you edit. The browser will update automatically when you save changes.
2024-09-23 21:12:00 +00:00
{{% figure src="magic.gif" link="https://gohugo.io" alt="Magic" caption="It's a kind of magic" %}}
## Build and Deploy your Website
2024-09-24 11:13:46 +00:00
When your site is ready to go live, run this command
2024-09-23 21:12:00 +00:00
````shell
hugo
````
2024-09-24 11:13:46 +00:00
This creates a `public` directory with all your website files.
2024-09-23 21:12:00 +00:00
2024-09-24 11:13:46 +00:00
You can upload this directory to any web server, or use one of [Hugo's many other ways to publish ](https://gohugo.io/hosting-and-deployment/ ).
2024-09-23 21:30:44 +00:00
2024-09-24 11:13:46 +00:00
## Next Steps
2024-09-23 21:30:44 +00:00
Your site is now fully functional.
2024-10-07 06:31:28 +00:00
You can continue [configuring your site ](configuration ) to your needs.
2024-09-23 21:30:44 +00:00
2024-10-11 20:40:10 +00:00
Or just start [authoring content ](authoring ) and discover what's possible.