Harto's Blog

Originally, I was bored in school and just wanted to setup a blogging platform on my server. After trying multiple Open-Source solutions, I came to my conclusion to just build it my own. Maybe there is already the perfect blogging platform out there for me, but I just didn't care too much. So, I just started building the blog. On my own.

The Tech Stack 🛠️

The tech stack is fairly simple. Mainly because I started this project on a school day.

• PHP: With PHP I had the chance to create the webapp fast and simple. With PHP you just write the code for every page in one file, so it doesn't need a dedicated backend and frontend. This way I am just way faster at developing the app. Also, it has native support for...
• MySql: The starter database for almost everyone. I don't know anyone who never used MySql (or how I like to call it MySquil😝) in their life. It is fairly easy to deploy and as said before it has native integrations in PHP.
• Docker/Apache Web Server: Everything is hosted on my server in the basement. The server is running Ubuntu with a Docker running on it. In the Docker I deployed the database as also the web server. The web server was a clone of a different project I have done in the past with Apache and PHP. So, I had just to clone the container. Even though it was not that easy as it sounds.
• GitLab: I think GitLab or just Git is a standard in the industry, but I want to name it anyways. Git made it so much easier to deploy the updates on the server. It was git push on the laptop and on the server a git pull this made my life so much easier then always copy pasting the files on the server.
• MinIO: A free AWS S3 alternative. More about that in the chapter Images

Database 💾

The database is very simple. It has three tables to work.

• User table: In the user table are basic data about authors like username, first and last name even though they are not really needed (actually I could delete those columns) then the password which is hashed obviously so no one can see the plain password for security reasons. The Email is also stored as well as a RememberMe token for the Cookie that is set when someone logs in, so they don't have to enter the passwords every time. As well if the user is an admin. As you see nothing crazy.
• Blogpost table: In the blogpost table we have obviously the title and the content which is Markdown text. There would be a more efficient way to store the content of a post, but this is simple. There is also a Foreign Key to the creator of the post. As well as the date and the time-to-read. This is calculated by the words divided by average reading speed of 250 words/min. Also, there is a column named isPage. This just says if the blogpost is a post that is shorter than a page. Also, posts will display directly on the timeline and not with a Read more button.
• Tags: I also have tags implemented. So, I can tag a post with for example PHP if the post is about PHP or with Fun Fact or with Project Concept or things like that.

Posts ✉️

Posts are just a row in the database. The posts are written in Markdown. For those who don't know Markdown. Markdown is a simple and easy-to-use markup language you can use to format virtually any document. Markdown will get rendered thru a parser into HTML to display it on the website. With that I can give the formatting and simple styling of the blog to the user.

Little Markdown changes

I had to change Markdown a bit for my use-case. Usually when you add images you use the following syntax: ![Alternative text for text to speech readers](URL to the image)

Now I changed it a bit because I wanted to have image descriptions. My version looks like this: !{Description}[Alternative text for text to speech readers](URL to the image)

This will render in a figure tag and the description in a figcaption tag. With this I added easy and good-looking image description.

Images 🖼️

The image integration was the biggest pain. But let’s start from the beginning.

To store images efficiently you need a special server and can't really do that in a database. So, I looked around and I saw AWS S3. But... is it Open-Source? No - Is it at-least free? No. So I won't use that crap then. So first I thought it wouldn't be that complicated to build it on my own. But the problem was time. I wanted to have images on my posts, so I had to use an alternative. So, I looked around and came to MinIO. This is a good and I think almost like S3 like storage, but the key difference is, it is free. So, I deployed it on my Docker server and ran it. It uses the same API as S3 so I could use S3 tutorials to implement MinIO in my platform. Well now I have images that I also have an own markdown syntax for. Now it should be ready to deploy, I think.

And here we are. A definitely not good but working blogging platform.

Learnings 🖊️

Through the development process of this app I learn so many new things. I learnt how to upload and manage Images using a S3 like storage system and I learnt how to render Markdown in PHP and a lot more things. The result is that I have now a space where I can share my ideas and thoughts. And this was the main goal.

Future Plans 🚀

For now, I am done with coding PHP for a while, but I have still some ideas for this platform.

1. Even thou I don't like to track users, but it would be interesting to add some analytics. Things like how many users visited this site and how long they were on a post. And also, maybe from where those peoples are. I won't use it to make any money but just for fun.
2. On other social media platforms are likes or something. I would like to add something like that, but you can give up to 50 of those "likes" or whatever they will be.
3. Also, a nice idea would be to add comments for some user interactions.
4. A mailing list. You can sign up with your mail and then you will get messages when a new post has been posted. You could also filter for specific tags you are interested in. So, you only get messages for e.g. Java related things so.
5. A better content editor. Right now, it is just a textarea but maybe I want to make it more "clicky micky" as my teacher would say.

And this is how this app works. As you see nothing special. I didn't create the next big thing but a place to share my ideas. Feel free to reach out if you’d like to connect.

Harto