Code Monkey home page Code Monkey logo

hugo-identity-theme's Introduction

Hugo Identity Theme

Hugo Identity Theme is based on Identity template by HTML5 UP. It was ported to Hugo for training and fun. It is rather configurable and flexible despite it's simplicity.

Demo

Demo on themes.gohugo.io

Features

  • Responsive design
  • Configurable appearance
  • Configurable social links
  • Contact form
  • Google Analytics

Screenshot

Hugo Identity Theme screenshot

Contents

Installation

Inside the folder of your Hugo site run:

$ mkdir themes
$ cd themes
$ git clone https://github.com/aerohub/hugo-identity-theme

For more information read the official setup guide of Hugo.

Getting started

After installing the Identity Theme successfully it requires a just a few more steps to get your site running.

The config file

Take a look inside the exampleSite folder of this theme. You'll find a file called config.toml. To use it, copy the config.toml in the root folder of your Hugo site. Feel free to change the strings in this theme. Play with already placed avatars and background images or use yours.

Make the contact form working

Since this page will be static, you can use formspree.io as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Begin the setup by following the steps below:

  1. Enter your email address under 'email' in the config.toml
  2. Enable form by setting enable to true in contact settings
  3. Upload the generated site to your server
  4. Send a dummy email yourself to confirm your account
  5. Click the confirm link in the email from formspree.io
  6. You're done. Happy mailing!

Nearly finished

In order to see your site in action, run Hugo's built-in local server.

$ hugo server -w

Now enter localhost:1313 in the address bar of your browser.

Custom Styling

To edit the css this theme uses, add your CSS to the assets folder then include it as part one of the [params] with the label custom_css. More information and an example can be found in the example config.toml file.

Contributing

Did you found a bug or got an idea for a new feature? Feel free to use the issue tracker to let me know. Or make directly a pull request.

License

This work is licensed under the Creative Commons Attribution 3.0 Unported License. For more information read the License.

Annotations

Thanks

  • to spf13 for creating Hugo and the awesome community around the project
  • to digitalcraftsman for creating Hugo themes and writing nice READMEs
  • to n33, (of course!) for original Identity Theme

hugo-identity-theme's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

hugo-identity-theme's Issues

Issue with form

Hi. I have an issue with the contact form. The submit button is most of the time disabled. I haven't figured out when it is enabled. But even then it doesn't submit. I looked at it for a long time, but I'm lost where it might be broken. Just thought you might want to know.

White bar appears at bottom of screen when you scroll down on mobile

Hey, I've been testing out this template and I found an issue with a white bar appearing at bottom on mobile.
What it should look like, the bar doesnt start to apear before the site is fully loaded.

What it looks like after it has fully loaded and you scroll down

It apears whenever you scroll down, you can see that it is opaque

Screenshots are from a Samsun Galaxy s7 and it has also been test on a Galaxy s4 neo with same results.
When tested on a desktop PC the bar did not apear.

Template for Google Analytics does not exist.

Line 81 in /themes/hugo-identity-theme/layouts/index.html reads as follows;
{{ template "_internal/google_analytics.html" . }}

That item does not exist and therefor Google Analytics is not working as intended despite the insertion of UA-key in config.

Can't get the form to work

Hi,

I have the form set up and functional. However, the confirmation message is not displayed on succes.

Error: theme/index.html:57: function "default" not defined

Hello,
A clean by the book deployment on a up-to-date server throws the following errors. Seems related to this change.

ERROR: 2018/08/01 16:05:20 template.go:350: template: theme/index.html:57: function "default" not defined
ERROR: 2018/08/01 16:05:20 general.go:222: Error while rendering homepage: html/template: "theme/index.html" is an incomplete template

<li><a href="{{ .link }}" class="{{ .icon }}" target="{{ .target | default "_self" }}">{{ .title }}</a></li>

Change the background

In the old .toml, there was a variable:

background = "bg3.jpg"

to change the background color, behind the overlay.
How can we switch the background with the new .toml.

Tks

fa rendering

I apologize, this would probably be an easy fix if I would take the time to learn HTML and CSS, but right now, I'd just like to get my site up and running. Everything works, except the fontawesome icons show up as squares on the deployed website. They render correctly when I host my website locally with "hugo server" at localhost:1313. I have copied all of the contents from the document root on my server.

https://www.tcashley.com/

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.