I hate complexity. And when I say hate I really mean it. When you build websites several years, you start realizing that the simplicity is your best friend. As simple one system is as easy is to develop and maintain it. Nowadays, every
user wants to control the content in its online appearance. For me, as a blogger, is important to work with good looking, fast and reliable CMS. The writing is difficult as its own, and if the process is tough the whole experience is not very
good.
At the moment, if I want to publish an article on my blog I have to open the administration of my custom PHP CMS and make a new entry. However, I’m not happy with writing the content there, and I prepare the posts in Markdown format.
When I’m ready, I transform the Markdown to HTML and publish it to the site. All the things written by me are stored in GitHub repositories.
So, as you can see, there are several steps that I have to follow before publishing something. Sometimes I’m just too lazy to do it, and I simply don’t blog. Last few months I’m thinking about changing the way of how I write. I need something
new and interesting that will replace the old LAMP system. I read few articles about flat file content management systems, and I decided to invest some time in developing
such on top of Node.js. While I was working on the documentation of AbsurdJS, I made a short Node.js script that uses Gulp to convert Markdown to HTML. I like how everything works
and decided to take this direction.
The new toy
Two days (and nights) later and Techy was born. That’s a Node.js module that have all the characteristics of a simple flat CMS which I needed.
Simplicity – simply drop a markdown file and execute techy command. The module converts all the .md files into .html pages.
Predefined design – Techy copies the needed CSS and JavaScript (if any) into the root folder of the project.
Theming – of course, as every other CMS, it offers the usage of different themes. So you are able to change the main layout, the styles, the fonts, everything.
Partials support – along with the Markdown syntax you are able to write Techy expressions. In fact, this is just the good old JavaScript between <% and %> markers.
There are some predefined methods and variables which are available. One of them is the template function. It accepts a relative path to HTML file.
Plain HTML support – sometimes the Markdown format is not enough. In such cases, the CMS should support adding of plain HTML.
Relation between the different pages – that’s pretty important feature. In the popular solutions like WordPress, for example, information like date of creation or post’s author is kept in the database. However, we do not have a database here.
So, such information should be written directly into the pages. I found that this pretty useful approach, because it tights the characteristics of the article to its content.
Code syntax highlighter and icon font
Let’s try it
Before to start using Techy, you need to install it.
The command will setup the library as a global command line tool. Create a new folder somewhere and add the following page.md file:
Navigate to the same directory, type techy and press Enter. You should see the following screen.
Techy generates page.html next to your page.md file. Along with that it brings new folder themes. It contains the main HTML layout,
the CSS styles and the JavaScript (if any) code needed for your page. Techy has Prism and FontAwesome integrated. So you are able to publish code and use
cool icons without additional setup. And because the CMS uses Gulp it automatically starts listening for changes in your Markdown files.
The content of page.html should be:
Techy takes care for the boring stuff and leaves your file clean. The HTML that your content is put in is defined in themes/default/tpl/layouts/basic.html. You may change it to something else by using the
following expression:
You could even use your own theme. Just call the techy command with the following parameter:
Have in mind that the module is dealing with the paths in your files. Even if you have a deeply nested files the URLs of the CSS styles and JavaScript files will be set properly.
Now, to make the things a little bit more interesting, let’s create a custom Techy function which returns a setting defined in another page. In order to do this, we need a new Markdown file. Create profile.md and
put the following text inside:
set creates property in the current page and assigns a value to it. The same value could be fetched with the get method. Now, to define a new method like get or
set
we have to create a JavaScript file which name ends on techy.js. For example getprofile.techy.js.
The this keyword inside the function’s body points to the page that is running the method. this.page is a predefined function which accepts a name of the page. And because
we defined profile property in profile.md we are now able to get its value and return it. If we update page.md with the following
code:
the result will be:
There is also pages function that returns and array of all the pages in the project. So, in theory we are able to implement whatever we need, because we have access to every single page and its defined properties.
Why you should consider the usage of flat file CMS like Techy
I could see three big benefits:
No database – this means that the overall page load will be reduced dramatically. You are serving only static HTML files.
No additional setup – you just need the files uploaded. There is no back-end technology involved. You may generate the HTML locally.
Super fast and easy migration – there are no configurations or database dumps for importing
Summary
Techy is an open source project available at GitHub. Its repository is located here. Feel free to fork it and make modifications, new functions or themes. I’ll be happy to push the module forward.
The official page of the tool krasimir.github.io/techy is also generated with Techy. The code could be seen here.
Read the full article at: Look Ma, no CMS!
Related Posts
Using the GitHub API and PHP to Get Repository Information
Disable WordPress autop
Add META Tags, Scripts, and Stylesheets to the WordPress Header and Footer
Remotely Download Google AJAX Libraries Using PHP
Dynamically Load Stylesheets Using MooTools 1.2