Because I’m hosting the sources of my website on my home desktop, sometimes it’s pretty hard to post from a computer outside my home network, to save the hugo markdown files. So I had to improvise.

1. Variables

The following tutorial is based upon some assumptions:

1. Local hugo files are in /var/local/www/html/ (content/ and uploads/ specifically)
2. Location of the PHP Admin is at https://mysecretserver.ice. This URL is fictitious, so don’t try it. The archive can be put in a directory, so https://yourrandomsite.com/very/secret/admin/ should work just as well.
3. Based on #2, the location of the remote files is hosted for user user69420 on server mysecretserver.ice in the directory /home/user69420/mysecretserver.ice/very/secret/tool/. This will be helpful later.
4. This is done to fit only Posts and Quickies from my site, but you can expand it to whatever post types your website has.
5. !!!!!!THIS IS NOT SECURE AT ALL!!!!!! this has absolutely no safety features in place, so anyone can (in theory) add whatever they want. I’ve decided that a combination of security through obscurity (hosting the thing somewhere very well hidden) plus a combination of .htaccess+.htpasswd is good enough for me. !!!!!!DON’T LEAVE THIS TOOL PUBLIC, YOU WILL FUCK SHIT UP!!!!!! For the sake of the example, we’ll consider using the username htpasswdusername and pass somesecretpassword for htaccess authentication
6. Your hugo setup might be different, so adjust paths accordingly where needed.

2. Downloading, uploading and configuring.

Firstly, you need to download and unpack the archive linked below. Go on your server in the directory /home/user69420/mysecretserver.ice/very/secret/tool/ or wherever you want to create your tool and upload the contents of the archive.

Inside the archive you will find a header.php file, which contains some variables that are needed to set up the tool, and some general use functions. Then you have index.php which is the first page and the form to add a new post, then you have the newquickie.php file which contains the form for a new quickie, the two hugo folders that are important: content and uploads, which will hold our temporary content, and a css folder which keeps a bootstrap.3.5.0 css file and a few styling rules. I also created 2023 and quickies/2023/ in the uploads directory, because that’s my folder structure, but you can delete them if you don’t need them. I’ve also created the post and quickies directories in the content folder.

After everything is uploaded, open header.php and edit the variables on the first 5 rows to match what you need, but they should be just fine from default.

Then you can start either adjusting the code to match the particularities of your markdown front-matter, or you can start writing.

3. Writing

I was planning to add a markdown editor to the page, but it’s no use, as markdown is pretty easy and simple to use. Just fill in the form, add a cover image and submit. That’s it!

I’ve added some labels on the right side to show you how many unpublished articles you have there, and a Sync button, which will set your content to be pushed to your local hugo directory.

4. Syncing

The syncing is pretty simple, I created a cron on my local machine which runs every 10 minutes and pulls the content and upload directories from the server to the local machine and adds them on top of the existing folders, making them ready for a hugo deploy.

However, this only happens if a certain file is available on the server, named syncing.html. If it’s not, it skips the sync. If it’s there, it syncs the files, deletes them from the server and then deletes the syncing.html file.

The file can be seen at https://yourrandomsite.com/very/secret/admin/syncing.html and contains the timestamp of when the “Sync” button is clicked.

Make sure you edit the paths to your directory and pay attention to the trailing slashes on the directories in the rsync commands! Keep in mind to also change the .htpasswd credentials to the ones you’re using. Add the location of the script to crontab and you’re good to go!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

#!/usr/bin/env bash
echo -e "\033[0;32mChecking sync ready ...\033[0m"
status=$(curl -s --head -w %{http_code} https://yourrandomsite.com/very/secret/admin/syncing.html --user "htpasswdusername:somesecretpassword" -o /dev/null)
if [ $status = 200 ]
then
	echo -e "\033[0;32mSyncing content ...\033[0m"
	rsync --remove-source-files -azr -e ssh user69420@mysecretserver.ice:/home/user69420/mysecretserver.ice/very/secret/tool/content/ /var/local/www/html/content
	echo -e "\033[0;32mSyncing uploads ...\033[0m"
	rsync --remove-source-files -azr -e ssh user69420@mysecretserver.ice:/home/user69420/mysecretserver.ice/very/secret/tool/uploads/ /var/local/www/html/uploads
	echo -e "\033[0;32mCleaning up ...\033[0m"
	secondstatus=$(curl -s https://yourrandomsite.com/very/secret/admin/index.php?sync=finishsyncing --user "htpasswdusername:somesecretpassword" -o /dev/null)
	echo -e "\033[0;35mDone!\033[0m"
	# add more commands here if you want to deploy automatically your site
	# /var/local/www/html/deploy.sh
else
	echo -e "\033[0;31mNot ready to sync ...\033[0m Exiting."
fi

5. Publishing

If you’re feeling confident that everything is fine, you can append to this script the commands that you use to deploy your site, just in case you want to automatically publish everything on the site.

This might break your site now and then, so it’s worth testing it thoroughly before you do this.

6. Conclusion & Next Steps

This was a fun thing to do in an afternoon and I hope anyone has some use for it. Here’s a quick gallery of how it looks, as I won’t show you a working model.

The next steps would be to keep the .md files on the server and have a way to safely pull them from the server disk into the application for editing. But that’s a story for an other day.