214 lines
7.7 KiB
Markdown
214 lines
7.7 KiB
Markdown
+++
|
|
title = 'Creating a new site'
|
|
show_toc = true
|
|
weight = 10
|
|
+++
|
|
|
|
The first step to get started is to install Hugo and Silicate then create
|
|
a blank website!
|
|
|
|
Let's be honest: this will be the most **boring** part of the guides: it's
|
|
the most technical one and is mostly settings things up.
|
|
|
|
You will have to use the terminal a bit, but it's easy, you'll see!
|
|
|
|
<!--more-->
|
|
|
|
## Creating a workspace and getting Hugo
|
|
|
|
On your computer, create a folder where you'll work on your Hugo websites.
|
|
For the rest of the guide, it will be named `hugo_workspace/`.
|
|
|
|
Then you need to get Hugo itself. Hugo is a single executable file, it
|
|
requires no installation, only that you download it.
|
|
|
|
Hugo has its [own guide](https://gohugo.io/installation/) on how to install it, but
|
|
this tutorial will give you a simpler version.
|
|
|
|
Go to the [Hugo release page](https://github.com/gohugoio/hugo/releases/latest).
|
|
Unfold the "Assets" section. From it, you can download Hugo based on your
|
|
OS :
|
|
|
|
* Linux: download the `hugo_extended_X.XXX.X_linux-64bit.tar.gz` file
|
|
* Mac: download the `hugo_extended_X.XXX.X_darwin-universal.tar.gz` file
|
|
* Windows: download the `hugo_extended_X.XXX.X_windows-amd64.zip` file
|
|
|
|
Once downloaded, extract the `hugo` executable (`hugo.exe` for Windows) from the archive into `hugo_workspace/`
|
|
|
|
Now you'll need a terminal, also known as "shell", "command line" or "CLI" -- basically a text window to
|
|
send instructions to your computer:
|
|
|
|
* Linux: It varies from OS to OS, but you should be able to open one by searching "Terminal" in your applications
|
|
* MacOS: [Click on the Launchpad icon then search and click on "Terminal"](https://support.apple.com/en-ca/guide/terminal/apd5265185d-f365-44cb-8b09-71a064a42125/mac)
|
|
* You can also navigate to `/Applications/Utilities` and double click on `Terminal`
|
|
* Windows: Click on the Windows icon then search and click on "Command Prompt"
|
|
|
|
Regardless of you OS, you should have a window open that you can type commands into then
|
|
press enter to run them.
|
|
|
|
First, we need to tell the terminal we want to run commands from the `hugo_workspace/` directory.
|
|
|
|
Get the complete (also known as absolute) path of your `hugo_workspace/` folder.
|
|
You can do that by navigating inside this folder with your file explorer then clicking
|
|
on the path shown on the top then copying it.
|
|
|
|
Then, in the terminal, type the following, replacing `<path to hugo workspace>` with the one you just copied:
|
|
|
|
* Linux & Mac & Windows: Type `cd <path to hugo workspace>` then press enter
|
|
* `cd` stands for "Change Directory"!
|
|
|
|
Now, to see if everything is working, you can type `./hugo version` (`hugo.exe version` for Windows) then press enter.
|
|
|
|
If everything is OK, you should see a line like this :
|
|
|
|
```
|
|
hugo v0.147.2-[...] VendorInfo=gohugoio
|
|
```
|
|
|
|
----------
|
|
|
|
## Creating a site
|
|
|
|
With the terminal open in the `hugo_workspace/` folder, run the command :
|
|
|
|
* Linux & Mac: `./hugo new site my_webcomic`
|
|
* Windows: `hugo.exe new site my_webcomic`
|
|
|
|
If everything went right, hugo should show you something similar to this:
|
|
|
|
```
|
|
Congratulations! Your new Hugo site was created in /.../hugo_workspace/my_webcomic.
|
|
|
|
Just a few more steps...
|
|
|
|
1. Change the current directory to /.../hugo_workspace/my_webcomic.
|
|
2. Create or install a theme:
|
|
- Create a new theme with the command "hugo new theme <THEMENAME>"
|
|
- Or, install a theme from https://themes.gohugo.io/
|
|
3. Edit hugo.toml, setting the "theme" property to the theme name.
|
|
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
|
|
5. Start the embedded web server with the command "hugo server --buildDrafts".
|
|
|
|
See documentation at https://gohugo.io/.
|
|
```
|
|
|
|
Hugo just created a new `my_webcomic/` folder inside `hugo_workspace/`. That's where Hugo will
|
|
look for everything it needs to create your website!
|
|
|
|
Inside `hugo_workspace/my_webcomic/`, you should now have the following folders and files:
|
|
|
|
* `archetypes/`
|
|
* `assets/`
|
|
* `content/`
|
|
* `data/`
|
|
* `i18n/`
|
|
* `layouts/`
|
|
* `resources/`
|
|
* `static/`
|
|
* `themes/`
|
|
* `hugo.toml`
|
|
|
|
You don't need to worry about each and every one of them, they will be explained when -- and only if -- nedeed.
|
|
|
|
Like Hugo said in its output, you can change the directory to this new one in the Terminal :
|
|
|
|
* Linux & Mac & Windows: Type `cd my_webcomic` then press the enter key.
|
|
|
|
Move the `hugo` / `hugo.exe` executable directly into the `my_webcomic/` folder using
|
|
your file explorer.
|
|
It will make things simpler.
|
|
|
|
----------
|
|
|
|
## Installing the Silicate theme
|
|
|
|
The first thing we need is a theme -- Hugo doesn't know how to create your website
|
|
without one.
|
|
|
|
All themes go into the `themes/` folder of a Hugo website.
|
|
|
|
First, [download the Silicate theme](), then extract it into `my_webcomic/themes/`.
|
|
|
|
{{< warning >}}
|
|
Downloads will be available when version 1 of Silicate is ready.
|
|
{{< /warning >}}
|
|
|
|
Now, you should have a `my_webcomic/themes/silicate` folder, but Hugo doesn't
|
|
know that it should use that theme. You can let it know by changing your
|
|
website configuration.
|
|
|
|
Most of a Hugo website configuration is in the `hugo.toml` file.
|
|
|
|
It's a simple text file using the [TOML format](https://toml.io/en/). Right now, it should look like this:
|
|
|
|
```
|
|
baseURL = 'https://example.org/'
|
|
languageCode = 'en-us'
|
|
title = 'My New Hugo Site'
|
|
```
|
|
|
|
We'll look at `hugo.toml` and how to fully use it later. For now, just add `theme = 'silicate'`
|
|
at the end of the file.
|
|
|
|
Be careful about the `'` around "silicate", they are necessary!
|
|
|
|
And with that done, your website is set up to use Silicate! Now, you only need to do one final check.
|
|
|
|
----------
|
|
|
|
## Starting your site
|
|
|
|
With the terminal opened in `my_website/`, type `./hugo server` (`hugo.exe server` on Windows) then press the enter key.
|
|
|
|
Hugo should say something close to this :
|
|
|
|
```
|
|
Watching for changes in /<...>/hugo_workspace/my_webcomic/{archetypes,assets,content,data,i18n,layouts,static,themes}
|
|
Watching for config changes in /<...>/hugo_workspace/my_webcomic/hugo.toml, /<...>/hugo_workspace/my_webcomic/themes/silicate/hugo.toml
|
|
Start building sites …
|
|
hugo v0.147.2-c7feb15d10b29a94d7fb57c31e8bcb2e92718fb7+extended linux/amd64 BuildDate=2025-05-06T11:18:55Z VendorInfo=gohugoio
|
|
|
|
|
|
| EN
|
|
-------------------+-----
|
|
Pages | 7
|
|
Paginator pages | 0
|
|
Non-page files | 0
|
|
Static files | 1
|
|
Processed images | 0
|
|
Aliases | 0
|
|
Cleaned | 0
|
|
|
|
Built in 48 ms
|
|
Environment: "development"
|
|
Serving pages from disk
|
|
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
|
|
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
|
Press Ctrl+C to stop
|
|
```
|
|
|
|
Hugo actually did two separate things :
|
|
|
|
* It created your entire website and put it into the `my_webcomic/public/` folder
|
|
* It is now running a small web server so you can browse this website
|
|
|
|
Keep the terminal open! If you close it, then the web server will close too.
|
|
|
|
Open your web browser and go to the URL Hugo gave you in the
|
|
`Web Server is available at XXX` line (for this example, `http://localhost:1313`).
|
|
|
|
You should see the following page :
|
|
|
|
|
|
|
|
If you do, then you are done, the new site is created!
|
|
|
|
Just so you know, only you can acess your website for now!:
|
|
|
|
* `localhost` / `127.0.0.1` is a special internet address, it's your own computer
|
|
* By saying `(bind address 127.0.0.1)`, Hugo means "Only let 127.0.0.1 -- that is this computer -- access the website".
|
|
* `:1313` (or the other number Hugo gave you) is a [port number](https://en.wikipedia.org/wiki/Port_(computer_networking)). If multiple servers runs at once, they would each have a different port.
|
|
* To put it simply: if your computer was a street, then this port would be an street number.
|
|
|
|
You can stop this server at any time by pressing `Ctrl`+`C` in the terminal or by closing the terminal window.
|