Configuration And Links

Add your background image

Images can be located in the static/images folder. In terminal, go to your project directory:

mysite$ cd static
mysite/static$ mkdir images

Find an image you want to use and place it into the static/images folder. Assuming the image name is me.jpg, the folder tree should now look like this:

├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── _index.md
│   ├── about-me.md
│   └── blog
│       └── index.md
├── data
├── layouts
├── resources
├── static
│   └── images        (1)
│       └── me.jpg    (2)
└── themes
1images folder
2desired background image

Open up the config.toml

1
2
3
4
5
    # Image
    [params.visual.image] (1)
      enable = true
      file = "images/me.jpg" (2)
      position = "center center"
1Find this section.
2Set the file parameter. The contents static of public folder are available therefore, any file under the static folder can be served via relative to static folder path.

Set favicon

Favican can be generated using site such as favicon.io.

To generate, go to https://favicon.io/ , under Favicon Generators ⇒ TEXT → ICO

generating favicon

  1. Initials of Jenny Brown, enter your initials.

  2. Type of icon corner, can be Round or Square

  3. Choose the font you like

  4. Change the font size till you like how the text fits the icon

  5. Background color

  6. Forground color

  7. When done, download the package

Extract the downloaded file and copy all files into mysite/static folder.

If your hugo server is running, to see the new icon, a hard reload is required. In Chrome, hold the shift key and click on the Reload button.

Configure Links

Open up the config.toml file and edit the links.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  # Links List #1
  [[params.links]]
    [params.links.list1]
      heading = "Connect"

      [[params.links.list1.link]]
        text = "Blog"
        url = "/blog/"

      [[params.links.list1.link]]
        text = "Email"   (1)
        url = "mailto: janny.brown@emaildomain.com"   (2)

      [[params.links.list1.link]]
        text = "About Me HaHa"
        url = "/about-me/"


  # Links List #2
  [[params.links]]  (3)
    [params.links.list2]
      heading = "Social"

      [[params.links.list2.link]]
        text = "github"
        url = "https://github.com/bubbleuptoppop"

  # Links List #3
  [[params.links]] (4)
    [params.links.list3]
      heading = "Network"

      [[params.links.list3.link]]
        text = "Wikipedia"
        url = "https://www.wikipedia.org/"

      [[params.links.list3.link]]
        text = "Happy DIY Home"
        url = "https://happydiyhome.com/wood-carving-tools/"
1Find where the text parameter is Email
2The url parameter needs to have your email preceeded by "mailto: ", there is a space between "mailto:" and your email address.
3Add the links to your social networks. Go to the social network, login and copy and paste the address into the url parameter.
4Add the sites you would like to share with other. Go to each site, copy and paste the address into the url parameter. As many sites as desired can be added.

Update config.toml

In text editor, open the config.toml file, look for things that need to be changed, for example your name and descriptions, and change them.

← Add Blog | Index | Deploy on Vercel →