From Obsidian notes to a local Hugo website

Aris Papasavvas · · ArisWeb

TLDR : This note walks you through turning your Obsidian notes into a local Hugo website using the Roadster theme, from creating the site folder to configuring the hugo.toml file. It’s a step‑by‑step, copy‑paste‑friendly guide so you can get a basic blog up and running quickly, then start customizing the look and layout to your taste.

Obsidian notes to a Hugo local website

  • Go to the location where you want to set your website folder.
  • Open a terminal there.
  • Send the following commands (Replace ArisNotes by the name you want to give to your website)
1hugo new site ArisNotes  # use the name you want 
2cd .\ArisNotes\
3git clone https://github.com/mansoorbarri/roadster.git themes/roadster # it's the hugo theme I've chosen
  • In the created folder, open the file hugo.toml and replace it with this code (that can tune as you wish)
 1baseURL = '/' 
 2languageCode = 'en-us'
 3title = 'ArisNotes' ## << adapt it
 4theme = "roadster" ## << adapt it
 5
 6# Main page - Top banner with logo
 7
 8[pagination]
 9  pagerSize = "10" # Number of posts per page
10
11[taxonomies]
12  category = "categories"
13  tag = "tags"
14  author = "authors"
15
16# Goldmark renders raw HTML mixed within the Markdown
17[markup.goldmark.renderer]
18  unsafe = true # N.B. This is unsafe unless the content is under your control. Set to false if you don't mix HTML with markdown.
19
20[Params]
21  description = "John Doe's Personal blog about everything" # Description of your site
22  opengraph = true
23  twitter_cards = false
24  readmore = false # Show "Read more" button in list if true
25  authorbox = true
26  pager = true
27  post_meta = ["date", "categories"] # Order of post meta information
28  mainSections = ["post", "docs"]
29  customHeadHTML = "<link rel='icon' href='/favicon.png'>" # Peut etre a supprimer 
30  
31
32[Params.logo]
33  image = "img/ArisNotes_Logo_Slogan_White.svg" ## << adapt it (Path relative to "static" folder) 
34  title = false # Logo title, otherwise will use site title
35  subtitle = false # Logo subtitle
36
37[params.author]
38  name = "John Doe"
39  bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it."
40  avatar = "img/avatar.png"
41
42[Params.sidebar]
43  home = "right"   # Configure layout for home page
44  list = "right"   # Configure layout for list pages
45  single = "right" # Configure layout for single pages
46  # Enable widgets in given order
47  widgets = ["search", "recent", "categories", "taglist"]
48
49[Params.widgets]
50  recent_num = 5 # Set the number of articles in the "Recent articles" widget
51  tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)
  • Check that the website compiles by running the following command in this folder :
1hugo server
  • Now I will tune the roadster template I’m using to make the website appearance a little more modern (to my taste).
    • This is done through the layout folder, where a folder named partials is created.