mirror of
https://github.com/gohugoio/hugoDocs.git
synced 2025-09-24 08:20:59 -04:00
Add finished Quick Start
This commit is contained in:
Ryan Watters
parent
9acdc1bb4a
commit
0a76c785b6
@ -43,15 +43,16 @@ Running this command in a new site that does not have default or custom archetyp
|
||||
+++
|
||||
date = "2017-02-01T19:20:04-07:00"
|
||||
title = my first post
|
||||
draft = true
|
||||
+++
|
||||
```
|
||||
{{% /output %}}
|
||||
|
||||
Note that if you do not already have a `posts` directory, Hugo will create both `content/posts/` and `content/posts/my-first-post.md`.
|
||||
|
||||
`date` and `title` are the variables that ship with Hugo and are therefore included in *all* content files created with the Hugo CLI. `title` is generated from the new content's filename. `date` is generated in [RFC 3339 format][] by way of Golang's [`now()`][] function, which returns the current time.
|
||||
`date` and `title` are the variables that ship with Hugo and are therefore included in *all* content files created with the Hugo CLI. `title` is generated from the new content's filename. `date` is generated in [RFC 3339 format][] by way of Golang's [`now()`][] function, which returns the current time. The third variable, `draft = true` is not carried over into your default archetype but has been added as a convenience to the Hugo's internal/base archetype.
|
||||
|
||||
Two variables per content file are often not enough for effective content management of larger websites. Luckily, Hugo provides a simple mechanism for extending the number of variables through default and custom archetypes.
|
||||
Three variables per content file are often not enough for effective content management of larger websites. Luckily, Hugo provides a simple mechanism for extending the number of variables through default and custom archetypes.
|
||||
|
||||
## Lookup Order for Archetypes
|
||||
|
||||
|
||||
@ -15,8 +15,6 @@ toc: false
|
||||
notesforauthors:
|
||||
---
|
||||
|
||||
Hugo is and always will be open source. In addition to contributing to Hugo development and documentation, Hugo also has a Gitter channel ***devoted solely to discussions around development***.
|
||||
Hugo will always be open source and therefore really heavily on the enthusiasm and participation of the open-source community. Hugo needs your support in both its development and documentation.
|
||||
|
||||
The formal contribution guidelines for Hugo are [detailed in a `CONTRIBUTING.md`][contributionguidelines] in the Hugo source repository on GitHub.
|
||||
|
||||
[contributionguidelines]: https://github.com/spf13/hugo/blob/master/CONTRIBUTING.md
|
||||
The formal contribution guidelines for Hugo are [detailed in a `CONTRIBUTING.md`](https://github.com/spf13/hugo/blob/master/CONTRIBUTING.md) in the Hugo source repository on GitHub.
|
||||
@ -12,3 +12,18 @@ draft: false
|
||||
aliases: [/overview/source-directory/]
|
||||
notesforauthors:
|
||||
---
|
||||
|
||||
<!-- copied from old version of quick start -->
|
||||
|
||||
* **archetypes**: You can create new content files in Hugo using the `hugo new` command. When you run that command, it adds few configuration properties to the post like date and title. [Archetype][archetypes] allows you to define your own configuration properties that will be added to front matter of new content files whenever `hugo new` command is used.
|
||||
|
||||
* **config.toml**: Every website should have a configuration file at the root. By default, the configuration file uses `TOML` format but you can also use `YAML` or `JSON` formats as well. [TOML](https://github.com/toml-lang/toml) is minimal configuration file format that's easy to read due to obvious semantics. The configuration settings mentioned in the `config.toml` are applied to the full site. These configuration settings include `baseURL` and `title` of the website.
|
||||
|
||||
* **content**: This is where you will store content of the website. Inside content, you will create sub-directories for different sections. Let's suppose your website has three actions -- `blog`, `article`, and `tutorial` then you will have three different directories for each of them inside the `content` directory. The name of the section i.e. `blog`, `article`, or `tutorial` will be used by Hugo to apply a specific layout applicable to that section.
|
||||
|
||||
* **data**: This directory is used to store configuration files that can be
|
||||
used by Hugo when generating your website. You can write these files in YAML, JSON, or TOML format.
|
||||
|
||||
* **layouts**: The content inside this directory is used to specify how your content will be converted into the static website.
|
||||
|
||||
* **static**: This directory is used to store all the static content that your website will need like images, CSS, JavaScript or other static content.
|
||||
|
||||
@ -432,7 +432,7 @@ you need to install the Python-based Pygments program. The procedure is outlined
|
||||
|
||||
## Next Steps
|
||||
|
||||
Now that you've installed Hugo, read the [Quickstart guide](/getting-started/quick-start/) and explore the rest of the documentation, starting with an [explanation of how to be use the Hugo docs][usingthehugodocs]. If you have questions, ask the Hugo community directly by visiting the [Hugo Discussion Forum][hugodiscussion].
|
||||
Now that you've installed Hugo, read the [Quickstart guide](/getting-started/quick-start/) and explore the rest of the documentation, starting with an [explanation of how to best use the Hugo docs][usingthehugodocs]. If you have questions, ask the Hugo community directly by visiting the [Hugo Discussion Forum][hugodiscussion].
|
||||
|
||||
[brew]: https://brew.sh/
|
||||
[highlight shortcode]: /content-management/shortcodes/#highlight
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Quick Start
|
||||
linktitle: Quick Start
|
||||
description:
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
description: Build an online bookshelf that lists books and their reviews. The Quick Start introduces you to HUGO's CLI, directory structure, configuration, theming, and even a simple deployment.
|
||||
date: 2013-07-01
|
||||
publishdate: 2013-07-01
|
||||
lastmod: 2017-02-19
|
||||
categories: [getting started]
|
||||
tags: [quick start,usage]
|
||||
authors: [Shekhar Gulati]
|
||||
authors: [Shekhar Gulati, Ryan Watters]
|
||||
weight: 10
|
||||
draft: false
|
||||
aliases: [/overview/quickstart/]
|
||||
@ -16,29 +16,26 @@ needsreview: true
|
||||
notesforauthors:
|
||||
---
|
||||
|
||||
In this Quick Start guide, we will build an online bookshelf that lists books and their reviews.
|
||||
In this Quick Start, we will build an online bookshelf that lists books and their reviews. This quick start assumes you are using Hugo v0.15 or greater.
|
||||
|
||||
{{% note %}}
|
||||
This Quick Start depends on features introduced in Hugo v0.15. If you have an earlier version of Hugo, you will need to [upgrade](/overview/installing/) before proceeding.
|
||||
This Quick Start was originally written by [Shekhar Gulati](https://twitter.com/shekhargulati) in his [52 Technologies in 2016](https://github.com/shekhargulati/52-technologies-in-2016) blog series but has been heavily modified to represent additional features and other changes to Hugo.
|
||||
{{% /note %}}
|
||||
|
||||
{{% youtube w7Ft2ymGmfc %}}
|
||||
|
||||
## Step 1. Install Hugo
|
||||
|
||||
Go to [Hugo Releases][releases] and download the appropriate version for your OS and architecture or follow the [Quick Install][quickinstall] in the Hugo docs.
|
||||
Go to [Hugo Releases][releases] and download the appropriate version for your operating system and architecture or follow the [Quick Install][quickinstall] in the Hugo docs.
|
||||
|
||||
If installing from Hugo release, you'll need to save the main executable as `hugo` (or `hugo.exe` on Windows) somewhere in your `PATH` as we will be using it in the next step.
|
||||
If installing from Hugo release, you'll need to save the main executable as `hugo` (or `hugo.exe` on Windows) somewhere in your `PATH`. You will need this command in the following steps..
|
||||
|
||||
{{% note "Windows Users and Git Bash" %}}
|
||||
If you're on Windows, this quickstart will assume you're using [Git Bash](https://git-for-windows.github.io/) (also known as Git for Windows).
|
||||
Thus all commands will begin with the Bash prompt character (which is `$`).
|
||||
If you're on Windows, this Quick Start will assume you're using [Git Bash](https://git-for-windows.github.io/) (aka Git for Windows).
|
||||
{{% /note %}}
|
||||
|
||||
Once `hugo` is installed, make sure to run the `help` command to verify `hugo` installation. Below you can see part of the `help` command output for brevity.
|
||||
Once `hugo` is installed, make sure to run the `help` command to verify `hugo` installation. The following is an abridged version of what will write to the console when entering the command:
|
||||
|
||||
```bash
|
||||
$ hugo help
|
||||
hugo help
|
||||
```
|
||||
```
|
||||
hugo is the main command, used to build your Hugo site.
|
||||
@ -49,208 +46,220 @@ built with love by spf13 and friends in Go.
|
||||
Complete documentation is available at http://gohugo.io/.
|
||||
```
|
||||
|
||||
You can check `hugo` version using the command shown below.
|
||||
You can check your `hugo version` as well:
|
||||
|
||||
```bash
|
||||
$ hugo version
|
||||
hugo version
|
||||
```
|
||||
```
|
||||
Hugo Static Site Generator v0.15 BuildDate: 2015-11-26T11:59:00+05:30
|
||||
Hugo Static Site Generator v0.18.1 BuildDate: 2016-12-30T05:02:43-05:00
|
||||
```
|
||||
|
||||
## Step 2. Scaffold bookshelf hugo site
|
||||
## Step 2. Scaffold Your Hugo Bookshelf Website
|
||||
|
||||
Hugo has commands that allows us to quickly scaffold a Hugo managed website. Navigate to a convenient location on your filesystem and create a new Hugo site `bookshelf` by executing the following command.
|
||||
Hugo's CLI has commands that allow you to quickly scaffold a new website. Navigate to your preferred location on your file system and create a new Hugo site `bookshelf` by executing the `hugo new` command as follows:
|
||||
|
||||
```bash
|
||||
$ hugo new site bookshelf
|
||||
hugo new site bookshelf
|
||||
```
|
||||
|
||||
Change directory to `bookshelf` and you will see the following directory layout.
|
||||
Change into the newly created `bookshelf` directory. Listing the new directory's content will show the following:
|
||||
|
||||
```bash
|
||||
$ tree -a
|
||||
```
|
||||
```
|
||||
.
|
||||
|-- archetypes
|
||||
|-- config.toml
|
||||
|-- content
|
||||
|-- data
|
||||
|-- layouts
|
||||
`-- static
|
||||
├── archetypes
|
||||
├── config.toml
|
||||
├── content
|
||||
├── data
|
||||
├── layouts
|
||||
├── static
|
||||
└── themes
|
||||
|
||||
5 directories, 1 file
|
||||
6 directories, 1 file
|
||||
```
|
||||
|
||||
As mentioned in the command output, `bookshelf` directory has 5 sub-directories and 1 file. Let's look at each of them one by one.
|
||||
You'll see the `bookshelf` directory has 6 subdirectories and 1 file. Let's look at each of them quickly. (For more detailed information, see [Directory Structure][hugodirectories].)
|
||||
|
||||
* **archetypes**: You can create new content files in Hugo using the `hugo new` command. When you run that command, it adds few configuration properties to the post like date and title. [Archetype][archetypes] allows you to define your own configuration properties that will be added to the post front matter whenever `hugo new` command is used.
|
||||
* `archetypes`: [Archetypes][archetypes] allow you to preconfigure [front matter][frontmatter] for content files for easier scaffolding of content from the command line using `hugo new`.
|
||||
* `config.toml`: Hugo uses `.toml` as its default configuration format but also accepts `.yml` and `.json`. The configuration settings mentioned in the `config.toml` are applied to the full website an include important global variables such as the `baseURL` and `title` of your website. (See [Configuration][configuration])
|
||||
* `content`: This single directory houses all of the content for your website. Each subdirectory in content is considered a [section][]. If your website has sections for posts, events, and tutorials, you would create `content/posts`, `content/events`, and `content/tutorials`.
|
||||
* `data`: This directory is used to store files of serialized data (YAML, TOML, or JSON) that can be used in [data templates][datatemplates] and your [website's menu][sitemenu].
|
||||
* `layouts`: This is the hub for all of our [templating][templating], including [list and section templates][listsectiontemplates] and [shortcodes][shortcodetemplates].
|
||||
* `static`: This houses all your static content; i.e., images, JavaScript, and CSS. Everything in `/static` is copied over *as is* to your finished website.
|
||||
* `themes`: This is where you will download themes for Hugo. You can see a showcase of all themes at <http://themes.gohugo.io>.
|
||||
|
||||
* **config.toml**: Every website should have a configuration file at the root. By default, the configuration file uses `TOML` format but you can also use `YAML` or `JSON` formats as well. [TOML](https://github.com/toml-lang/toml) is minimal configuration file format that's easy to read due to obvious semantics. The configuration settings mentioned in the `config.toml` are applied to the full site. These configuration settings include `baseURL` and `title` of the website.
|
||||
## Step 3. Add Content
|
||||
|
||||
* **content**: This is where you will store content of the website. Inside content, you will create sub-directories for different sections. Let's suppose your website has three actions -- `blog`, `article`, and `tutorial` then you will have three different directories for each of them inside the `content` directory. The name of the section i.e. `blog`, `article`, or `tutorial` will be used by Hugo to apply a specific layout applicable to that section.
|
||||
Let's now add a post to our "bookshelf." We will use the `hugo new` command to add a post. This first post will be on the book [*Good To Great*][bookurl]. Make sure you are inside the `bookshelf` directory.
|
||||
|
||||
* **data**: This directory is used to store configuration files that can be
|
||||
used by Hugo when generating your website.
|
||||
You can write these files in YAML, JSON, or TOML format.
|
||||
{{% input "create-new-book-review-post.sh" %}}
|
||||
```bash
|
||||
hugo new post/good-to-great.md
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
* **layouts**: The content inside this directory is used to specify how your content will be converted into the static website.
|
||||
|
||||
* **static**: This directory is used to store all the static content that your website will need like images, CSS, JavaScript or other static content.
|
||||
|
||||
## Step 3. Add content
|
||||
|
||||
Let's now add a post to our `bookshelf`. We will use the `hugo new` command to add a post. In January, I read [Good To Great](http://www.amazon.com/Good-Great-Some-Companies-Others/dp/0066620996/) book so we will start with creating a post for it. **Make sure you are inside the `bookshelf` directory.**
|
||||
You should then see the following output:
|
||||
|
||||
```bash
|
||||
$ hugo new post/good-to-great.md
|
||||
```
|
||||
```
|
||||
/Users/shekhargulati/bookshelf/content/post/good-to-great.md created
|
||||
/Users/yourusername/bookshelf/content/post/good-to-great.md created
|
||||
```
|
||||
|
||||
The above command will create a new directory `post`
|
||||
inside the `bookshelf/content` directory
|
||||
and create `good-to-great.md` file inside it.
|
||||
The above command will create a new directory `post` inside the `content` directory and create `content/post/good-to-great.md`. The directory for your Hugo project will now look like the following:
|
||||
|
||||
```bash
|
||||
$ tree -a content
|
||||
```
|
||||
```
|
||||
content
|
||||
`-- post
|
||||
`-- good-to-great.md
|
||||
|
||||
1 directory, 1 file
|
||||
.
|
||||
├── archetypes
|
||||
├── config.toml
|
||||
├── content
|
||||
│ └── post
|
||||
│ └── good-to-great.md
|
||||
├── data
|
||||
├── layouts
|
||||
├── static
|
||||
└── themes
|
||||
```
|
||||
|
||||
The content inside the `good-to-great.md` file looks as shown below.
|
||||
Open `good-to-great.md` in your preferred text editor:
|
||||
|
||||
```
|
||||
```toml
|
||||
+++
|
||||
date = "2016-02-14T16:11:58+05:30"
|
||||
draft = true
|
||||
date = "2017-02-19T21:09:05-06:00"
|
||||
title = "good to great"
|
||||
draft = true
|
||||
|
||||
+++
|
||||
```
|
||||
|
||||
The content inside `+++` is the TOML configuration for the post.
|
||||
This configuration is called **front matter**.
|
||||
It enables you to define post configuration along with its content.
|
||||
By default, each post will have the three configuration properties shown above.
|
||||
The text bracketed by `+++` is the TOML [front matter][frontmatter] for the content. Front matter enables you to define embedded metadata that travels with the content file. Since we have not configured any [archetypes][archetypes] for our project, Hugo has used its built-in base archetype, which includes the following three values in the front matter:
|
||||
|
||||
* **date** specifies the date and time at which post was created.
|
||||
* **draft** specifies that post is not ready for publication yet so it will not be in the generated site.
|
||||
* **title** specifies title for the post.
|
||||
* `date` specifies the date and time at which post was created from the command line
|
||||
* `title` specifies the title for the post, which Hugo will infer from the file name
|
||||
* `draft`, when set to `true`, tells Hugo the content is not yet ready to be published
|
||||
|
||||
Let's add a small review for **Good to Great** book.
|
||||
Let's update `good-to-great.md` with a short review of *Good to Great*:
|
||||
|
||||
```
|
||||
{{% input "good-to-great-start.md" %}}
|
||||
```markdown
|
||||
+++
|
||||
date = "2016-02-14T16:11:58+05:30"
|
||||
draft = true
|
||||
title = "Good to Great Book Review"
|
||||
|
||||
+++
|
||||
|
||||
I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great.
|
||||
I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great. Although this book is about how companies became great but we could apply a lot of the learnings on ourselves. Concepts like level 5 leader, hedgehog concept, the stockdale paradox are equally applicable to individuals.
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
## Step 4. Serve content
|
||||
## Step 4. Serve Content
|
||||
|
||||
Hugo has an inbuilt server that can serve your website content so that you can preview it. You can also use the inbuilt Hugo server in production. To serve content, execute the following command inside the `bookshelf` directory.
|
||||
Hugo has a built-in server that can serve your website locally for easy previewing and development. To serve content, execute the following command inside the `bookshelf` directory:
|
||||
|
||||
```bash
|
||||
$ hugo server
|
||||
hugo server
|
||||
```
|
||||
|
||||
You should see something similar to the following output:
|
||||
|
||||
```
|
||||
Built site for language en:
|
||||
0 of 1 draft rendered
|
||||
0 future content
|
||||
0 pages created
|
||||
0 expired content
|
||||
0 regular pages created
|
||||
1 other pages created
|
||||
0 non-page files copied
|
||||
0 paginator pages created
|
||||
0 tags created
|
||||
0 categories created
|
||||
in 9 ms
|
||||
Watching for changes in /Users/shekhargulati/bookshelf/{data,content,layouts,static}
|
||||
total in 1 ms
|
||||
Watching for changes in /Users/yourusername/bookshelf/{data,content,layouts,static}
|
||||
Serving pages from memory
|
||||
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
||||
Press Ctrl+C to stop
|
||||
```
|
||||
|
||||
This will start the server on port `1313`.
|
||||
You can view your blog at http://localhost:1313/.
|
||||
When you go to the link, you will see nothing.
|
||||
There are couple of reasons for that:
|
||||
This will start the server on port `1313`. You can view your blog at <http://localhost:1313/>. However, when you go to the link, you will see nothing. This is for a couple reasons:
|
||||
|
||||
1. As you can see in the `hugo server` command output, Hugo didn't render the draft. Hugo will only render drafts if you pass the `buildDrafts` flag to the `hugo server` command.
|
||||
2. We have not specified how Markdown content should be rendered. We have to specify a theme that Hugo can use. We will do that in the next step.
|
||||
1. As you can see in the `hugo server` command output, Hugo did *not* render the draft. Hugo will only render drafts if you pass the `buildDrafts` flag to the `hugo server` command.
|
||||
2. We have not specified how Markdown content should be rendered. We need to create our own layouts via templates or specify a theme, the latter of which we will do in the next step.
|
||||
|
||||
To render drafts, re-run the server with command shown below.
|
||||
Kill the server using <kbd>Ctrl</kbd> + <kbd>C</kbd> and then rerun the server with the `--buildDrafts` flag appended to the command:
|
||||
|
||||
```bash
|
||||
$ hugo server --buildDrafts
|
||||
hugo server --buildDrafts
|
||||
```
|
||||
|
||||
You should now see something similar to the following:
|
||||
|
||||
```
|
||||
Built site for language en:
|
||||
1 of 1 draft rendered
|
||||
0 future content
|
||||
1 pages created
|
||||
0 expired content
|
||||
1 regular pages created
|
||||
2 other pages created
|
||||
0 non-page files copied
|
||||
0 paginator pages created
|
||||
0 tags created
|
||||
0 categories created
|
||||
in 6 ms
|
||||
Watching for changes in /Users/shekhargulati/bookshelf/{data,content,layouts,static}
|
||||
total in 2 ms
|
||||
Watching for changes in /Users/yourusername/bookshelf/{data,content,layouts,static}
|
||||
Serving pages from memory
|
||||
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
||||
Press Ctrl+C to stop
|
||||
```
|
||||
|
||||
If you go to [http://localhost:1313/](http://localhost:1313/),
|
||||
you still will not see anything as we have not specified a theme that Hugo should use.
|
||||
Okay, so we now have our single page "built," but we're not seeing anything in the browser at <http://localhost:1313>. This was only to demonstrate the utility of the `--buildDrafts` flag.
|
||||
|
||||
## Step 5. Add theme
|
||||
While we are getting closer, we still need to specific a theme for Hugo to use when building our site.
|
||||
|
||||
Themes provide the layout and templates that will be used by Hugo to render your website. There are a lot of Open-source themes available at [https://themes.gohugo.io/](https://themes.gohugo.io/) that you can use.
|
||||
## Step 5. Add A Theme
|
||||
|
||||
[Themes][themessection] provide Hugo with layout and templates to render your website. You can see the full selection of open-source themes at <http://themes.gohugo.io>.
|
||||
|
||||
{{% note "No Default Hugo Theme" %}}
|
||||
Hugo currently doesn’t ship with a *default** theme, allowing the user to pick whichever theme best suits their project.
|
||||
Hugo currently doesn’t ship with a default theme, thus allowing end users to pick whichever theme best suits their projects.
|
||||
{{% /note %}}
|
||||
|
||||
Themes should be added in the `themes` directory inside the repository root.
|
||||
Themes should be added in the `themes` directory, one of the directories scaffolded with the `hugo new site` command we used to start our Hugo project. To install our themes, first change into the `themes` directory:
|
||||
|
||||
```bash
|
||||
$ cd themes
|
||||
cd themes
|
||||
```
|
||||
|
||||
Now, you can clone one or more themes inside the `themes` directory.
|
||||
We will use the `robust` theme, but at a commit (in its history) that works with this Quick Start.
|
||||
You can clone one or more themes from within the `themes` directory. We will use the [Robust theme][robusttheme] but at the most recent commit as of this Quick Start's last update.
|
||||
|
||||
Once inside the `themes` directory, you can use the following one-liner to clone Robust, check out the specific commit, and then return to your project's root directory:
|
||||
|
||||
{{% input "clone-robust-theme" %}}
|
||||
```bash
|
||||
git clone https://github.com/dim0627/hugo_theme_robust.git
|
||||
(cd hugo_theme_robust; git checkout b8ce466)
|
||||
git clone https://github.com/dim0627/hugo_theme_robust.git && cd hugo_theme_robust && git checkout 3baae29 && cd ../..
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Leave the themes folder.
|
||||
|
||||
```bash
|
||||
cd ..
|
||||
```
|
||||
|
||||
Start the server again.
|
||||
Now let's start Hugo's server again but with the addition of the `-theme` flag for Robust:
|
||||
|
||||
{{% input "hugo-server-with-theme.sh" %}}
|
||||
```bash
|
||||
hugo server --theme=hugo_theme_robust --buildDrafts
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
You should see an output to the console similar to the following:
|
||||
|
||||
```
|
||||
Built site for language en:
|
||||
1 of 1 draft rendered
|
||||
0 future content
|
||||
1 pages created
|
||||
0 expired content
|
||||
1 regular pages created
|
||||
2 other pages created
|
||||
0 non-page files copied
|
||||
2 paginator pages created
|
||||
0 tags created
|
||||
0 categories created
|
||||
in 10 ms
|
||||
Watching for changes in /Users/shekhargulati/bookshelf/{data,content,layouts,static,themes}
|
||||
total in 8 ms
|
||||
Watching for changes in /Users/yourusername/bookshelf/{data,content,layouts,static,themes}
|
||||
Serving pages from memory
|
||||
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
||||
Press Ctrl+C to stop
|
||||
@ -260,65 +269,77 @@ If Hugo doesn't find the specified theme in the `themes` directory,
|
||||
it will throw an exception:
|
||||
|
||||
```
|
||||
FATAL: 2016/02/14 Unable to find theme Directory: /Users/shekhargulati/bookshelf/themes/robust
|
||||
FATAL: 2016/02/14 Unable to find theme Directory: /Users/yourusername/bookshelf/themes/robust
|
||||
```
|
||||
|
||||
To view your website, you can go to <http://localhost:1313/>. You will see as shown below.
|
||||
To view your website, you can go to <http://localhost:1313/>. You should see something similar to the following image:
|
||||
|
||||
|
||||
|
||||
Let's understand the layout of the theme. A theme consists of the following:
|
||||
|
||||
* **theme.toml** is the theme configuration file that gives information
|
||||
about the theme like name and description of theme,
|
||||
author details, and theme license.
|
||||
|
||||
* **images** directory contains two images -- `screenshot.png` and `tn.png`. `screenshot.png` is the image of the list view and `tn.png` is the single post view.
|
||||
|
||||
* **layouts** directory contains different views for different content types.
|
||||
Every content type should have two files `single.html` and `list.html`.
|
||||
`single.html` is used for rendering a single piece of content.
|
||||
`list.html` is used to view a list of content items.
|
||||
For example, you will use `list.html` to view all the posts
|
||||
that have the `programming` tag.
|
||||
|
||||
* **static** directory stores all the static assets used by the template.
|
||||
Static assets could be JavaScript libraries like jQuery or CSS styles or images,
|
||||
or any other static content.
|
||||
This directory will be copied into the final site when rendered.
|
||||
|
||||
## Step 6. Use multiple themes
|
||||
|
||||
You can very easily test different layouts by switching between different themes.
|
||||
Let's suppose we want to try out the `bleak` theme.
|
||||
We clone the `bleak` theme inside the `bookshelf/themes` directory.
|
||||
Similar to the way we looked at the scaffolding for our new Hugo website, let's take a look at what comprises a typical Hugo theme. The following is only a selection of what you would see if you were to list out the contents of the Robust theme directory. These are also some of the default files created by Hugo as of v0.18.1. (See [Creating a Theme][createtheme])
|
||||
|
||||
```bash
|
||||
$ git clone https://github.com/Zenithar/hugo-theme-bleak.git
|
||||
.
|
||||
├── LICENSE.md
|
||||
├── archetypes
|
||||
│ └── default.md
|
||||
├── layouts
|
||||
│ ├── 404.html
|
||||
│ ├── _default
|
||||
│ │ ├── list.html
|
||||
│ │ └── single.html
|
||||
│ ├── index.html
|
||||
│ └── partials
|
||||
├── static
|
||||
│ ├── css
|
||||
| ├── images
|
||||
│ └── js
|
||||
└── theme.toml
|
||||
```
|
||||
|
||||
Restart the server using `hugo-theme-bleak` as shown below.
|
||||
* `theme.toml` is the theme configuration file that provides information about the theme; e.g., theme name, theme description, theme author, and theme license.
|
||||
* `layouts` contains different views (i.e., templates) for different content types. In this quick start, we see that each content type has a `single.html` and `list.html`. `single.html` is used for rendering a single piece of content. `list.html` is used to view a list of content items. For example, you will use `list.html` to view `*.md` in the posts [section][listsectiontemplates]. Think of `list.html` as `example.com/posts` and `single.html` as `example.com/posts/my-single-post/`.
|
||||
* `static` has the same purpose as that of the `static` in our original scaffolding. This directory stores all the static assets used by the theme and is copied over *as is* at build time.
|
||||
|
||||
## Step 6. Use Multiple Themes
|
||||
|
||||
You can very easily switch between different themes in Hugo. Let's suppose we want to try out the [`bleak` theme][bleaktheme]. Kill the Hugo server if you are still running it from the command line.
|
||||
|
||||
From your project root, you can use this one-liner to change into `themes`, clone Bleak, and go back to your project's root directory:
|
||||
|
||||
{{% input "clone-bleak-theme.sh" %}}
|
||||
```bash
|
||||
$ hugo server --theme=hugo-theme-bleak --buildDrafts
|
||||
cd themes && git clone https://github.com/Zenithar/hugo-theme-bleak.git && cd ..
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Now, the website will use the `bleak` theme
|
||||
and will be rendered differently as shown below.
|
||||
|
||||
|
||||
|
||||
## Step 7. Update config.toml and live reloading in action
|
||||
|
||||
Restart the server with the `robust` theme, as we will use it in this quickstart.
|
||||
Now restart the server with our new theme flag:
|
||||
|
||||
{{% input "run-server-with-bleak.sh" %}}
|
||||
```bash
|
||||
$ hugo server --theme=hugo_theme_robust --buildDrafts
|
||||
hugo server --theme=hugo-theme-bleak --buildDrafts
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
The website uses the dummy values specified in `bookshelf/config.toml`.
|
||||
Let's update the configuration.
|
||||
Our website is now using the `bleak` theme at <http://localhost:1313>, which should look similar to the following screenshot:
|
||||
|
||||
|
||||
|
||||
## Step 7. Update `config.toml` and Watch LiveReload in Action
|
||||
|
||||
Kill the Hugo server if you are still running it with the Bleak theme, and then restart the server with the `robust` theme. We will use Robust for the duration of this Quick Start:
|
||||
|
||||
{{% input "restart-with-robust-sh" %}}
|
||||
```bash
|
||||
hugo server --theme=hugo_theme_robust --buildDrafts
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
### Updating Our `config.toml`
|
||||
|
||||
Our website is currently using the dummy values specified in `bookshelf/config.toml`, which were auto-generated with `hugo new site bookshelf`. Let's update the configuration:
|
||||
|
||||
{{% input "updated-config.toml" %}}
|
||||
```toml
|
||||
baseURL = "http://example.org/"
|
||||
languageCode = "en-us"
|
||||
@ -327,50 +348,47 @@ title = "Shekhar Gulati Book Reviews"
|
||||
[Params]
|
||||
Author = "Shekhar Gulati"
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Hugo has inbuilt support for live reloading.
|
||||
So, as soon as you save your changes it will apply the change
|
||||
and reload the web page. You will see the changes shown below.
|
||||
### Watch Your Site Reload Instantly
|
||||
|
||||
|
||||
Hugo has built-in support for LiveReload. This means that Hugo will rebuild and reload your site every time you save a change to content, templates, static assets, and even your configuration. You should see something similar to the following screenshot at <http://localhost:1313> once you save the above changes to your `config.toml`:
|
||||
|
||||
The same is reflected in the Hugo server logs as well.
|
||||
As soon as you changed the configuration file,
|
||||
Hugo applied those changes to the affected pages.
|
||||
|
||||
|
||||
The change is also reflected in the console. As soon as you changed the configuration file, Hugo applied those changes to the affected pages and rebuilt the site:
|
||||
|
||||
```
|
||||
Config file changed: /Users/shekhargulati/bookshelf/config.toml
|
||||
Config file changed: /Users/yourusername/bookshelf/config.toml
|
||||
Started building sites ...
|
||||
Built site for language en:
|
||||
1 of 1 draft rendered
|
||||
0 future content
|
||||
1 pages created
|
||||
0 expired content
|
||||
1 regular pages created
|
||||
2 other pages created
|
||||
0 non-page files copied
|
||||
2 paginator pages created
|
||||
0 tags created
|
||||
0 categories created
|
||||
in 11 ms
|
||||
total in 20 ms
|
||||
```
|
||||
|
||||
## Step 8. Customize robust theme
|
||||
## Step 8. Customize the Robust Theme
|
||||
|
||||
The `robust` theme is a good start towards our online bookshelf but we want to customize it a bit to meet the look and feel required for the bookshelf. Hugo makes it very easy to customize themes. You can also create your themes but we will not do that today. You can also [customize existing themes or create your own][themes].
|
||||
The `robust` theme is a good start towards our online bookshelf, but we want to customize it a bit to meet our desired look and feel. Hugo makes it very easy to [customize existing themes or create your own][themes] themes as well. For the purpose of the Quick Start, we will focus on customization.
|
||||
|
||||
The first change that we have to make is to use a different default image
|
||||
instead of the one used in the theme.
|
||||
The theme's default image used in both the list and single view page resides
|
||||
inside `themes/hugo_theme_robust/static/images/default.jpg`.
|
||||
We can easily override it by creating a simple directory structure
|
||||
inside the repository's `static` directory.
|
||||
The first change that we have to make is to use a different default image instead of the one used in the theme. The theme's default image used in both the `list.html` and `single.html` views resides inside `themes/hugo_theme_robust/static/images/default.jpg`. We can easily override it by creating a simple directory structure inside our repository's `static` directory.
|
||||
|
||||
Create an images directory inside the `bookshelf/static` directory
|
||||
and copy an image with name `default.jpg` inside it.
|
||||
We will use the default image shown below.
|
||||
Create an images directory inside of `bookshelf/static` and copy an image with name `default.jpg` inside of it. We will use the default image shown below.
|
||||
|
||||
|
||||
|
||||
|
||||
Hugo will sync the changes and reload the website to use new image as shown below.
|
||||
Hugo will sync the changes and reload the website to use the new image:
|
||||
|
||||
|
||||
|
||||
|
||||
Now, we need to change the layout of the index page so that only images are shown instead of the text. The index.html inside the layouts directory of the theme refer to partial `li` that renders the list view shown below.
|
||||
Now we need to change the layout of the index page so that only images are shown instead of the text. The file at `themes/hugo_theme_robust/layouts/index.html` refers to a partial `li.html` template that renders the following list view:
|
||||
|
||||
```html
|
||||
<article class="li">
|
||||
@ -385,8 +403,17 @@ Now, we need to change the layout of the index page so that only images are show
|
||||
</article>
|
||||
```
|
||||
|
||||
Create a new file li.html inside the `bookshelf/layouts/_default` directory. Copy the content shown below into the li.html. We have removed details of the book so that only image is shown.
|
||||
Create a new file for `li.html` inside the `bookshelf/layouts/_default` directory. If you are in your project root, you can use the following one-liner to both create the file and return to the project root:
|
||||
|
||||
{{% input "create-new-li-html.sh" %}}
|
||||
```bash
|
||||
cd layouts && mkdir _default && cd _default && touch li.html && cd ../..
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Copy the content shown below into the new `li.html`. When contrasting this with the `li.html` that ships with the Robust theme, you'll notice we have removed details of the book so that only the image is shown:
|
||||
|
||||
{{% input "layouts/_default/li.html" %}}
|
||||
```html
|
||||
<article class="li">
|
||||
<a href="{{ .Permalink }}" class="clearfix">
|
||||
@ -394,41 +421,39 @@ Create a new file li.html inside the `bookshelf/layouts/_default` directory. Cop
|
||||
</a>
|
||||
</article>
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Now, the website will be rendered as shown below.
|
||||
Now, the website should render similar to the following screenshot:
|
||||
|
||||
|
||||
|
||||
|
||||
Next, we want to remove information related to theme from the footer.
|
||||
So, create a new directory `partials` inside `bookshelf/layouts`.
|
||||
There, create a new file `default_foot.html` with the content copied
|
||||
from the theme's `layouts/partials/default_foot.html`.
|
||||
Replace the footer section with the one shown below.
|
||||
Next, we want to remove information related to the theme from the footer. Let's create a new directory at `bookshelf/layouts/partials`. This will hold our new file called `default_foot.html`.
|
||||
|
||||
This is a new [partial template][partialtemplates]. If you are still in the project's root directory, you can use the following one-liner to create the partial before returning to the project root:
|
||||
|
||||
{{% input "create-new-default-foot.sh" %}}
|
||||
```bash
|
||||
cd layouts && mkdir partials && cd partials && touch default_foot.html && cd ../..
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Now add the following to our new `default_foot.html` partial template:
|
||||
|
||||
{{% input "layouts/partials/default_foot.html" %}}
|
||||
```html
|
||||
<footer class="site">
|
||||
<p>{{ with .Site.Copyright | safeHTML }}{{ . }}{{ else }}© {{ $.Site.LastChange.Year }} {{ if isset $.Site.Params "Author" }}{{ $.Site.Params.Author }}{{ else }}{{ .Site.Title }}{{ end }}{{ end }}</p>
|
||||
<p>Powered by <a href="http://gohugo.io" target="_blank">Hugo</a>,</p>
|
||||
</footer>
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
We also have to remove the sidebar on the right.
|
||||
Copy the `index.html` from the theme's `layouts` directory to
|
||||
the `bookshelf/layouts` directory.
|
||||
Remove the section related to the sidebar from the HTML:
|
||||
So far we are using the default image, but we would like to use the book image so that we can relate to the book. Every book review will define a configuration setting in its front matter. Update the content and front matter of `good-to-great.md` as shown below.
|
||||
|
||||
```html
|
||||
<div class="col-sm-3">
|
||||
{{ partial "sidebar.html" . }}
|
||||
</div>
|
||||
```
|
||||
|
||||
So far we are using the default image but we would like to use the book image so that we can relate to the book. Every book review will define a configuration setting in its front matter. Update the `good-to-great.md` as shown below.
|
||||
|
||||
|
||||
```
|
||||
{{% input "content/post/good-to-great.md" %}}
|
||||
```markdown
|
||||
+++
|
||||
date = "2016-02-14T16:11:58+05:30"
|
||||
date = "2017-02-19T21:09:05-06:00"
|
||||
draft = true
|
||||
title = "Good to Great Book Review"
|
||||
image = "good-to-great.jpg"
|
||||
@ -436,38 +461,49 @@ image = "good-to-great.jpg"
|
||||
|
||||
I read **Good to Great in January 2016**. An awesome read sharing detailed analysis on how good companies became great. Although this book is about how companies became great but we could apply a lot of the learnings on ourselves. Concepts like level 5 leader, hedgehog concept, the stockdale paradox are equally applicable to individuals.
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Grab a (legal) image from somewhere, name it `good-to-great.jpg`,
|
||||
and place it in the `bookshelf/static/images` directory.
|
||||
Grab a (legal) image from somewhere, name it `good-to-great.jpg`, and place it in the `bookshelf/static/images` directory.
|
||||
|
||||
After adding a few more books to our shelf, the shelf appears as shown below.
|
||||
|
||||
|
||||
|
||||
|
||||
After adding few more books to our shelf, the shelf appears as shown below.
|
||||
These are a few of the books that I have read within the last year.
|
||||
## Step 9. Make Your Posts Public
|
||||
|
||||
|
||||
|
||||
|
||||
## Step 9. Make posts public
|
||||
|
||||
So far all the posts that we have written are in draft status.
|
||||
To make a draft public, you can either run a command
|
||||
or manually change the draft status in the post to `false`.
|
||||
So far, all the posts that we have written are in draft status (i.e., `draft = true`). To make a draft public, you can run a Hugo CLI command or manually change the draft status in the post's front matter to `false`. Hugo provides a handy command line argument called `undraft` to do this for us:
|
||||
|
||||
```bash
|
||||
$ hugo undraft content/post/good-to-great.md
|
||||
hugo undraft content/post/good-to-great.md
|
||||
```
|
||||
|
||||
Now, you can start the server without the `buildDrafts` option.
|
||||
If we check the front matter of `good-to-great.md` after running this command, we'll notice that Hugo has written the change of draft status to the file:
|
||||
|
||||
```
|
||||
$ hugo server --theme=hugo_theme_robust
|
||||
```toml
|
||||
+++
|
||||
date = "2017-02-19T22:42:53-06:00"
|
||||
draft = false
|
||||
title = "Good to Great Book Review"
|
||||
image = "good-to-great.jpg"
|
||||
+++
|
||||
```
|
||||
|
||||
## Step 10. Integrate Disqus
|
||||
|
||||
Disqus allows you to integrate comments in your static blog. To enable Disqus, you just have to set `disqusShortname` in the config.toml as shown below.
|
||||
Now, we can start the server *without* the `buildDrafts` option.
|
||||
|
||||
```
|
||||
hugo server --theme=hugo_theme_robust
|
||||
```
|
||||
|
||||
## Step 10. Integrate Disqus Comments
|
||||
|
||||
{{% note "Adding Disqus to Your Website" %}}
|
||||
To implement Disqus comments as part of the Quick Start, you'll need to set up a Disqus account. Follow the [Disqus documentation for adding their service to websites](https://help.disqus.com/customer/portal/articles/1257441-adding-disqus-to-your-site).
|
||||
{{% /note %}}
|
||||
|
||||
To enable Disqus on our new site, we only need to update the `disqusShortname` in the config.toml as shown below.
|
||||
|
||||
```toml
|
||||
[Params]
|
||||
Author = "Shekhar Gulati"
|
||||
disqusShortname = <your disqus shortname>
|
||||
@ -475,22 +511,20 @@ Disqus allows you to integrate comments in your static blog. To enable Disqus, y
|
||||
|
||||
Now, commenting will be enabled in your blog.
|
||||
|
||||
|
||||
|
||||
|
||||
## Step 11. Generate website
|
||||
## Step 11. Generate Your Website with `hugo`
|
||||
|
||||
To generate Hugo website source you can use
|
||||
to deploy your website on GitHub pages,
|
||||
first edit `bookshelf/config.toml`, changing the `baseURL` line to:
|
||||
To generate a website that can be deployed to GitHub pages, we first need to change the `baseURL` in our configuration as follows:
|
||||
|
||||
```
|
||||
```toml
|
||||
baseURL = "https://<your GitHub username>.github.io/bookshelf/"
|
||||
```
|
||||
|
||||
Then type the following command.
|
||||
Then type the following command while in the root directory of your Hugo project:
|
||||
|
||||
```bash
|
||||
$ hugo --theme=hugo_theme_robust
|
||||
hugo --theme=hugo_theme_robust
|
||||
```
|
||||
```
|
||||
0 draft content
|
||||
@ -502,72 +536,72 @@ $ hugo --theme=hugo_theme_robust
|
||||
in 17 ms
|
||||
```
|
||||
|
||||
After you run the `hugo` command, a `bookshelf/public` directory
|
||||
will be created containing the generated website source.
|
||||
After you run the `hugo` command, a `bookshelf/public` directory will be created containing the generated website source.
|
||||
|
||||
BTW (in case you tried),
|
||||
the website isn't properly accessible via the `file:///` protocol.
|
||||
## Step 12. Deploy Your Bookshelf Website on GitHub Pages
|
||||
|
||||
## Step 12. Deploy bookshelf on GitHub pages
|
||||
{{% note "GitHub Account" %}}
|
||||
The following step assumes that you have a working familiarity with Git version control and also a GitHub account. A GitHub account is required to leverage Pages, a static website hosting service that is complimentary for GitHub users. [Setting up a GitHub account is free](https://github.com/join).
|
||||
{{% /note %}}
|
||||
|
||||
Let's version control your bookshelf:
|
||||
First, let's set up Git version control for your bookshelf website and include a `.gitignore` file to prevent tracking of the `public` and `themes` directories. From within your root project directory, you can use the following one-liner:
|
||||
|
||||
{{% input "set-up-git.sh" %}}
|
||||
```bash
|
||||
git init && echo "/public/" >> .gitignore && echo "/themes/" >> .gitignore && git add . && git commit -m "Initial commit"
|
||||
```
|
||||
{{% /input %}}
|
||||
|
||||
Now the Git repositories under `bookshelf/themes` won't conflict with your `bookshelf` repository, and neither will a Git repository in `bookshelf/public`.
|
||||
|
||||
Create a new repository on GitHub named `bookshelf`. Do not create a `README.md`. Once you have created a new repository, change into the `public` directory within `bookshelf` and create a *new* Git repository and add your new GitHub repository as the remote. Keep in mind that you will need to replace `<github-username>` with your actual username and repository URL:
|
||||
|
||||
```bash
|
||||
$ git init
|
||||
$ echo "/public/" >> .gitignore
|
||||
$ echo "/themes/" >> .gitignore
|
||||
$ git add --all
|
||||
$ git commit -m "Initial commit"
|
||||
cd public
|
||||
git init
|
||||
git remote add origin git@github.com:<github-username>/bookshelf.git
|
||||
git push -u origin master
|
||||
```
|
||||
|
||||
Now the Git repositories under `bookshelf/themes`
|
||||
won't conflict with your `bookshelf` repository,
|
||||
and neither will a Git repository in `bookshelf/public`.
|
||||
Once everything in `public` has been pushed to your new GitHub repository, navigate to the repository's settings and scroll to the "GitHub Pages" section. Select "master branch" from the Source dropdown and then click the **Save** button.
|
||||
|
||||
Create a new repository on GitHub named `bookshelf` (without a README).
|
||||
Once that's done, create a new Git repository on your local system
|
||||
in `bookshelf/public` and add remote:
|
||||
|
||||
|
||||
In a couple of minutes, your website will be live at `https://<github-username>.github.io/bookshelf/`.
|
||||
|
||||
Now, from within your project's root directory, you can regenerate and update your published website with the following commands. Note that changing your Hugo theme is as simple as changing the `theme` flag appended to the `hugo` build command:
|
||||
|
||||
```bash
|
||||
$ cd public
|
||||
$ git init
|
||||
$ git remote add origin git@github.com:<github-username>/bookshelf.git
|
||||
```
|
||||
|
||||
There, create and check out a new branch `gh-pages`.
|
||||
|
||||
```bash
|
||||
$ git checkout -b gh-pages
|
||||
Switched to a new branch 'gh-pages'
|
||||
```
|
||||
|
||||
Add all the files (within `bookshelf/public`) to the index,
|
||||
commit them, and push the changes to GitHub.
|
||||
|
||||
```bash
|
||||
$ git add --all
|
||||
$ git commit -m "bookshelf added"
|
||||
$ git push -f origin gh-pages
|
||||
```
|
||||
|
||||
In couple of minutes, your website will be live
|
||||
at `https://<github-username>.github.io/bookshelf/`.
|
||||
|
||||
Anytime, you can regenerate your site with:
|
||||
|
||||
```bash
|
||||
$ (cd ..; hugo --theme=hugo_theme_robust)
|
||||
$ git add --all
|
||||
$ git commit -m "<some change message>"
|
||||
$ git push -f origin gh-pages
|
||||
hugo --theme=hugo_theme_robust
|
||||
cd public
|
||||
git add --all
|
||||
git commit -m "<some change message>"
|
||||
git push
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
This quick start was originally written by [Shekhar Gulati](https://twitter.com/shekhargulati) in his [52 Technologies in 2016](https://github.com/shekhargulati/52-technologies-in-2016) blog series.
|
||||
## Video: Hugo Website in 2 Minutes
|
||||
|
||||
{{% youtube w7Ft2ymGmfc %}}
|
||||
|
||||
[archetypes]: /content-management/archetypes/
|
||||
[bookurl]: https://www.amazon.com/Good-Great-Some-Companies-Others/dp/0066620996/
|
||||
[bleaktheme]: http://themes.gohugo.io/bleak/
|
||||
[configuration]: /getting-started/configuration/
|
||||
[createtheme]: /themes/creating-a-theme/
|
||||
[datatemplates]: /templates/data-templates/
|
||||
[frontmatter]: /content-management/front-matter/
|
||||
[hugodirectories]: /getting-started/directory-structure/
|
||||
[installhugo]: /getting-started/install-hugo/
|
||||
[listsectiontemplates]: /templates/list-and-section-templates/
|
||||
[partialtemplates]: /templates/partial-templates/
|
||||
[quickinstall]: /getting-started/install-hugo/#quick-install
|
||||
[releases]: https://github.com/spf13/hugo/releases
|
||||
[themes]: /themes/
|
||||
[robusttheme]: https://github.com/dim0627/hugo_theme_robust
|
||||
[section]: /content-management/content-sections/
|
||||
[shortcodetemplates]: /templates/shortcode-templates/
|
||||
[sitemenu]: /content-management/menus/
|
||||
[templating]: /templates/
|
||||
[themessection]: /themes/
|
||||
[themes]: /themes/
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Articles
|
||||
linktitle: Articles
|
||||
title: Press and Articles
|
||||
linktitle: Press and Articles
|
||||
description: A list of articles, blog posts, or tutorials where Hugo is featured.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
@ -18,8 +18,6 @@ notesforauthors: "If adding an item to the articles list, be sure to follow the
|
||||
Know of a post, article, or tutorial on Hugo? [Please add it to this list](https://github.com/spf13/hugo/edit/master/docs/content/community/press.md).
|
||||
{{% /note %}}
|
||||
|
||||
## Press and Articles
|
||||
|
||||
Hugo has been featured in the following Blog Posts, Press, and Media.
|
||||
|
||||
| Title | Author | Date |
|
||||
142
content/news/press-and-articles.md
Normal file
142
content/news/press-and-articles.md
Normal file
@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Press and Articles
|
||||
linktitle: Press and Articles
|
||||
description: A list of articles, blog posts, or tutorials where Hugo is featured.
|
||||
date: 2017-02-01
|
||||
publishdate: 2017-02-01
|
||||
lastmod: 2017-02-01
|
||||
tags: [articles, tutorials, press]
|
||||
categories: [news and articles]
|
||||
weight: 30
|
||||
draft: false
|
||||
aliases: [/community/press/]
|
||||
toc: false
|
||||
notesforauthors: "If adding an item to the articles list, be sure to follow the format of '| [Linked Title]() | Author Name | YYYY-MM-DD |'."
|
||||
---
|
||||
|
||||
{{% note "Help Keep This List Up to Date" %}}
|
||||
Know of a post, article, or tutorial on Hugo? [Please add it to this list](https://github.com/spf13/hugo/edit/master/docs/content/community/press-and-articles.md).
|
||||
{{% /note %}}
|
||||
|
||||
Hugo has been featured in the following Blog Posts, Press, and Media.
|
||||
|
||||
| Title | Author | Date |
|
||||
| ----- | ------ | -----: |
|
||||
| [Build a Hugo site using Cloud9 IDE and host on App Engine](https://loyall.ch/lab/2017/01/build-a-static-website-with-cloud9-hugo-and-app-engine/)| Pascal Aubort | 2017-02-05 |
|
||||
| [How to use Firebase to host a Hugo site](https://www.m0d3rnc0ad.com/post/static-site-firebase/) | Andrew Cuga | 2017-02-04 |
|
||||
| [A publishing workflow for teams using static site generators](https://www.keybits.net/post/publishing-workflow-for-teams-using-static-site-generators/) | Tom Atkins | 2017-01-02 |
|
||||
| [How To Dynamically Use Google Fonts In A Hugo Website](https://stoned.io/web-development/hugo/How-To-Dynamically-Use-Google-Fonts-In-A-Hugo-Website/) | Hash Borgir | 2016-10-27 |
|
||||
| [Embedding Facebook In A Hugo Template](https://stoned.io/web-development/hugo/Embedding-Facebook-In-A-Hugo-Template/) | Hash Borgir | 2016-10-22 |
|
||||
| [通过 Gitlab-cl 将 Hugo blog 自动部署至 GitHub](https://zetaoyang.github.io/post/2016/10/17/gitlab-cl.html) <small>(Chinese, Continious integration)</small> | Zetao Yang | 2016-10-17 |
|
||||
| [A Step-by-Step Guide: Hugo on Netlify](https://www.netlify.com/blog/2016/09/21/a-step-by-step-guide-hugo-on-netlify/) | Eli Williamson | 2016-09-21 |
|
||||
| [Building our site: From Django & Wordpress to a static generator (Part I)](https://tryolabs.com/blog/2016/09/20/building-our-site-django-wordpress-to-static-part-i/) | Alan Descoins | 20 Sep 2016 |
|
||||
| [Webseitenmaschine - Statische Websites mit Hugo erzeugen](http://www.heise.de/ct/ausgabe/2016-12-Statische-Websites-mit-Hugo-erzeugen-3211704.html) <small>(German, $)</small> | Christian Helmbold | 2016-05-27 |
|
||||
| [Cómo hacer sitios web estáticos con Hugo y Go - Platzi](https://www.youtube.com/watch?v=qaXXpdiCHXE) <small>(Video tutorial)</small> | Verónica López | 2016-04-06 |
|
||||
| [CDNOverview: A CDN comparison site made with Hugo](https://www.cloakfusion.com/cdnoverview-cdn-comparison-site-made-hugo/) | Thijs de Zoete | 2016-02-23 |
|
||||
| [Hugo: A Modern WebSite Engine That Just Works](https://github.com/shekhargulati/52-technologies-in-2016/blob/master/07-hugo/README.md) | Shekhar Gulati | 2016-02-14 |
|
||||
| [Minify Hugo Generated HTML](http://ratson.name/blog/minify-hugo-generated-html/) | Ratson | 2016-02-02 |
|
||||
| [Static site generators: el futuro de las webs estáticas<br>(Hugo, Jekyll, Flask y otros)](http://sitelabs.es/static-site-generators-futuro-las-webs-estaticas/) | Eneko Sarasola | 2016-01-09 |
|
||||
| [Writing a Lambda Function for Hugo](https://blog.jolexa.net/post/writing-a-lambda-function-for-hugo/) | Jeremy Olexa | 2016-01-01 |
|
||||
| [Ein Blog mit Hugo erstellen - Tutorial](http://privat.albicker.org/tags/hugo.html) <small>(Deutsch/German)</small> | Bernhard Albicker | 30 Dec 2015 |
|
||||
| [How to host Hugo static website generator on AWS Lambda](http://bezdelev.com/post/hugo-aws-lambda-static-website/) | Ilya Bezdelev | 2015-12-15 |
|
||||
| [Migrating from Pelican to Hugo](http://www.softinio.com/post/migrating-from-pelican-to-hugo/) | Salar Rahmanian | 2015-11-29 |
|
||||
| [Hugo + Uberspace + Git = Hubergit — eine Anleitung (German)](https://harms-ensink.name/post/hubergit/) | Christoph Harms-Ensink | 2015-11-24 |
|
||||
| [Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo](http://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/) | Mathias Biilmann Christensen | 2015-11-16 |
|
||||
| [How To Deploy a Hugo Site to Production with Git Hooks on Ubuntu 14.04](https://www.digitalocean.com/community/tutorials/how-to-deploy-a-hugo-site-to-production-with-git-hooks-on-ubuntu-14-04) | Justin Ellingwood | 2015-11-12 |
|
||||
| [How To Install and Use Hugo, a Static Site Generator, on Ubuntu 14.04](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-hugo-a-static-site-generator-on-ubuntu-14-04) | Justin Ellingwood | 2015-11-09 |
|
||||
| [Switching from Wordpress to Hugo](http://justinfx.com/2015/11/08/switching-from-wordpress-to-hugo/) | Justin Israel | 2015-11-08 |
|
||||
| [Hands-on Experience with Hugo as a Static Site Generator](http://usersnap.com/blog/hands-on-experience-with-hugo-static-site-generator/) | Thomas Peham | 2015 -10-15 |
|
||||
| [Statische Webseites mit Hugo erstellen/Vortrag mit Foliensatz (deutsch)](http://sfd.koelnerlinuxtreffen.de/2015/HaraldWeidner/) | Harald Weidner | 2015-09-19 |
|
||||
| [Moving from WordPress to Hugo](http://abhipandey.com/2015/09/moving-to-hugo/) | Abhishek Pandey | 2015-09-15 |
|
||||
| [<span lang="zh-CN">通过webhook将Hugo自动部署至GitHub Pages和GitCafe Pages</span> <small>(Automated deployment)</small>](http://blog.coderzh.com/2015/09/13/use-webhook-automated-deploy-hugo/) | CoderZh | 2015-09-13 |
|
||||
| [<span lang="zh-CN">使用hugo搭建个人博客站点</span> <small>(Using Hugo to build a personal blog site)</small>](http://blog.coderzh.com/2015/08/29/hugo/) | CoderZh | 2015-08-29 |
|
||||
| [Good-Bye Wordpress, Hello Hugo!](http://blog.arminhanisch.de/2015/08/blog-migration-zu-hugo/) <small>(German)</small> | Armin Hanisch | 2015-08-18 |
|
||||
| [Static Site E-Commerce: Integrating Snipcart with Hugo](https://snipcart.com/blog/snipcart-hugo-integration) | Francis Tremblay | 2015-08-13 |
|
||||
| [Générer votre site web statique avec Hugo <small>(Generate your static site with Hugo)<small>](http://www.linux-pratique.com/?p=191) | Benoît Benedetti | 2015-06-26 |
|
||||
| [<span lang="ja">Hugo向けの新しいテーマを作った</span> <small>(I created a new theme for Hugo)<small>](http://yet.unresolved.xyz/blog/2015/06/20/making-new-theme-robust-for-hugo/) | Daisuke Tsuji | 2015-06-20 |
|
||||
| [Hugo - Gerando um site com conteúdo estático. (Portuguese Brazil)](http://blog.ffrizzo.com/posts/hugo/) | Fabiano Frizzo | 2015-06-02 |
|
||||
| [An Introduction to Static Site Generators](http://davidwalsh.name/introduction-static-site-generators) | Eduardo Bouças | 2015-05-20 |
|
||||
| [Hugo Still Rules](http://cheekycoder.com/2015/05/hugo-still-rules/) | Cheeky Coder | 2015-05-18 |
|
||||
| [hugo - Static Site Generator](http://gscacco.github.io/post/hugo/) | G Scaccoio | 2015-05-04 |
|
||||
| [<span lang="ja">WindowsでHugoを使う</span>](http://ureta.net/2015/05/hugo-on-windows/) | <span lang="ja">うれ太郎</span> | 2015-05-01 |
|
||||
| [<span lang="ja">Hugoのshortcodesを用いてサイトにスライドなどを埋め込む</span>](http://blog.yucchiy.com/2015/04/29/hugo-shortcode/) | Yucchiy | 2015-04-29 |
|
||||
| [<span lang="ja">HugoとCircleCIでGitHub PagesにBlogを公開してみたら超簡単だった</span>](http://hori-ryota.github.io/blog/create-blog-with-hugo-and-circleci/) | Hori Ryota | 2015-04-17 |
|
||||
| [How to build a mobile friendly website Part 2 - Ok to Go](http://jbrodriguez.io/mobile-friendly-website-2/) | Juan B. Rodriguez | 2015-04-13 |
|
||||
| [10 Best Static Site Generators](http://beebom.com/2015/04/best-static-site-generators) | Aniruddha Mysore | 2015-04-06 |
|
||||
| [Goodbye WordPress; Hello Hugo](http://willwarren.com/2015/04/05/goodbye-wordpress-hello-hugo/) | Will Warren | 2015-04-05 |
|
||||
| [Static Websites with Hugo on Google Cloud Storage](http://www.moxie.io/post/static-websites-with-hugo-on-google-cloud-storage/) | Moxie Input/Output | 2015-04-02 |
|
||||
| [De nuevo iniciando un blog](http://alvarolizama.net/blog/denuevo-iniciando-un-blog/) | Alvaro Lizama | 2015-03-29 |
|
||||
| [We moved our blog from Posthaven to Hugo after only three posts. Why?](http://blog.hypriot.com/post/moved-from-posthaven-to-hugo/) | Hypriot | 2015-03-27 |
|
||||
| [Hugo is cool](http://tnt.wicast.tk/2015/03/23/hugo-is-cool/) <small>(<span lang="zh-CN">中文</span> Chinese)</small> | wicast | 2015-03-23 |
|
||||
| [Top Static Site Generators in 2015](http://superdevresources.com/static-site-generators-2015/) | Kanishk Kunal | 2015-03-12 |
|
||||
| [Moving to Hugo](http://abiosoft.com/moving-to-hugo/) | Abiola Ibrahim | 2015-03-08 |
|
||||
| [<span lang="ja">Hugoで試行錯誤する</span> - log](http://deprode.net/log/logs/first/) | Deprode | 2015-02-28 |
|
||||
| [Migrating a blog (yes, this one!) from Wordpress to Hugo](http://justindunham.net/migrating-from-wordpress-to-hugo/) | Justin Dunham | 2015-02-13 |
|
||||
| [<span lang="ja">blogをoctopressからHugoに乗り換えたメモ</span>](http://blog.jigyakkuma.org/2015/02/11/hugo/) | jigyakkuma | 2015-02-11 |
|
||||
| [<span lang="ja">Hugoでブログをつくった</span>](http://porgy13.github.io/post/new-hugo-blog/) | porgy13 | 2015-02-07 |
|
||||
| [<span lang="ja">Hugoにブログを移行した</span>](http://keichi.net/post/first/) | Keichi Takahashi | 2015-02-04 |
|
||||
| [<span lang="zh-CN">Hugo静态网站生成器中文教程</span>](http://nanshu.wang/post/2015-01-31/) | Nanshu Wang | 2015-01-31 |
|
||||
| [<span lang="ja">Hugo + Github Pages + Wercker CI = ¥0（無料）<br>でコマンド 1 発（自動化）でサイト<br>・ブログを公開・運営・分析・収益化</span>](http://qiita.com/yoheimuta/items/8a619cac356bed89a4c9) | Yohei Yoshimuta | 2015-01-31 |
|
||||
| [Running Hugo websites on anynines](http://blog.anynines.com/running-hugo-websites-on-anynines/) | Julian Weber | 2015-01-30 |
|
||||
| [MiddlemanからHugoへ移行した](http://re-dzine.net/2015/01/hugo/) | Haruki Konishi | 2015-01-21 |
|
||||
| [WordPress から Hugo に乗り換えました](http://rakuishi.com/archives/wordpress-to-hugo/) | rakuishi | 2015-01-20 |
|
||||
| [HUGOを使ってサイトを立ち上げる方法](http://qiita.com/syui/items/869538099551f24acbbf) | Syui | 2015-01-17 |
|
||||
| [<span lang="ja">Jekyllが許されるのは小学生までだよね</span>](http://t32k.me/mol/log/hugo/) | Ishimoto Koji | 2015-01-16 |
|
||||
| [Getting started with Hugo](http://anthonyfok.org/post/getting-started-with-hugo/) | Anthony Fok | 2015-01-12 |
|
||||
| [<span lang="zh-CN">把这个博客静态化了</span> <small>(Migrate to Hugo)</small>](http://lich-eng.com/2015/01/03/migrate-to-hugo/)| Li Cheng | 2015-01-03 |
|
||||
| [My Hugo Experiment](http://tilde.club/~jbaty/2014/12/2014-12-31-my-hugo-experiment/) | Jack Baty | 2014-12-31 |
|
||||
| [Porting my blog with Hugo](http://blog.srackham.com/posts/porting-my-blog-with-hugo/) | Stuart Rackham | 2014-12-30 |
|
||||
| [Hugoを使ってみたときのメモ](http://machortz.github.io/posts/usinghugo/) | Machortz | 2014-12-29 |
|
||||
| [OctopressからHugoへ移行した](http://deeeet.com/writing/2014/12/25/hugo/) | Taichi Nakashima | 2014-12-25 |
|
||||
| [Hugo로 Github에 블로그 호스팅하기](http://cdpython.github.io/post/go/hugo/hugo-github/) | CD Python | 2014-12-25 |
|
||||
| [Migrating to Hugo From Octopress](http://nathanleclaire.com/blog/2014/12/22/migrating-to-hugo-from-octopress/) | Nathan LeClaire | 2014-12-22 |
|
||||
| [Dynamic Pages with GoHugo.io](http://cyrillschumacher.com/2014/12/21/dynamic-pages-with-gohugo.io/) | Cyrill Schumacher | 2014-12-21 |
|
||||
| [6 Static Blog Generators That Aren’t Jekyll](http://www.sitepoint.com/6-static-blog-generators-arent-jekyll/) | David Turnbull | 2014-12-08 |
|
||||
| [Travel Blogging Setup](http://www.stou.dk/2014/11/travel-blogging-setup/) | Rasmus Stougaard | 2014-11-23 |
|
||||
| [Hosting A Hugo Website Behind Nginx](http://www.bigbeeconsultants.co.uk/blog/hosting-hugo-website-behind-nginx) | Rick Beton | 2014-11-20 |
|
||||
| [<span lang="zh-CN">使用Hugo搭建免费个人Blog</span> <small>(How to use Hugo)</small>](http://ulricqin.com/post/how-to-use-hugo/) | Ulric Qin <span lang="zh-CN">秦晓辉</span> | 2014-11-11 |
|
||||
| [Built in Speed and Built for Speed by Hugo](http://cheekycoder.com/2014/10/built-for-speed-by-hugo/) | Cheeky Coder | 2014-10-30 |
|
||||
| [hugo, syncthing](http://fredix.ovh/2014/10/hugo-syncthing/) | Frédéric Logier | 13 Oct 2014 |
|
||||
| [Hugo para crear sitios web estáticos](http://www.webbizarro.com/noticias/1076/hugo-para-crear-sitios-web-estaticos/) | Web Bizarro | 19 Aug 2014 |
|
||||
| [Going with hugo](http://www.markuseliasson.se/article/going-with-hugo/) | Markus Eliasson | 2014-08-18 |
|
||||
| [Benchmarking Jekyll, Hugo and Wintersmith](http://fredrikloch.me/post/2014-08-12-Jekyll-and-its-alternatives-from-a-site-generation-point-of-view/) | Fredrik Loch | 2014-08-12 |
|
||||
| [Goodbye Octopress, Hello Hugo!](http://andreimihu.com/blog/2014/08/11/goodbye-octopress-hello-hugo/) | Andrei Mihu | 2014-08-11 |
|
||||
| [Beautiful sites for Open Source projects](http://beautifulopen.com/2014/08/09/hugo/) | Beautiful Open | 2014-08-09 |
|
||||
| [Hugo: Beyond the Defaults](http://npf.io/2014/08/hugo-beyond-the-defaults/) | Nate Finch | 2014-08-08 |
|
||||
| [First Impressions of Hugo](https://peteraba.com/blog/first-impressions-of-hugo/) | Peter Aba | 2014-06-06 |
|
||||
| [New Site Workflow](http://vurt.co.uk/post/new_website/) | Giles Paterson | 2014-08-05 |
|
||||
| [How I Learned to Stop Worrying and Love the (Static) Web](http://cognition.ca/post/about-hugo/) | Joshua McKenty | 2014-08-4 |
|
||||
| [Hugo - Static Site Generator](http://kenwoo.io/blog/hugo---static-site-generator/) | Kenny Woo | 2014-08-03 |
|
||||
| [Hugo Is Friggin' Awesome](http://npf.io/2014/08/hugo-is-awesome/) | Nate Finch | 2014-08-01 |
|
||||
| [<span lang="zh-CN">再次搬家</span> <small>(Move from WordPress to Hugo)</small>](http://www.chingli.com/misc/move-from-wordpress-to-hugo/) | <span lang="zh-CN">青砾</span> (chingli) | 2014-07-12 |
|
||||
| [Embedding Gists in Hugo](http://danmux.com/posts/embedded_gists/) | Dan Mull | 2014-07-5 |
|
||||
| [An Introduction To Hugo](http://www.cirrushosting.com/web-hosting-blog/an-introduction-to-hugo/) | Dan Silber | 2014-07-01 |
|
||||
| [Moving to Hugo](http://danmux.com/posts/hugo_based_blog/) | Dan Mull | 2014-05-29 |
|
||||
| [<span lang="zh-CN">开源之静态站点生成器排行榜</span><br><small>(Leaderboard of open-source static website generators)</small>](http://code.csdn.net/news/2819909) | CSDN.net | 2014-05-23 |
|
||||
| [How I deploy this site using Fabric](http://carlorat.me/quote/fabric/) | Carlo Ratam | 2014-05-21 |
|
||||
| [Finally, a satisfying and effective blog setup](http://michaelwhatcott.com/now-powered-by-hugo/) | Michael Whatcott | 2014-05-20 |
|
||||
| [Hugo from scratch](http://zackofalltrades.com/notes/2014/05/hugo-from-scratch/) | Zack Williams | 2014-05-18 |
|
||||
| [Why I switched away from Jekyll](http://www.jakejanuzelli.com/why-I-switched-away-from-jekyll/) | Jake Januzelli | 2014-05-10 |
|
||||
| [Welcome our new blog](http://blog.ninya.io/posts/welcome-our-new-blog/) | Ninya.io | 2014-04-11 |
|
||||
| [Mission Not Accomplished](http://johnsto.co.uk/blog/mission-not-accomplished/) | Dave Johnston | 2014-04-03 |
|
||||
| [Hugo - A Static Site Builder in Go](http://deepfriedcode.com/post/hugo/) | Deep Fried Code | 2014-03-30 |
|
||||
| [Adventures in Angular Podcast](http://devchat.tv/adventures-in-angular/003-aia-gdes) | Matias Niemela | 2014-03-28 |
|
||||
| [Hugo](http://bra.am/post/hugo/) | bra.am | 2014-03-23 |
|
||||
| [Converting Blogger To Markdown](http://trishagee.github.io/project/atom-to-hugo/) | Trisha Gee | 2014-03-20 |
|
||||
| [Moving to Hugo Static Web Pages](http://tepid.org/tech/hugo-web/) | Tobias Weingartner | 2014-03-16 |
|
||||
| [Hugo and GitHub Pages](http://spencerlyon.com/blog/2014/creating-the-site/) | Spencer Lyon | 2014-03-15 |
|
||||
| [New Blog Engine: Hugo](https://blog.afoolishmanifesto.com/posts/hugo/) | fREW Schmidt | 2014-03-15 |
|
||||
| [Hugo + gulp.js = Huggle](http://ktmud.github.io/huggle/en/intro/) ([English](http://ktmud.github.io/huggle/en/intro/), [<span lang="zh-CN">中文</span>](http://ktmud.github.io/huggle/zh/intro/)) | Jesse Yang <span lang="zh-CN">杨建超</span> | 2014-03-08 |
|
||||
| [Powered by Hugo](http://kieranhealy.org/blog/archives/2014/02/24/powered-by-hugo/) | Kieran Healy | 2014-02-24 |
|
||||
| [<span lang="ja">静的サイトを素早く構築するために<br>GoLangで作られたジェネレータHugo</span>](http://hamasyou.com/blog/2014/02/21/hugo/)| <div lang="ja" style="line-height: 1.1;">Shogo Hamada<br>濱田章吾</div> | 2014-02-21 |
|
||||
| [Latest Roundup of Useful Tools For Developers](http://codegeekz.com/latest-roundup-of-useful-tools-for-developers/) | CodeGeekz | 2014-02-13 |
|
||||
| [Hugo: Static Site Generator written in Go](http://www.braveterry.com/2014/02/06/hugo-static-site-generator-written-in-go/) | Brave Terry | 2014-02-06 |
|
||||
| [10 Useful HTML5 Tools for Web Designers and Developers](http://designdizzy.com/10-useful-html5-tools-for-web-designers-and-developers/) | Design Dizzy | 2014-02-04 |
|
||||
| [Hugo – Fast, Flexible Static Site Generator](http://cube3x.com/hugo-fast-flexible-static-site-generator/) | Joby Joseph | 2014-01-18 |
|
||||
| [Hugo: A new way to build static website](http://www.w3update.com/opensource/hugo-a-new-way-to-build-static-website.html) | w3update | 2014-01-17 |
|
||||
| [Xaprb now uses Hugo](http://xaprb.com/blog/2014/01/15/using-hugo/) | Baron Schwartz | 2014-01-15 |
|
||||
| [New jQuery Plugins And Resources That Web Designers Need](http://www.designyourway.net/blog/resources/new-jquery-plugins-and-resources-that-web-designers-need/) | Design Your Way | 2014-01-01 |
|
||||
| [On Blog Construction](http://alexla.sh/post/on-blog-construction/) | Alexander Lash | 2013-12-27 |
|
||||
| [Hugo](http://onethingwell.org/post/69070926608/hugo) | One Thing Well | 2013-12-05 |
|
||||
| [In Praise Of Hugo](http://sound-guru.com/blog/post/hello-world/) | sound-guru.com | 2013-10-19 |
|
||||
| [Hosting a blog on S3 and Cloudfront](http://www.danesparza.net/2013/07/hosting-a-blog-on-s3-and-cloudfront/) | Dan Esparza | 2013-07-24 |
|
||||
@ -11,7 +11,7 @@ gettingstarted:
|
||||
url: "getting-started"
|
||||
haschildren: true
|
||||
sortsubpagesby: "weight"
|
||||
desc: "Quick start, installation guides, configuration, and basic usage for local development"
|
||||
desc: "Quick start, cross-platform installation, configuration, basic usage, and directory structure"
|
||||
# projectorganization:
|
||||
# order: 3
|
||||
# title: "Project Organization"
|
||||
@ -88,14 +88,14 @@ troubleshooting:
|
||||
url: "troubleshooting"
|
||||
haschildren: true
|
||||
sortsubpagesby: "weight"
|
||||
desc: "Known issues, workarounds, and FAQs pulled from the Hugo discussion forum"
|
||||
newsandarticles:
|
||||
desc: "Known issues and workarounds, as well as FAQs pulled from the Hugo discussion forum"
|
||||
news:
|
||||
order: 14
|
||||
title: "News and Articles"
|
||||
url: "news-and-articles"
|
||||
title: "News"
|
||||
url: "news"
|
||||
haschildren: true
|
||||
sortsubpagesby: "weight"
|
||||
desc: "Articles featuring Hugo, as well as news, updates, and release notes for the project"
|
||||
desc: "Articles featuring Hugo, as well as updates and release notes for the project"
|
||||
siteshowcase:
|
||||
order: 15
|
||||
title: "Site Showcase"
|
||||
|
||||
2
static/css/style.min.css
vendored
2
static/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
BIN
static/images/quickstart/gh-pages-ui.png
Normal file
BIN
static/images/quickstart/gh-pages-ui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
6
static/js/script.min.js
vendored
6
static/js/script.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
{{$kind := .Kind}}
|
||||
{{if eq $kind "section"}}
|
||||
{{$section := replace (humanize .Section | title) "And" "and"}}
|
||||
<h2 class="section-heading">In <em>{{$section }}</em>:</h2>
|
||||
<h2 id="contents" class="contents-list-heading">Contents:</h2>
|
||||
{{end}}
|
||||
{{range .Data.Pages}}
|
||||
<a href="{{.Permalink}}">
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
$('document').ready(function() {
|
||||
$('.body-copy a[href$=".pdf"]').append('<i class="icon-pdf"></i>');
|
||||
$('.body-copy > h2:not(.section-heading),.body-copy > h3').each(function() {
|
||||
var id = $(this).attr('id'),
|
||||
baseurl = window.location.origin,
|
||||
path = window.location.pathname,
|
||||
fullurl = `${baseurl}${path}#${id}`;
|
||||
$(this).append(`<a class="smooth-scroll heading-link" title="Copy heading link to clipboard" data-clipboard-text="${fullurl}" href="#${id}"><i class="icon-link"></i></a>`);
|
||||
var id = $(this).attr('id');
|
||||
// var baseurl = window.location.origin,
|
||||
// path = window.location.pathname,
|
||||
// fullurl = `${baseurl}${path}#${id}`;
|
||||
$(this).prepend(`<a class="smooth-scroll heading-link" href="#${id}"><i class="icon-link"></i></a>`);
|
||||
});
|
||||
});
|
||||
@ -351,7 +351,7 @@ hljs.registerLanguage("bash", function(e) {
|
||||
var t = { cN: "variable", v: [{ b: /\$[\w\d#@][\w\d_]*/ }, { b: /\$\{(.*?)}/ }] },
|
||||
s = { cN: "string", b: /"/, e: /"/, c: [e.BE, t, { cN: "variable", b: /\$\(/, e: /\)/, c: [e.BE] }] },
|
||||
a = { cN: "string", b: /'/, e: /'/ };
|
||||
return { aliases: ["sh", "zsh", "git"], l: /-?[a-z\._]+/, k: { keyword: "hugo if \| then else elif fi for while in do done case esac function yoursite.com", literal: "true -b branch false posts events authors", built_in: "break cd checkout continue eval exec exit export getopts hash pwd readonly new return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which yoursite zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp", _: "-ne -eq -lt -gt -f -d -e -s -l -a" }, c: [{ cN: "meta", b: /^#![^\n]+sh\s*$/, r: 10 }, { cN: "function", b: /\w[\w\d_]*\s*\(\s*\)\s*\{/, rB: !0, c: [e.inherit(e.TM, { b: /\w[\w\d_]*/ })], r: 0 }, e.HCM, s, a, t] }
|
||||
return { aliases: ["sh", "zsh", "git"], l: /-?[a-z\._]+/, k: { keyword: "hugo if \| then else elif fi for while in do done case esac function yoursite.com", literal: "true -b branch false posts events authors", built_in: "draft break cd checkout continue eval exec exit export getopts hash pwd readonly new return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which yoursite zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp", _: "-ne -eq -lt -gt -f -d -e -s -l -a" }, c: [{ cN: "meta", b: /^#![^\n]+sh\s*$/, r: 10 }, { cN: "function", b: /\w[\w\d_]*\s*\(\s*\)\s*\{/, rB: !0, c: [e.inherit(e.TM, { b: /\w[\w\d_]*/ })], r: 0 }, e.HCM, s, a, t] }
|
||||
});
|
||||
hljs.registerLanguage("http", function(e) {
|
||||
var t = "HTTP/[0-9\\.]+";
|
||||
|
||||
@ -44,6 +44,13 @@ h3 {
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
&.contents-list-heading {
|
||||
text-transform:uppercase;
|
||||
color:$hugo-gray;
|
||||
em {
|
||||
font-style:normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -68,4 +75,8 @@ h4 {
|
||||
a.submenu-item-link.functions {
|
||||
font-family: $base-font-family;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 3px double $base-font-color;
|
||||
}
|
||||
@ -82,60 +82,18 @@ a.tooltip {
|
||||
a.heading-link {
|
||||
color: lighten($base-font-color, 50%);
|
||||
font-size: .8em;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
display: inline;
|
||||
top: -.1em;
|
||||
right: 0px;
|
||||
top: .3em;
|
||||
right:0px;
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
@include MQ(M){
|
||||
left:-1.5em;
|
||||
}
|
||||
&:hover {
|
||||
color: $default-anchor-underline-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* '' */
|
||||
|
||||
// .body-copy {
|
||||
// a {
|
||||
// text-decoration: none;
|
||||
// color: $default-anchor-color;
|
||||
// display: inline-block;
|
||||
// outline: none;
|
||||
// position: relative;
|
||||
// transition: color 0.3s ease;
|
||||
// perspective: 1800px;
|
||||
// &:hover {
|
||||
// color: $hugo-white;
|
||||
// }
|
||||
// &::before,
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: -2px;
|
||||
// padding: 0 2px;
|
||||
// z-index: -1;
|
||||
// box-sizing: content-box;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// content: '';
|
||||
// }
|
||||
// &::before {
|
||||
// background-color: $default-anchor-underline-color;
|
||||
// transition: transform 0.2s;
|
||||
// transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
// transform: rotateX(90deg);
|
||||
// transform-origin: 50% 100%;
|
||||
// }
|
||||
// &:hover::before,
|
||||
// &:focus::before {
|
||||
// transform: rotateX(0);
|
||||
// }
|
||||
// &::after {
|
||||
// border-bottom: 1px solid $default-anchor-underline-color;
|
||||
// }
|
||||
// }
|
||||
// //heading links are added on the client (see pipeline/js/scripts/add-icons-to-external-links-and-pdfs-anchors.js)
|
||||
// }
|
||||
|
||||
@ -12,6 +12,9 @@ pre {
|
||||
padding: 0px;
|
||||
margin: .5em 0px 32px 0px;
|
||||
overflow: auto;
|
||||
& > code {
|
||||
color:$hugo-white;
|
||||
}
|
||||
}
|
||||
|
||||
.body-copy {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user