Repository to track news and resources from the USABLE initiative; learn more at https://usable.tools
Content contained in the content
directory as markdown files. Each file should have a .md
extension. With Hugo installed, you can add content through the command line: hugo new content/[SECTION]/[FILENAME].md
.
Paths will be constructed using the section's directory within content
and the name given to the markdown file. So a markdown file in content/events/my-awesome-event.md
will have this URL https://usable.tools/events/my-awesome-event
, so he last fragment of the path will match the filename but without the .md
extension.
Drafts are set to true by default. If content doesn't appear after adding the markdown file inside the content
directory, check to make sure that draft is set to false with draft: false
.
Blog content is published within the content/blog
directory. There is an example unpublished blog content at content/blog/blog-example.md
.
Events are published within the content/events
directory.
Note: the eventdate
font matter field should be filled in so the sort on the events page will display most recent events on top. There is an unpublished example event content content/events/event-example.md
.
Personas are published within the content/personas
directory. There is an example unpublished personal content content/personas/persona-example.md
.
Pages can be published within the top level of the content
directory. For example the about page https://usable.tools/about
is published at content/about.md
.
Images and Files
To add an image to content, first place it in the static/images
directory. Hugo will copy any files in static
to the published site. For example an image path would be images/[FILENAME].png
.
To add a PDF to content, place it in the static/pdfs
directory. For example a path to a PDF should be pdfs/[FILENAME].pdf
.
Anything added to the static
directory will be available to the published site.
To publish or edit content first install Hugo. Then run the command hugo server
in a terminal from the root of the source
branch. This will provide a link to view the site.
Any changes pushed to the source
branch will automatically build the site and deploy changes to the live site.
Home page carousel content is published within the content/front_carousel
directory. The full text of this content is displayed on the front page. HTML can be included in these, such as the orange USABLE text within the the h2 tag with: <span class="orange">USABLE</span>
.
The link_path
field is required for the slide to be displayed. If the value for this is empty than the entire slide will not be visible on the front page.
The link_text
field is optional. If not defined, it defaults to "Read more."
The weight
property controls the order of front page items.
If you would like to unpublish any front carousel content, the draft property can be set to false with draft: false
.
This content type doesn't require the title
value. If title
is defined in front_carousel
content, it will not be visible anywhere.
Intro on front page can be edited in data/intro.json
. It has a title and description.
Personas block on front page can be edited in data/personas.json
.
Configuration is stored in config.toml
. This file contains various Hugo settings as well as site wide values such as the name of the site. The contact information, social media links, twitter card data and OG data are also defined in this file.
Main menu: Menu items can be added in the configuration file config.toml
.
baseURL
The base baseURL in config.toml
will need to be changed to baseURL = "http://usable.tools/"
before switching to this domain. The trailing /
is required for the site to render correctly.
The following commands should be ran from the top level of the source files (within the same directory as config.toml
).
To build the static files run hugo
.
To preview the website locally run hugo server
.
To update SASS files, run npm run sass
in a terminal and commit the updated CSS files.