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. My portfolio site is built using this theme.
For a demo go to Forty Demo.
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.
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:
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
myBlog.md with your own file name. You can also just copy the markdown files from forty/exampleSite/content/blogs
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.
You can see a preview of your site while developing it by running Hugo’s built-in webserver.
$ hugo server -D
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.
Find a bug or want a new feature? Use the issue tracker or submit a pull request on GitHub.
This theme is released under the Creative Commons Attribution 3.0. For more information read the License.