Introduction theme for Hugo
Find a file
2018-07-19 15:37:06 +02:00
archetypes Use Image Processing to resize images 2018-07-06 14:31:16 +02:00
assets Bundle nav script in index.js 2018-07-19 15:37:06 +02:00
exampleSite Bundle nav script in index.js 2018-07-19 15:37:06 +02:00
i18n Use headless bundle for home page 2018-07-18 17:39:11 +02:00
images Added light and dark themes. 2017-05-14 15:12:23 +08:00
layouts Bundle nav script in index.js 2018-07-19 15:37:06 +02:00
static Bundle assets 2018-07-13 10:55:02 +02:00
.gitignore Add examplesite/public to gitignore (#48) 2018-06-09 19:48:14 -04:00
.travis.yml Bump hugo version to 0.44 2018-07-13 10:58:42 +02:00
CHANGELOG.md Update templates (fix #59, close #61, close #60) 2018-06-24 20:22:21 -04:00
LICENSE Update to AGPL 2018-06-08 17:31:55 -04:00
README.md Update Readme 2018-07-18 17:39:54 +02:00
theme.toml Update theme tags 2018-07-13 12:20:32 +02:00

Introduction theme for Hugo

Build Status Latest Release

A minimal, smooth-scrolling theme for Hugo. Can be configured as a single page site or full-featured site with many sections.

Main page screenshot

Features:

  • Minimalist home page
    • About section with profile photo
    • Contact section with option to show your local timezone
    • Optional Projects and Blog sections
  • Light and Dark themes
  • Browser friendly CSS fade-in effect for some pizzaz
  • Smooth scroll-to-section navigation
  • Responsive and fast

Quick start

Get the theme

Run from the root of your Hugo site:

$ git clone https://github.com/vickylai/hugo-theme-introduction.git themes/introduction

Alternatively you can include this repository as a git submodule. This makes it easier to update this theme if you have your Hugo site in git as well. For this you need to run:

$ git submodule add https://github.com/vickylai/hugo-theme-introduction.git themes/introduction

Configure your site

From the exampleSite, copy config.toml to the root folder of your Hugo site and change the fields as you like.

Important bits:

  1. Set baseURL to your site's domain and give your site a title
  2. Add your firstName and tagLine
  3. Set the desired introHeight for your main page (use "medium", "large", or "fullheight")
  4. Choose a "light" or "dark" themeStyle
  5. Set your avatar image
  6. Input your social site urls and font-awesome icon names - use as many as you like

Create About and Contact pages

Run:

$ hugo new about.md
$ hugo new contact.md

Then edit the markdown files with the content you'd like shown in your main page's About and Contact sections.

Preview your site locally

Use Hugo's built-in server to see your site in action as you make changes.

$ hugo serve -t introduction

Visit localhost:1313 in your browser to see a live preview of your site.

Blog posts

To create a new blog post, run:

$ hugo new blog/your-post-title.md

Projects

To create a new project entry, run:

$ hugo new projects/your-project-name.md

Project front matter

Project parameters look like this:

---
title: "Design"
date: 2017-11-13T12:21:16-05:00
image: "img/plant.jpg"
external_link: ""
weight: 2
---

Projects are ordered on the main page by weight first, then by date.

The image will show up on the main page and in the project's details view. If you don't specify an image, the placeholderimg from your site's config.toml file will be used.

If you don't specify a title, only the photo will show. You can still add content to the file to "caption" the image, and this will show in the popup. (Great way to create a simple gallery!)

If you leave external_link empty, clicking on a project on your main page will pop up a window with the project's details. If you specify a url instead, clicking on the project on your main page will take you to that url.

Contributing

Pull requests for bug fixes and suggestions are welcome.

Contributors are listed in CHANGELOG.md. Thank you so much! 🖤

License

Copyright (C) 2018 Vicky Lai

Licensed under AGPL-3.0