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

Go to the profile of  CloudResources
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
login_synology
synology_package_center

1.2) Install Docker

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

1.3) Basic configuration: Enable vswitch

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

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

Tick the checkbox to enable Vswitch
enable_vswitch

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

Install Hugo blog system

2.1) Download hugo image from repository

Click "Synology Main Menu" and "Docker" icon
start_docker

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

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
launch_hugo_image

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

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

Mapping synology folder into hugo container
container_folder_mapping

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

Finally, container is up and running
container_is_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.
container_overview

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.
create_new_site

Next, download first theme from hugo official website.
Type

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

download_first_theme

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/* .

create_demo_site

3.4) Start Hugo

Type hugo server --bind="0.0.0.0" at terminal
start_hugo-2

3.5) Verify Hugo is running

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

container_port

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

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
edit_firstpost
firstpost_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.

mainroad_parameters

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

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

browse_firstpost-1

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
filestation_blog_folder_structure

Open "Text Editor"
Open_TextEditor

Enter any content of the file and save as below.
create_second_post

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
share_folder

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

edit_by_share_folder

Wrap-up

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.