Workshop / Conference Note App – Powered by Hugo

Static Site Generators are all over the place. One of the best in class generators is Hugo. The idea behind Hugo is to make website creation fun again and it lives up to that. Equally important is an exercise that you need to do on your own to determine if you really need a dynamic website with all the heavy baggage that comes with it.

I started using Hugo a few weeks back and since then I have applied it to several of my own use cases (this blog is not one of them though and I hope to do that soon!). A couple of use cases that I have used it for are:

  • Classifying articles and useful links that I find from time to time
  • Training Portal (more on this in another post)

I wanted to apply it to another use case that I have often gone through and used some application or the other or even a paper book. The use case is programming workshops or conferences that I go to. I like to take detailed notes, anything interesting that the presenter mentions, useful links and more.

How about using Hugo for that ? Well, you could use one of the many note taking apps that are out there? Maybe you could even use Google Drive or something like that but my goals were:

  1. Keep the note taking exercise simple (markdown language is just fine!).
  2. Generate a website immediately (Hugo does that for you).
  3. Moving forward, use categories / tags if needed (Hugo themes will handle those).
  4. Publish the site and also integrate commenting in each of the note sections — so that many others could participate too.

I am not going to take you through all the steps to use Hugo. Shekhar Gulati has written a fantastic tutorial that I believe is well suited for anyone to learn about Hugo within a hour or so.

Note: Hugo is written in Go Language and you DO NOT need to know the language to use it. 

Using the Site Template

Let us get going with what I have done so far and which I think can be used easily by anyone of you.

Step 1 : Install Hugo

The first thing to do is download and install Hugo. It is available for all platforms and will come with an executable (aptly named hugo), which is all you need to run. Do add the folder in which you have the Hugo executable to the PATH variable, so that it is available from any folder.

For e.g. if you are on Windows, there will be a hugo.exe file in the release that you download.

Step 2 : Setup Site Template

  1. Create a folder named sites on your machine. Let us assume that this is /sites folder on your machine.
  2. Open a terminal (command) window and navigate to the /sites folder.
  3. Download the site template ZIP file from here.
  4. Unzip the site-template.zip file into the /sites folder, such that you have the /sites/site-template folder structure and the sub-folder as shown below:

    |-archetypes
       |-content
       |-data
       |-layouts
       |-static
       |-themes
       |—hyde

  5. While within the terminal (command window) in the /sites/site-template folder, give the following command:
    hugo server --theme=hyde

Step 3 : What do you see

Once you launch Hugo server with the command given above, you should see output on the console as shown below:

0 draft content
0 future content
1 pages created
0 paginator pages created
0 tags created
0 categories created
in 34 ms
Watching for changes in /Users/rominirani/sites/site-template/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

The Web Server is now running on port 1313 as mentioned and your templated site is ready.

Visit http://localhost:1313 and  you will see something like this:

Screen Shot 2016-02-15 at 10.15.34 pm

You are all set now. DO NOT SHUT DOWN the Server.

Step 4 : Let’s play out a scenario

In the /sites/site-template folder, you will find a folder named content. This is where all your content will go. You will find a file named template.md that is currently being rendered in the above screenshot. It contains markdown syntax but is quite simple.

Let us now create a sample site as if we are sitting in a workshop or meeting. Let us look at the steps below:

  1. The first thing is to give your site a name, a little bit of description, a copyright message and so on. The values for these fields is found in config.toml file present in /sites/site-template folder. Go ahead and replace the dummy values with actual values. Also note that you can have Disqus comments integrated with each of your content posts. If you wish to do that you can provide the value for your Disqus Short name in the disqusShortname field. If you do not want Disqus comments, simply remove that field from the file. Save the file. If Hugo Server is still running, you will find it updated automatically.
  2.  Now, let us assume that in the workshop or the conference, we are going to hear or talk about 5 topics (modules) that we wish to take notes for.
  3. Make as many copies of the template.md file as the sessions that you want. Think of each session as a blog post. So for example, if we want 5 sections or sessions, simply make 5 copies of template.md file. Later on you should move out the template.md file to another folder outside this – so that you can use it anytime.
  4. Notice that when you make 5 copies of the file, the site gets updated in the browser automatically.
  5. Now, open up any of the copies that you have made of the template.md file.
  6. Give an appropriate value for title and description fields.
  7. Next, you can fill out the content as the sessions are happening for the different sections in the file. The syntax is markdown and the main sections are identified via the ## tags. Just start typing in here. It is good to get familiar with the Markdown syntax. Check out this cheat sheet.
  8. Save the files. The content gets reflected automatically in the browser.

Hope this gives you a foundation to get started with Hugo and what it brings to the table. This is just a start and you should be able to see how you could apply it to any scenario that you want and not just a note taking application for a conference or workshop.

Hugo is worth your time and you should learn more about it. Check out the tutorial that I earlier mentioned. It will give you tips on how you can use Hugo commands to create content, using another theme, publishing the site to the public and more.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s