« Debugging Your Hugo Website
  
Hugo’s Markup Languages »

Hugo Source Files, Destination Files, and Pretty URLs[1]

HIDDEN[1]

Page contents

News

2022-July-3  As of today, this article has been on the web for 3 years.🎂🎂🎂

Source file ⇝ destination file ⇝ URL

When you build a website with the hugo command, the files and directories in the static/[2] directory are simply copied to the public/[3] directory. A non-static file is processed by hugo and its destination is determined by configuration settings, layout files, the file’s file extension, and the file’s front matter.

The table below shows how some of the TGIH[4] source files are transformed from source to destination to URL (viewable in a web browser after deployment). Some of the TGIH source files are listed in step 4.1 Explore the TGIH directory in Infinite Ink’s Hugo Tutorial.

source in TGIH/destination in
TGIH/public/
URL (if baseURL
is ii.com/)

static/images/go-
logo_black.png

images/go-
logo_black.png

ii.com/images/go-
logo_black.png

assets/style.scss

style.css

ii.com/style.css

content/about.md

about/index.html

ii.com/about/

content/articles/one.md

articles/one/index.html

ii.com/articles/one/

The last two URLs in the URL column above, which are bolded, are called pretty URLs[5] because they do not end with a file extension (.aspx, .cgi, .css, .htm, .html, .mhtml, .php, .png, .shtml, .xhtml, .xml, etc.).

References

See also

Endnotes


1. Thanks to an AsciiDoc include directive, a variation of this article is also in Infinite Ink’s Hugo Tutorial in step 17.4.
2. In Hugo, the static directory or directories can be specified with the staticDir parameter in a config file. The default is a single directory named static.
3. In Hugo, the name of the public directory can be specified with the publishDir parameter in a config file or with the hugo CLI flag -d (which is equivalent to -⁠-⁠destination).
4. The website created in Infinite Ink’s Hugo Tutorial uses a project root directory named TGIH (for Themeless & Gitless Introduction to Hugo).

Comments and questions 📝 🤔 👎 👍

Your public comment or question might immediately improve this page or help me to (eventually) improve this page.