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](https://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:

![Blender Dumbass logo](/pictures/favicon.png)

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](/about), [Articles](/articles) and [Reviews](/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](https://codeberg.org/blenderdumbass/BDServer/src/branch/main/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](https://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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/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](https://codeberg.org/blenderdumbass/BDServer/issues) 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](https://community.torproject.org/onion-services/setup/) and it is now connected to the internet. Then @Madiator2011 did the magical bit by connecting it to the [clearnet](/about/glossary#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!!!**
