Humanizer

Minimal static site generator.

---

👋😏 Update : I've taken most of the concept here to an automation tool called markPush, check it out !

---

Create and manage your pages
Humanizer uses in-browser markdown code editor and automatically converts your pages in plain, valid, accessible HTML5.

Create and manage your uploaded files
Humanizer uses the native JS File API to upload multiple files, even the huge ones, thanks the built-in support for chunking.

Portable
No database, just files, so you can live a travelling digital lifestyle.

Independent
No dependencies, package manager, external files, or CDN.

Accessibility
Shipped with accessibility in mind.

Privacy first
No need to track anyone. Humanizer can even be used without JavaScript.

Dark mode
Because Humanizer comes from the darkness.

Table of contents

• Humanizer
  • Table of contents
  • Server requirements
  • Installation
  • Publishing your first page
  • Permissions
  • Advanced page meta tag
    • Purposes
    • Demo
  • Nginx
  • License

Server requirements

• Apache 2.4+ (or nginx)
• PHP 7.4+

Installation

1. Download/clone the repo.
2. Upload the Humanizer files to the desired location on your web server.
3. Run the Humanizer installation script by opening the admin.php page URL in a web browser.
   • For instance, if you installed Humanizer in the root directory, you should visit: http://example.com/admin.php
4. You may need to give write permissions (see the permissions chapter).
5. As it is the first time that you open the admin.php page, you need to define your password.
6. That's it, login, and publish your first pages !

Publishing your first page

Humanizer is now ready to publish your pages.

And the first page that every website needs, is the index page. We are going to create that page :

1. Login
2. On the admin panel, open the "pages" tab
3. Click on "Create a new page"
4. Fill the two required fields :
   • Page name : index
   • Page content :

     # Welcome on my website
     
     This is the content of the first page that visitors are going to see.
     

5. Click on "Create page"
6. That's it, your page is now published !

See the demo of that page here.

Go back on the "pages" tab, our first page is now listed. You can "view", "edit" or "delete" that page. But please remember that you need to have that index page, otherwise the visitors would face an error accessing your website (403 - forbidden).

As you can see the "Page content" field is powered by Markdown (More precisely, a "Github-flavored" Markdown). If you want to know more about the syntax, see this Markdown Cheatsheet by Adam Pritchard.

Humanizer also provides advanced page meta tag (see the advanced page meta tags chapter)

Permissions

Humanizer needs to be able to write on specific file and folders :

humanizer/
├── pages/
├── uploads/
└── conf.php

Depending to your web server, you may need, or not, to follow some steps. Please note that all the shell commands here are just examples (actually working examples for Debian). So, depending to your web server OS and configuration, you may need to adjust them.

1. Create the conf.php file, on the Humanizer root directory :

   touch conf.php
   

2. Give the write permissions to the conf.php file :

   chown www-data: conf.php
   

3. Give the write permissions to the pages/ directory :

   chown www-data: pages/
   

4. Give the write permissions to the uploads/ directory :

   chown www-data: uploads/
   

And if you want to know more about file permissions, what should be done or not, see this great article by Emmet (PiMyLifeUp)

Advanced page meta tag

To push your page customization up to the next level, Humanizer provides the following meta tag :

• lang
• title
• description
• keywords
• image
• css
• js

When you want to use some of these custom tags, you must :

• start your page content by three dash ---
• followed by the tags and their values (e.g. lang: en)
• then close the tag customization by three dash ---

Example :

---
lang: en
---

# Welcome on my website

This is the content of the first page that visitors are going to see.

Purposes

• lang : define the document's language (ISO 639)
• title : define the document's title
• description : define the document's description
• keywords : define the document's keywords (comma separated)
• image : define the document's image (for social media sharing)
• css : define the document's stylesheet URL (can be defined multiple times)
• js : define the document's JavaScript URL (can be defined multiple times)

Demo

Here is a page content example, that is using all the available tags :

---
lang: en
title: This is a custom title
description: This is a customized description of my page, usefull for SEO and social medias.
keywords: life, universe, web, bmx
image: https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Farmer_meme_with_apostrophe.jpg/1024px-Farmer_meme_with_apostrophe.jpg
css: https://unpkg.com/@csstools/normalize.css
css: https://unpkg.com/mvp.css@1.12/mvp.css
js: https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
---

# This title will not be used as the document title, as it has been defined using a custom meta tag

I love publishing new pages everyday.

In publishing and graphic design, [Lorem ipsum](https://en.wikipedia.org/wiki/Lorem_ipsum) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.

See the demo of that page here.

Nginx

If you are using Nginx (instead of Apache), you may get inspired by the following configuration.

Be aware that this nginx configuration is provided as an example. You are free to modify it to fulfil your needs.

server {
	listen 80 default_server; # port 80
	listen [::]:80 default_server; # port 80
	root /var/www/html/humanizer; # CHANGE THIS
	index index.php index.html index.htm index.nginx-debian.html;
	server_name _; # CHANGE THIS

	location / {
		try_files $uri $uri/ /pages/$uri =404;
	}

	# https://www.nginx.com/resources/wiki/start/topics/examples/phpfcgi/
	# https://www.php.net/manual/en/install.fpm.php
	location ~ \.php$ {
		include snippets/fastcgi-php.conf;
		fastcgi_pass unix:/var/run/php/php8.1-fpm.sock; # PHP version
		fastcgi_param SCRIPT_FILENAME $request_filename;
	}

	# deny access to .htaccess files
	location ~ /\.ht {
		deny all;
	}
}

License

Humanizer is released under the GNU General Public License v3.0 or later, see here for a description of this license, or see the LICENSE file for the full text.

Humanizer is using parts of Primer Primitives, licensed under the MIT License, CodeMirror, licensed under the MIT License, Jerry's custom CSS reset, licensed under the MIT License, Highlight.js, licensed under the BSD-3-Clause License, Plupload, licensed under the AGPL-3.0 license, Parsedown, licensed under the MIT License, Apache Server Configs, licensed under the MIT License.