1. Hugo
Hugo Online platforms such as Squarespace, Wix or Wordpress are very convenient to use to customise and create your own website. Though, they can get expensive when it comes to hosting, registeration and adding premium features. Hugo is a framework where you can create your own website, completely from scratch without much effort or without knowing too much (or any) of the internal programming. There are also many web hosting platforms that can easily host a Hugo project for free - meaning, the only money you will spend will be for the custom domain name!
2. Finding and Installing a Theme
Themes You can browse through the themes listed at https://themes.gohugo.io/. When I was first using hugo, I followed the Free Code Camp Hugo Tutorial, and they recommend using the Ghostwriter theme if you are starting out. We will instead pick a different design. We will be using the Hugo-sugoi theme for now. You can read about it here and check out the demo here. Download the source code from Github (Click on the Green Code button, then Download ZIP).
3. Adding your Social Media links
Social Links Open my-food-blog\config.toml and overwrite the code to this (substituting your details): baseURL = "/" languageCode = "en-us" title = "Your website's name" theme = "hugo-sugoi" [Params] herotitle = "Your website's name" facebook = "https://facebook.com/XXX" twitter = "https://twitter.com/XXX" youtube = "https://youtube.com/XXX" github = "https://github.com/XXX" email = "XXX@example.com" If you want to exclude some of the social media, you can just delete the lines that you do not need.
4. Adding Content and pages to your website
Content Each post is going to be written in a separate markdown file. For example, if you wanted to write something on Chocolate Lava Cakes, you would have a file called ChocolateLavaCake.md where you would write your text. The hugo-sugoi theme comes with some examples. Navigate to my-food-blog\themes\hugo-sugoi\exampleSite. There you will see a folder called content. Copy this content folder and paste it into the my-food-blog folder, where the root of the project is (overwrite the existing one).
5. Configuring the Markdown files
Configuring Markdown files Each markdown file should have an intro at the beginning, similar to the one in this file. Make sure that at the start of your markdown file you confirm the following details: - The name of the file (title) - The date - If it is a draft. If this is set to true, the file will not be displayed in the list of posts. - The category will display on the bottom-right of the preview.