How to Make a Blog Like Mine Using BDServer Software?

Blender Dumbass
December 21, 2024

👁 41

https://mastodon.online/ : 👁 1
https://mastodon.social/ : 👁 3
https://blenderdumbass.org/ : 👁 5
https://blenderdumbass.org/articles : 👁 2

#blog #blogging #webdev #website #python #programming #BDServer

License:

Creative Commons Attribution Share-Alike

Audio Version

That's right, I so much like my new recent syntax highlights parser that I will write two articles with code snippets in the same day.

So you are reading an article. This article is on a website. And this website somehow works. To be honest, I'm not completely sure how. I'm such a literal dumbass that the fact that you are reading an article on my website stupefies me even harder. But non-the-less, this article is not done with some Square Space or other similar bullshit. In fact is has zero lines of JavaScript and is hosted directly from my house. Which is even stupider of a miracle if you think about it. And not only that, the server software was written by me. By the dumbass that is writing this very article that you are reading right now.

In any case, I want to document the way you might have a possibility to use the same software to make a similar website. @Madiator2011 already done that with blog.madiator.com. Lets go over: where you get the code, how do you set it up, how do you publish, how do you manage accounts, and most importantly, how do you modify everything, so it will look like your own thing.

Installing the damn thing!

That's right. Let's start with installing it first, shall we?

Before you gonna run this on your fancy server, let's first play with it a little bit on your local machine. The website you will be making will only be available on that very machine, or if you are smart enough, on machines on the same Wifi as your machine. But that's no biggie! We want to start small. We want to understand what we are dealing with. We want to play with it a bit.

Go to your terminal and navigate from it to where-ever you store your source code. And then there type:

$ git clone https://codeberg.org/blenderdumbass/BDServer

This will download a folder from the internet containing the server's source code. Which is also the working code, 'cause I made it with Python. And yes, to turn it on, you run Python files. And the article you are reading was served to you by a Python script. But that is good. Because you may want to change stuff and running a script like this directly from source is very convenient for that.

Naviage to inside of the folder:

$ cd BDServer

And run the damn thing:

$ python3 run.py

You can see that if everything went according to plan, you will be greeted with a help message that will tell you what is available to you. At the moment of me writing ( I will not stop developing the damn thing ) the help will look like this:

    BDServer Help

--help       - Prints this Help Page.
--run        - Run the server.

--set        - Use for changing settings.
--account    - Manage Accounts.

--create     - Start a new article.

--config     - Edit config file directly, bypassing --set.
--folder     - Open the folder of the website's data.

--federation - Federation settings with other BDServers.

--transfer   - Transfers legacy website data to the new format.

As you can see those are just your good boys, simple bash arguments that you can pass in the end of the string to make it do things. For example:

$ python3 run.py --run

... will run the server itself. Meaning now you can open the browser and go to localhost:8080 and see the damn thing load up. Oh wait a second. I have to explain you what the hell localhost:8080 is.

You know your web-browser can access various addresses online? But that is not the only thing it can do. It can also access various local things. If you see a link with http in the beginning, that means it uses the old trusty and rusty HTTP protocol to communicate with a server somewhere on the internet. But it doesn't have to be on the internet. localhost is a placeholder name for "this very machine" which what the browser will try to connect to if you try to go to localhost from it. The :8080 is referring to a port on that machine.

I have more than one website one this machine, and for that I need more than one port. Every internet connection will be done on one port or another. In my case, the blenderdumbass.org is sitting on port 8070 actually. So for me, it is much faster to use the same website, by simply typing localhost:8070 in the browser.

But now you probably asking yourself. How does one become 8070 if it is 8080? Well, here is where the --set commands come into play.

$ python3 run.py --set

    BDServer Set Help 

    Set is used for setting up server configurations.

--title    - Set title of the website.
--tagline  - Set tagline of the website.
--domain   - Let the server know the clearnet domain.
--tor      - Let the server know the tor domain.
--email    - Set Email SMTP account for internal automatic messages.
--account  - Set the Main Account, for the footer and stuff.
--port     - Set port where to run the website.
--css      - Set a CSS file.
--css_edit - edit a CSS file.
--favicon  - Set a favicon file.
--add_tab  - Adds a category of articles.
--edit_tab - Edit the config of a category.
--tab_rows - Set in how many rows to draw the tabs.

--editor   - Set editor. Default nano.

--fc_api   - API for software Free Competitors search.

As you can see you can type --set in the end instead of --run and get a bunch of other options. All of which are rather useful. The option --port changes the port. So to make it be 8070 as in my case, you do:

$ python3 run.py --set --port 8070

Here you can also change a bunch of other things. On the home page you can see the --title is blenderdumbass . org and --tagline is The elite club for the Ultimate Hackers! while --favicon is this image:

You can set a custom CSS file to do themes on the website, while being able to git pull updates to the source code. If you change the one in the source code, it will work, but every update will be a hassle. Otherwise setting an external one will not be such a hassle.

Where are my configs? Damn it!

Well... If you navigate from you home directory to ~/.local/share/BDServer you will be able to see that it made a bunch of folders there and it probably includes a few files there, such as the config.json file which contains the stuff you set with the --set.

Those folders alongside the config are very important too. Since your website's content will go inside of them. I have a folder in the tabs folder on my computer containing an articles folder, where there is a folder with this very article you are reading.

Each article consists of two files: a markdown .md file with the actual text of it. And a .json file with a bunch of metadata.

Tabs?

As you can see on my website, on the main page you have various categories: Such as About, Articles and Reviews, in the server those are called "Tabs", because they kind of look like tabs. Even though those are more like folders. But I already written the code, so shut up!

To add an articles tab, you can use:

$ python3 run.py --set --add_tab articles

This will add a folder in the tabs folder besides the config.json called articles. Or if you typed bullshit it will be called bullshit. Basically after the --add_tab type the name of the folder there, okay?

Inside there will be a small .json file, where you can set a few things. Here is what the one on my articles looks like:

{
    "icon": "scene",
    "title": "Articles"
}

It is a very small configuration file, which can give you two things: the icon which is what image do you want beside the text. You can choose them from the icons folder in BDServer. In this case I use scene.

The other setting title will govern how to show the text of the tab in the website itself. Basically you can see that the tab is called articles all lowercase, while on the website it is rendered as Articles with an uppercase "A". But you can spell something completely hilarious in there. Or even put some HTML code into there. Do whatever you want.

So how the hell did you invite yourself? Or... Accounts!

To register on my website, or by extend on any website that is using the same server code, you need somebody who is already registered to invite you. But you can see there is a catch 22 here. You just installed the software and there are no accounts on the website. How the hell do you make an account if nobody can invite you? Well, dear hacker, you can invite yourself.

Type this:

$ python3 run.py --account

... and you will see that you can make new accounts without asking yourself for permission. So go ahead and make one. And as soon as you make one, you can log in, go to your tab and write your damn article.

Your yellow bullshit is very hard for my eyes! Or CSS themes.

At the moment, the only other theme for this website software is the theme from blog.madiator.com which is arguably more broken than the yellow bullshit theme on this website. Yet I understand you want to change the colors. The theme.

I already told you how to setup a custom location for a CSS file, but the file should be structured similarly to the default.css file that comes with the server software. I suggest you copy that one over, and change that copy to fit your needs.

:root {
    --color-important  : #ffb800;
    --color-background : #353849;
    --color-text: #FFFFFF;
    --background-color: rgba(53,56,73, 1);
    --backdrop-filter: blur(8px);
    --padding: 10px 20px;
    --margin: 8px 0;
    --border-radius: 25px;
    --box-shadow: 0px 0px 15px rgba(0,0,0, 0.40);
    --box-shadow-focus: 0px 0px 30px rgba(0,0,0, 0.99);
    --code-string:#3dcf58;
    --code-variable:#ff64e7;
    --code-comment:#858899;

}

@font-face {
  font-family: "Exo";
  src: url("/pictures/Exo2-Medium.ttf");
}

html {background-color: var(--color-background);
      background-image: url("/pictures/new_pattern_whatever.jpg");
      background-size: cover;
      background-attachment: fixed;
      background-position: center; 
      color: var(--color-text);
      
      font-family:"Exo";
      font-size:17;
      
     }

As you can see the CSS file starts with a few things that are immediately useful. The main colors of the website. The font setting and the background is all there. Though you probably don't have the files sitting in the same locations.

The /pictures/ folder besides the config, is used to store files that the server serves, such as images and stuff. I'm using it also for the font. You probably don't have it. So some of it will be broken.

You can also see that I use variables to communicate often reused settings. So it should not be too hard to make your changes to this CSS file.

But mate, I wanna do some extraordinary... Or custom Plugins!

@Madiator2011 is a nutz person. He immediately started playing with the code and made a little mini-game with spaceships, a screenshot of which I don't have. Since then I renewed the server software and he installed it and it was lost. So we agreed that we need a plugin system, to have customizations living outside of the main repository, so you could type git pull all you want and nothing will get dunked.

There is a /plugins folder into which you can put Python .py files which will be executed by the server when serving. At the moment the only thing possible to do with them, is to edit the HTML code before it is sent. For that the plugin has to have a onHTML() function like this:

def onHTML(server, html):	
	return html

This one, for example, literally will do nothing.

You can test that it is executing by doing this:

def onHTML(server, html):	
	print("Hello World")
	return html

Or for example if you want to change every mention of "Open Source" and replace it instead with "Free / Libre Software". You can do this:

def onHTML(server, html):	
	html = html.replace("Open Source", "Free / Libre Software")
	return html

Be aware it is case sensitive.

With the server variable that you also get, you can do more interesting stuff. For example server.path will give you the url of the page you are looking at. server.headers will give you headers of the request. Things like User-Agent and stuff like this. Then server.cookie will give you the unique visitor's identifier, useful also to see if the request coming from somebody who is logged in. And server.parsed will give you parsed url variables. You know those things like the you know... ?text=hello&other_text=World thingies and stuff.

You can also use the stuff I use in other modules. For example, to get data about the currently logged in user you can do:

from modules import Render
def onHTML(server, html):	
	userdata = Render.validate(server.cookie)
	
	# Add something to the page if the user is Blender Dumbass
	if userdata.get("title") == "Blender Dumbass":
		html = html + "Something"
	
	return html

Basically, go look into the source code and see what each thing does. And yell at me in the bug report if I didn't put comments in correct places.

But wait... How do I deploy it?

Oh...

Ah... I did it with Tor. I used their tutorial and it is now connected to the internet. Then @Madiator2011 did the magical bit by connecting it to the clearnet, so... yeah... I don't actually know that bit. But I guess it is not too hard. You just setup an Nginx thing on some bought server somewhere in Germany, buy a bloody domain from a shady website and send some love to Let's Encrypt for SSL and you're chilling... Right?

I guess... ah...

Happy Hacking!!!

Help