April 18,2019

Web Technology

Nanoc manages the building of the website from many files of many kinds and assembles them together into the form that they need to be in to be uploaded onto the website host. There are several kinds of file that make up the source code of the website.

The content of each webpage - this is the text of the web page, and I write it in Textile, about which more later. Nanoc passes these files to the Redcloth program which turns it into standard HTML. There are lots of files like this, and I give them the .html extension even though they are not HTML yet.
and other large binary files, that nanoc doesn’t do much with apart from make sure they are placed in the right directory on the website.
Page Templates
or layout files are written in HTML and provide the repetitive parts of each webpage. Nanoc combines the content HTML that comes out of Redcloth with these Templates to form the web pages that your browser uses to present to you on screen. Without a templating mechanism each content item would have to have all the layout information in it, by doing it this way I write the layout once, and nanoc manages putting the right content in the right layout.
Styling files
these are written in CSS3 using the Sass conventions. Regular CSS is quite difficult to manage, and very repetitive, but using Sass to preprocess what I write into CSS makes it much easier to maintain. Nanoc knows to pass all of the stylesheets through Sass before putting the resulting files in the right places. The styling files and the Templates form a matching set, the layout names the items to be displayed on the webpage, and the CSS describes to the browser how to display it.
The rules file is what nanoc uses to know how to do all the above. It links all the bits together and tells nanoc which content goes with which layout, and what processing each file needs to be ready for the website. It also tells nanoc where in the websites directories each file should be put.
There are a few other files that nanoc needs but they are fairly standard, so need no description here.

The key file is the Rules file.


Post a comment

You can use the following HTML tags: <a><br><strong><b><em><i><blockquote><pre><code><ul><ol><li><del>

Reload Image