Welcome to the example website of the Hugo theme Bloggraph. The design of Bloggraph takes lots of inspiration from the style of ACM SIGGRAPH technical paper, with a special focus on showcasing research projects and profiles.

This website is a minimal example, as well as a tutorial that could get you a quick start.

github/desmondlzy/bloggraph example@email.address

Start with the Source Code of This Website

The best way to get started is get a copy of the source code of this example website and change it as per your need. Simply clone the github repo with --recursive.

git clone --recursive https://github.com/desmondlzy/bloggraph-example yourwebsite

Then try cd yourwebsite; hugo serve you shall see the example website running at localhost:1313/. Make sure you’ve installed Hugo extended version (v0.90.0+) before this.

Recommended Directory Layout

If you’re working with the example website, you’re already set. If you are migrating an existing Hugo project, it’s highly recommended to organize files as the following:

content/
├─ publications/
│  ├─ _index.md (if you want to customize the publication list page)
│  ├─ pequalsnp.md
│  ├─ other-projects.md
├─ _index.md (home page)
static/
├─ sass/
│  ├─ _custom.sass (recommended place to override the default sass)
themes/
├─ bloggraph/
config.toml

Site Configuration

Change the corresponding fields in your site configuration at config.toml to customize the following.

Site Owner Name

Change name in [params.author]. It will be used to highlight your name in the author list of the publication.

Social Media Links

Change the fields in [params.author]. This determines what {{< icon-link >}} shows.

github/desmondlzy/bloggraph example@email.address

Currently, only linkedin, github and email are supported. Want more? Tweak themes/bloggraph/shortcodes/icon-link.html and file a pull request to let everyone benefit from it!

Tabs in the Navigation Bar

Change [menus.main]. See official documentation on menus for more info.

Home Page

Home page (the page shown at the root of your website) is generated from the content/_index.md. As usual, use markdown syntax to write things on your home page.

Publication

Some tools that may come in handy when you write the publication page.

Add a Publication/Project Page

Set the front matter type to be publications. The following command which creates all the boilerplate and front matters will take care of everything.

hugo new publications/p-equals-np.md

The authors and affiliations information will be parsed from the front matters and displayed on the page automatically.

Show the Overview of a Publication from Markdown

A shortcode is bundled so that you can refer a publication page in the website by

Publication List

A list of publication is automatically generated at baseURL/publications. You can add customized content before the list at content/publications/_index.md.

Extras

I like snacks…

Icon Link

Display the your social media links as per the site configuration.

github/desmondlzy/bloggraph example@email.address

Number the Headings/Figures

Use shortcode in the markdown file to number all the h2/h3 headings in the page. Note: numbering doesn’t work for figure caption.

Use HTML class count-figure and count-h2h3 if you work with HTML. All the descendants of the container of the corresponding class will have the numbering enabled.