Editing your site

Configuration

You should first see the file config.toml, which contains all of the configuration Hugo uses to build your site. Most of this file you won’t have to touch as it’s preconfigured for the startup-kit.

Importantly, you should change the baseurl to the place where you will actually serve the site. Furthermore, you can change the title of your site up above. At the bottom of the file, be sure to edit the [params] section to include your username and/or email address.

Landing page

Your site’s landing page is largely generated from the template file:

layouts/index.html

You may be happy with the layout as it is, but you’ll still have to edit this file for the content or links you want to display. The example in this startup-kit is a good jumping-off point.

Editing the layout

This file has the full complement of Bootstrap classes available to it for formatting. For instance, we use <div> elements with the col-sm-4 class to achieve the gridlike behavior of the front page, which perfectly renders on mobile devices. Plenty of other examples to customize your layout are available at the Bootstrap CSS documentation.

Editing content

Add Markdown files in the content/ directory.

There are several subdirectories here where you could organize files, or you could populate the content/ directory directly with files. Organize your content how you see fit!

You can use ref and relref shortcode to quickly and easily link to other content on your site. See the linked Hugo docs on shortcode for more info.

Images and other content

You can put images, PDFs, etc. under the static/ directory. They’ll be copied over by Hugo. The figure shortcode is a great way to include an image on your website.

Navigation bar

See the file layouts/partials/topnav.html to add or remove items to the navigational bar at the top of each page.

In general, the layouts/partials/ directory contains template snippets that get included by many of the pages. A great way to fine-tune the look and feel of your site!

Building your site

This starter kit comes with a Makefile. The default make target will simply build your site and place the output (the prettified HTML you want to serve the world) in the public_html/ directory.

Viewing your site

The Makefile also has a target for local development. Running make watch will spin up the webserver built into Hugo. This command will output a link to your local machine.

Something like: http://localhost:1318/site_name (replace «site_name» with your actual subURL)

Visiting this link with your web browser will show you a local copy of your site as Hugo has just built it. This is useful for live development. Simply change your content or layout and the server will automatically rebuild the site on the fly, even reloading the page in your browser automatically.

Serving your site

Once you’re happy with the way your site looks locally, you can copy the files in public_html/ to a place that actually gets served to the Internet.

One such place is your EECIS web space! Simple command example to sync up the directories:

rsync -aurv public_html/ myusername@hoek.eecis.udel.edu:public_html/