Full guide to start blogging with Hugo under Docker (Synology Diskstation)

Go to the profile of  CloudResources
6 min read

When you want to start blogging, the first impressions is to purchase web hosting to setup the blog system. However, you may think can I minimize the cost by using my own hardware? This article is helping you build your own blog system using own hardware.

First of all, identify what hardware you have for the coming blog system.

Identify the hardware

Use Synology Diskstation

This article will use Synology Diskstation to install hugo blog system. If you have Raspberry Pi or Old PC, see [Full guide to start blogging with Hugo under Docker on RPI and PC]. Before using Synology Diskstation, please ensure you have completed the Synology Diskstation Initial software setup

Once you power on Synology Diskstation, it is ready to setup.

Table of content

  1. Get started with Docker
  2. Install Hugo
  3. Getting first hugo theme
  4. Create first post
  5. Create post using other methods

Get started with Docker

1.1) Login Synology Diskstation Admin

Login Synology Diskstation admin by typing "http://< Synology-ip >:5000/". Then click "Package Center" and input "docker" to search the application

1.2) Install Docker

After searching, click "Install" button under Docker image to install docker. Once installed, press "Open" button to access Docker

1.3) Basic configuration: Enable vswitch

Before install container, it needs to enable vswitch. Click "DSM" show as below

Click "Network Interface" -> "Manage" -> "Open vSwitch Settings"

Tick the checkbox to enable Vswitch

Just a moment, wait for network setup completed and show as below

Install Hugo blog system

2.1) Download hugo image from repository

Click "Synology Main Menu" and "Docker" icon

Input "hugo" in search box. In the tutorial, it use "jguymard/hugo-builder". Select it and click "Download" button

Use default image tag "Latest" and wait for image download into your synology.

2.2) Configure Hugo Image

Select the downloaded image (jgyuomard/hugo-builder:latest) and click "Launch" button

Let's assign name for this container. After that, click "Advanced settings" to do more setup

To keep hugo blog system data permanently, creating folder at synology storage is most important. Let's do it

Mapping synology folder into hugo container

Click "Next" button and see the summary page. Confirming all data correctly, then click "Apply" to create the container

Finally, container is up and running

Getting first hugo theme

3.1) Identify Hugo container is running

Click "Container", select the Hugo container and Click "Detail" button.
It show the container is running. Let's remember Local port value and it'll use to access Hugo blog system later.

3.2) Setup Hugo Blog system

Click "Terminal" to login into hugo container. By default, there is no blog system. Type hugo new site blog to create one.

Next, download first theme from hugo official website.

cd blog
git clone https://github.com/vimux/mainroad themes/mainroad


3.3) Build up demo site

Before starting hugo with new theme, copy the example content to hugo default folders. Type

cd blog
cp -rf themes/mainroad/exampleSite/* .


3.4) Start Hugo

Type hugo server --bind="" at terminal

3.5) Verify Hugo is running

Open any browser(chrome,firfox etc.), at URL bar type Synology filestation IP address with previous container port.


Congratulations!! Hugo blog system work correctly when you see below screen.

Create first post

4.1) Create post via terminal

To create post, type hugo new post/firstpost.md at terminal. You can create any filename of the post such as aboutus.md , phone.md etc.

Then use vi to edit post and input the content

From below screen, you can enter any content of the post (picture, words, video links etc.). To get more post parameters, go to mainroad theme official site for more detail.


Save the post and start hugo server hugo server --bind="", you can see the page number increase from 37 to 38. That means one new post rendered.

Now, it ready to reload the browser (chrome,firfox etc.). Wow! firstpost content show up.


Create post using other methods

At this moment, you may feel horrible that you are not familar with command line and not convenient. Don't worry!! many method can create post. Below introduce two methods.

  • Use synology filestation and Text Editor
  • Use share folder

5.1) Synology filestation and Text Editor

First ensure your Synology have installed text editor apps. If not exist, use "Package Center" to install before we start. As you remember, a folder created as previous hugo container step that will use to save all the data. New create post directly in post folder and system will render new file automatically and show on website

Open "Text Editor"

Enter any content of the file and save as below.

Once you save the file, reload the browser. Second post show up at frontpage.

5.2) Use share folder

If you are windows user, use Synology filestation share folder method is most convenient. Ensure you have setup your Synology filestation folder sharing correctly. Open windows explorer and input \\<Synology IP>\docker. Enter login name and password

After login successfully, go to post folder as below and create any blog post there directly using any markdown or text editor.



This post is not good enought, some parts not mention clearly.
Next post I’ll say more detail as below

  • Mapping your own Domain to Synology Filestation
    • Configure Godaddy DNS
  • Use DDNS Service
  • Backup Synology filestation blog data
  • etc.