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
- Get started with Docker
- Install Hugo
- Getting first hugo theme
- Create first post
- 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
hugo server --bind="0.0.0.0" 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.
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="0.0.0.0", 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