How to Host a Website From Your Synology NAS to Your Own Public Domain With Web Station & Cloudflare
Introduction
In this article I will demonstrate how you can self-host a website to host from your Synology NAS and have it accessible on any public domain that you own.
Installing Synology Web Station
Log into Synology DSM (DiskStation Manager) which will be the IP address of your NAS in your browser.
Go to the Main Menu at the top left, and then open Package Centre.
Install Web Station by Synology and then open it.
Adding Files To Web Server & Testing They Are Accessible
Open up the File Station app in DSM, or alternatively you can navigate to your NAS via SMB or other means from your local machine that you are using to access DSM.
Navigate to the "web" folder which has been created by Web Station at the top level of your NAS.
Create folders for every website that you plan to have. For example, if the domain is example.com, call the folder example.com.
Create an HTML file in the web/example.com directory.
Go back to DSM and remove port ":5000" from the end of the URL to visit port 80, followed by /example.com. (index.html doesn't need to be appended because it will automatically add that for you on the server).
The website should then be loaded from that folder path.
Configuring Web Station For External Domain
Web Service Setup
Go back to the Web Station app in DSM, then go into the Web Service section on the left, then go to the "Create" option.
In the "Select a service type" page, choose "Static website", and then "Next".
In the "Configure general settings" page, you can give it whatever Name you want, but I'd advise calling it the same as the folder you created in Step 7 of the first section of this article. You also need to make sure that you fill out the description field.
In the "Document Root" section, you need to choose the folder that you just created for the website where we put the index.html file, then click on "Next", "Create", and finally "OK". It should then appear in the list.
Web Portal Setup
Go into the Web Service section on the left, then go to the "Create" option.
In the "Select a portal type" page, choose "Web service portal".
Under the "Service" section, click on the Web Service that you created in the previous section of this article.
In the "Hostname" section, you need to put in the external hostname that you're going to be using, like example.com, and this is where the site will be viewable by anybody. Then click on "Create". It should then appear in the list.
Installing Docker
Go to the Main Menu at the top left, then open Package Centre.
Install Container Manager, which is Docker, and then open it.
Cloudflare Tunnel Setup Using Docker
In Docker, go into the Registry section on the left and search for Cloudflare.
Click on "cloudflare/cloudflared", then "Download", followed by "Latest" in the drop-down and then "Apply".
Once the image has been downloaded, select the "cloudflare/cloudflared" image in the "Image" section, then click "Run".
Give it a name, preferably the same as the names you've used in the previous sections of this article.
Enable the option called "auto-restart". This will make sure that if the NAS shuts down and then turns back on, for example after a power cut, it will automatically start up the Cloudflare Tunnel again. (I would advise getting a UPS and some backup internet so that that doesn't happen.)
Click on Next, and do not quit DSM - you will need this again shortly.
Go to https://one.dash.cloudflare.com/?to=/:account/networks/tunnels/add.
Select the relevant Cloudflare account if prompted.
Select "Cloudflared", then "Next".
Give the Tunnel a name, then click on "Save Tunnel". This will then create your Cloudflare Tunnel.
Click on "Docker" under "Choose your environment".
Copy the command under "Install and run a connector" and paste it into a text document on your machine, as you need to format the command slightly.
Remove everything before the word "tunnel" in the command, and also remove the "--no autoupdate" as this will be added automatically for you by Docker. Copy the new command to your Clipboard.
Back on the NAS, in the "Advanced Settings" page, scroll down to "Execution Command" and click it, then paste in the newly formatted command you just copied, then click "Next" and "Done".
In the Containers section you'll see that it's green and is running. You can double click this container to view more details and modify settings if you wish to.
Back in Cloudflare, you'll see it says "Connector ID is connected", which means you've got a secure connection between your NAS and Cloudflare, so click on "Next".
In the "Subdomain" field, enter www if you want to use www.example.com (subdomain), or leave it blank to use example.com (root domain).
In the "Domain" field, choose the domain you'd like to use, for instance example.com.
In the "Type" field, either choose "HTTP" or "HTTPS".
If you choose "HTTPS" you will need to click on "Advanced application settings" and enable "No TLS verify".
In the "URL" field, enter the IP address of your NAS, for example 192.168.1.254, or whatever the case may be. <nas-hostname>.local, localhost or 127.0.0.1 may also work.
Click on "Save hostname".
Production/Public Domain Testing
Try visiting your domain and the site should now be publicly visible, with all paths showing relevant pages with no errors.
Conclusion
Now you know how to self host a website from your Synology NAS. If you have any issues, feel free to join the Cloudflare Discord server or the Synology subreddit to discuss any problems or questions!