It’s like totally time to build your web site on Hubzilla

Hubzilla is a free and open-source software stack providing a decentralized network of hubs, much like a social network.

It features built-in localization, cloud file storage, discussion threads, forums, calendar and contacts, wiki and web page authoring / CMS. Hubzilla supports many languages and is mobile-ready out-of-the-box.

You may join an existing hub, or set up your own hub. To realize the full benefit of building your web site, you will need to have Administrative privileges. It is recommended to set up your own Hubzilla hub.

Building your web site on the Hubzilla platform gives you immediate access to a large community of many federated social networking sites even outside of the Hubzilla grid of hubs. There is no longer reason to continue to send your customers to a handful of various proprietary dislocated platforms in order to connect with your business.

Here we shall describe constructing a simple three-page web site. Our basic example provides a “Home”, “About” and a Contact Page with a response form. We shall provide content in two languages, English and Spanish. The home page features a basic slider image control. Although we are focusing on just two primary languages in this example, Hubzilla has built-in support for many languages. Your language is probably spoken here.

You are free to use the example provided here as a basis of constructing your web site.

Example three page web site on Hubzilla

The Hubzilla CMS tool enables you to create content using plain text, BB code, HTML, Comanche, or PHP. Our example site will use basic HTML and PHP which you can modify to your requirements.

Step 1: Install Hubzilla

If you do not already have your own installation of Hubzilla running, now is the time to set it up. Hubzilla will run on Hiawatha, Lighttpd, Nginx or Apache. In this example we are running Hubzilla on the Hiawatha web server, with PHP 7.2, however you may choose the web server platform which works best for your requirements. If you need help check out the references links which follow this article. The Hubzilla community provides excellent support.

(Note about editing PHP pages using the Hubzilla CMS) If you are using an application level content filter on your network to protect you server from malicious requests over TCP using the HTTP protocol, you may need to temporarily disable the service or configure it to allow posting of PHP code to your admin panel. Saving the PHP code in the examples may trigger a false positive alert for XSS attacks and/or SQL Injection attacks. Please note that saving your CMS page is not actually an “attack”, the filter logic in your filtering software is merely indiscriminately capturing the PHP and Javascript code coming over the wire in the POST request when you save your page. After you have completed your editing tasks please always remember to re-enable the service.

In our example we choose to publish the web page content to a channel named “web”. The URL to a page identified as “home” will be /page/web/home. For example, if you name your channel freakyboo, the public-facing URL to the page would be /page/freakboo/home.

Hubzilla Channel Manager

After you have created your CMS channel, you will need to log into your hub as the Administrator account and grant that channel ‘code publishing’ rights.

Permit your channel to execute code.

Step 2: Create your template

In our example web site, we want to move the Account Avatar to the right side, and add “home”, “create account” and “login” menu options in the drop-down menu. (These options appear on the title bar in the default template). We also move the title to the left. We have a plain-text title in our example, you may choose to use a logo image.

Default Hubzilla Header
Modified Header

On our server, we installed Hubzilla from github to /www/hubzilla. The work will take place in the “view” directory path of the Hubzilla installation location. We shall copy the default ‘redbasic’ theme to our custom theme, which we are naming ‘biomass’. Also we shall create a directory for custom Spanish translations, ‘local-es’

cd /www/hubzilla/view/
cp -a theme/redbasic theme/biomass
mkdir local-es

Enable your theme in the Hubzilla Admin.

Enable new theme

Using the local-es directory allows us to add custom translations, without modifying the Hubzilla source. This is important so we can easily pull updates from the Hubzilla master without conflicting with our code.

In the local-es directory we need to create a single file, strings.php

We also need to copy php/default.php to our theme so we can modify it. Again, from within the “view” directory:

cp php/default.php theme/biomass/php/

Then edit default.php to match the following:

Note: the PHP code must not contain the php tags <?php or ?>

Here we are implementing a simple return-to-last page scheme using a hash method. Make sure to generate your own key using base64_encode(sodium_crypto_generichash_keygen()) and set it in the CHUCKY define at the top.

The script generates a hash based on the current requested URL, which we add to the URL of the “change language” button. Since this default.php page is called after the language setting function in Hubzilla, we can redirect back to the URL if we notice the request in the GET parameters. This makes it more convenient for users to switch language. We use the encrypted hash method as a simple means to enforce that the URL is authentic. This prevents bad actors from trying to bounce people to unintended locations using our web site.

By default, Hubzilla will read the language setting in the user’s browser. However there may be occasions when the visitor wishes to switch languages regardless of the browser setting, so we provide a convenient link in the navigation bar which returns them to the page they were viewing.

You can use the built-in Hubzilla function t(‘’) for translation.

For example, <a href=”/page/web/home”><?php echo t(‘Home’); ?></a>, will display the word “Home” in the selected language.

Our default.php page also injects the image slider on the home page.

Next we will copy the default TPL templates to our theme directory. These *.tpl files are Smarty templates. From the view directory:

cp tpl/* theme/biomass/tpl/

We will edit two templates for our example, navbar_default.tpl
and page_display.tpl

navbar_default.tpl makes the modifications to our top bar and menus. Note that Hubzilla uses jquery, bootstrap and fontawesome, so we can use these features in our templates and pages. For example <button type=”submit” class=”btn btn-primary”>Send Information</button> will render how we expect.

Note that there are two areas where the drop-down menus are defined. One for screens greater than 922 pixels (collapse-1) , and less than 922 pixels. (collapse-2) [for mobile]

page_display.tpl is the template used to render our CMS pages. Here we add a simple function to show English or Spanish content depending on the user setting. This method allows us to include both English and Spanish on the same page, without maintaining separate pages for each language. Hubzilla provides a mechanism to identify pages based on language. For example es/home would be the Spanish version of your home page. Read the file Zotlabs/Module/Page.php for more information.

Step 3: Create Content CMS pages

Hubzilla CMS Page Manager

We will create four pages for our example. Three for the main content of our site and one to handle the form submission. Use the “Create” button to create a new page and select HTML for the type. We shall create the home page.

Create the home page in Hubzilla CMS Manager

Here we put the English content in the “wenglish” div, Spanish in the “wspanish” div. The title of our page, which appears on the title bar of the browser, is set to “Biomass Home | Biomasa Inicio” and the page label is “home”. Note the lock icon next to the blue “Edit” button. (Edit means “Save”, actually). The lock icon allows us to define the permissions for the page. We want our home page to be public. However, we may have reason to offer premium content to authorized users, or some other reason to lock down the content on a page.

Next we create the contact page. Select PHP for the page type.

Create contact PHP page

In the code for the contact PHP page, we create a basic CSRF scheme. In the defines at the top we set the key and timeout. (+30 minutes means the user has 30 minutes to fill out the form). The key can come from the CHUCKY define from above, or you can create a new key.

The CSRF variable is inserted into the form using a javascript function called in the ready jquery function which executes upon page load completion. This is just a basic CSRF function for an example, you may wish to write your own more elaborate and secure mechanism.

Note that we have both English and Spanish in their respective “divs”.

What does the contact page look like?

Next we create the post-contact PHP page to handle the form submission and response. In the code we will have to validate the basic CSRF token as well as the simple form elements submitted, to avoid the crazy junk that we may see come flying in from time to time.

post-contact PHP page

In post-contact we check that we are actually receiving a POST request, and that the browser client is sending keep-alive in their HTTP request headers. (Bots can be hella fun but we don’t really want their random hyphy information coming into our inbox.) Also we only like HTTP/1.1 protocol. Maybe we will like 2.0 in the future but definitely we do not much care for HTTP/1.0

After we get a good data set we can email it to the site owner.

The final page to add is ‘about’. It’s a basic HTML page like HOME and is included here for completesonessesessess.

REFERENCES

Waitman Gobble is a developer who uses Hubzilla. Reach him on Hubzilla