How it works

Now anyone can build a static website with content management tools that are a snap to learn!
Appernetic Static website Generator as a Service, dashboard with tree view and editor

Dashboard with tree view and editor.

Editor

In the editor view, you have a formatting toolbar and a preview.

You will preferably use Markdown for formatting which is easy to add with a click of a button, which is easier to use than HTML, but you can also write HTML and JavaScript.

We have put the front matter metadata in its own view to unclutter the editor for the author and moved it from the top to the bottom of the editor view. Here you can save, rename, undraft and delete files. You can also create and delete folders. With our elegant and non-intrusive Autosave feature you will never lose your precious thoughts.

Content tree view

Using the visual tree view you can navigate the filesystem where the content is located, create, view and delete files and folders.

Image editing

It's easy to add an image by dragging and dropping it in the editor and you automatically get a Cloudinary link, no copy and pasting needed.

In the PageDown editor, you can add a URL to an image, view and select already uploaded images and also upload and crop images. From the image manager view, you can browse, view and select image files. Images in your project are located in the Cloudinary image back-end.

With Cloudinary your images are stored in a highly available, redundant, cloud-based persistent storage, with revision tracking and automatic backup.

Upload a full-sized image once and let Cloudinary generate different sized image versions from the original, on-the-fly or in advance. Manipulate your images dynamically to perfectly fit your graphic design across every device and resolution. Images are processed ultra fast in the cloud, with no local software installation or ongoing maintenance required.

Appernetic Static website Generator as a Service, Drop and upload images. View files and select different upload options.

Drop and upload images. View files and select different upload options.

Appernetic Static website Generator as a Service, Clone themes from GitHub then view and manage them.

Clone themes from GitHub then view and manage them.

Theme management

Browse a wide selection of over 110 different themes with advanced responsive functionality.

Click on a selected theme and have it auto-cloned to your project or clone themes from your GitHub account or from someone else's repository. Appernetic follows a simple convention for themes, theme config files are copied from the theme exampleSite folder if it exists, if not found a search is done to find it. Then it is easy to configure the settings from the settings tab.

Responsive Mobile first design

Appernetic is built with Twitter Bootstrap and has a responsive design that works on desktop and in most mobile web browsers.

Configuration

Each static website project is made up of content, metadata, site-wide configuration settings and a theme.

Appernetic is built with the purpose to serve as an authoring environment, therefore it is only possible to edit markdown files located in the content folder. But the markdown front matter metadata (at the top of each markdown file) together with the site-wide settings (config.toml) which can be configured from the Settings tab gives you a powerful combination to configure your website project.

A static website generator, Hugo provides a robust theming system that is capable of producing complicated websites. Themes are flexible and easy to customize without any coding.

Also as a developer, you can develop your own themes and configure them on your local computer, then when you have a working version push it to your GitHub repository and then clone it to your Appernetic account.

Organization

Appernetic is organized in three separate parts: Project, Preview and Public, to keep it clean and structured to work with and manage.

Project is your uncompiled git version controlled project, it has the name appernetic-hugo-project in the storage server but depending on how your project started out in can have a different name in your GitHub repository.

Preview is your local website preview so you can see your drafts and un-cached pages.

When you are ready to go public your project will be compiled in your Public folder and then pushed to your User or Organization GitHub pages site. If you do not have GitHub pages configured it will be set-up and configured when you press the Publish button.

Version control

Git and GitHub is used for version control, cloning, publishing and syncing of your project.

Sign in with your GitHub account and give us the authorization to create and view public repositories in your account on your behalf. A user or organization GitHub site will be created if you don’t have one when it’s time for you to publish.

If you already have a GitHub User or Organization Site it will be overwritten when you press the Publish button (force push).

Bring projects to life and work together from anywhere. Git and GitHub makes it possible for you to use social collaboration as a tool to manage website projects.

Appernetic Static website Generator as a Service, Diagram with organization and workfow (created with yEd).

Diagram with organization and workfow (created with yEd).

Static website generators

Static website generators are not a temporary phenomenon, there exist 445 static website generators and the number are increasing.

The most popular in terms of users and community is Jekyll, Octopress, Hexo, Hugo and Pelikan. In the past we have used Jekyll, Hexo, Harp and Octopress before we decided to stick with Hugo (and before that we built websites with PencilBlue, Cody, Xindi, Joomla, Wordpress, Keystone, Mura, Weebly and Vosao).

Instead of serving content by querying a database from a server side script, format it with a template engine and then generate the HTML file, a static website generator pre-generates all the content so it will be served instantly.

The content is generally stored in flat files rather than databases which make a static site perfect for version controlling.

What is Hugo?

Hugo is a static website generator that is fast, flexible and robust and has among other things support for theming, customizable URL's, taxonomies, content sorting, dynamic menus, SEO friendly URL's, permalinks and redirects.

Hugo has native support for Markdown and can also use external helpers for Asciidoc and reStructuredText (currently we only support Markdown).

Technically there is nothing stopping you from using HTML and also Javascript in the editor, but to avoid error-prone coding you have shortcodes, which is predefined scripts that are easy to include with a simple syntax like this {{% name parameters%}} (mustache style templating syntax).

In Appernetic's cloud-based CMS, the latest version of Hugo is included and you build a website in milliseconds.

Advantages

  • Speed - web servers are very good at delivering static pages quickly.
  • Version control - having a repository where people can collaboratively work on a project is a win.
  • Security - with no database and no processing of scripts, there's not much to mess up.
  • Maintenance - there's no packages, libraries, modules and frameworks to maintain.
  • Traffic surges - unexpected traffic peaks is less of a problem as static HTML pages consumes a very small amount of server resources.

Disadvantages

  • No real-time content - you lose the ability to have real-time data, but you can work around it with client side Javascript.
  • No user input - for example, you can't append user comments to a blog. The workaround is to use an external API such as Disqus, that is included with a client side Javascript.
  • No admin UI - most static website generators do not have a WYSIWYG editor. Appernetic has one built in wich you also can use on your mobile device.
Appernetic Static website Generator as a Service, diagram with architecture overview

Diagram with architecture overview (created with yEd).

Architecture

Appernetic is built in JavaScript and we use Angular.js for the client side, Node.js for the server side and glue it all together with Redis, MariaDB, Stripe and Auth0. Hugo is used for fast static website generation and Git/GitHub for version control and publishing. No sensitive data such as passwords or credit card information is stored on our servers.

Need help with your Account? Start here