Forty Theme
Forty theme is a multi page website built around a grid of image tiles that transition into its content pages. It is a ported theme built by HTML5 UP. This theme contains many styled elements and features a contact form. Built for blogs, businesses, or freelancers.
For a demo go to Forty Demo.
Installation
Create a new Hugo Site and inside the site folder run the following commands:
$ cd themes
$ git clone https://github.com/MarcusVirg/forty
To learn how to create a Hugo Site read the official guide of Hugo.
Netlify
If you are using Netlify to host your hugo site, you will want to add it as a submodule instead of cloning:
$ cd themes
$ git submodule add https://github.com/MarcusVirg/forty
This is because Netlify uses the hugo build command when autopublish is enabled and will produce an error if the theme is not a submodule. See the Hugo Guide for more information.
Using the theme
After cloning Forty or adding it as a submodule, there are a few other things you should do:
Config File
There is an exampleSite folder for this theme. Copy the file called config.toml to your websites root directory.
Here you can customize some of the text and content on the website.
Change background
You can change the background by replacing the banner.jpg file with your own image in the folder forty/static/img. The image must be in jpg format and the filename must be called banner.jpg otherwise it will not work.
Create new project/blog
To create a new blog post, you can take advantage of archetypes and use the Hugo command:
$ cd hugoProjectDirectory
$ hugo new blogs/myBlog.md
Replace myBlog.md with your own file name. You can also just copy the markdown files from forty/exampleSite/content/blogs
Contact form
This page is static so formspree.io is used to forward the message to your email. Visitors can send you up to 1,000 emails per month for free.
You can set your email in the config.toml file. You then have to confirm your email with formspree and will begin recieving messages after you do so. I recommend only having the contact form on one page, most likely the index.html, because you have to confirm for every URL the contact form is on.
Preview
You can see a preview of your site while developing it by running Hugo's built-in webserver.
$ hugo server -D
Now enter localhost:1313 in the address bar of your browser to see your site.
NOTE: In the command above -D loads content that is marked as a draft. You can switch content from draft to final by changing the frontmatter value of draft to false in the .md file for the content.
Contributing
Find a bug or want a new feature? Use the issue tracker or submit a pull request.
License
This theme is released under the Creative Commons Attribution 3.0. For more information read the License.
Acknowledgements
Thanks to:
- AJ from HTML5 UP for creating the theme
- Steve Francia, digitalcraftsman, and others for creating and maintaining Hugo.