What’s left is to move generated HTML files to your web server. By default Metalsmith will copy all other files (styles, JavaScript) from a source directory to destination directory as they are. Metalsmith will delete the old HTML files before creating new ones by default. The resulting HTML files are created in directory. Now, if you run node index.js all Markdown files from markdown directory will be converted to HTML using the template and partials from templates directory. We are catching and logging any errors which might happen during the build process.Īs you might have already guessed, Markdown files are located in markdown directory, template files are located in templates. Next, we setup Metalsmith static site generator, with Metalsmith(.) providing it the location to a current directory and instructing to use Handlebars templates, use markdown directory as a source and directory as a destination for generated HTML files. This allows us to keep shared header and footer for all pages. Then we are registering partials for Handlebars templates. First, we retrieve all the required modules. In you are familiar with NodeJS applications, this file doesn’t look very complex. The contents of the file are the following: ) It has a list of dependencies which application relies on in the dependencies section. Package.json is a packaging file for Node applications. Let’s go through the files in the project. Metalsmith is NodeJS module and requires NodeJS to be installed on the system. Now let’s reference the current project structure of source code We are using metalsmith.io simple static site generator to convert Markdown pages to HTML markup. How did we set it up? Maintain static HTML websites with Markdown and Metalsmith Now, everyone wishing to add their application to the list only has to issue a GitHub pull request to MobileGap GitHub project in order to update the pages. Markdown pages should be hosted on a publically accessible repository like GitHub. The good option for such setup was to maintain website content in Markdown language, generate HTML markup from it and move generated HTML files to be served by the web server. The first version of was quickly put together by using existing WordPress template we had lying around.īut, as the number of developers asking to add their open source applications to the list grew, we decided to open source the content creation of this website. MobileGap is a simple web application we have created to maintain the list of open source mobile app projects. MobileGap – the list of open source mobile applications In this tutorial, we are going to show you example setup of Metalsmith generator to maintain a simple static web application. Markdown format is easy to read for humans and can be understood by static site generators who convert it to HTML pages. The most popular solution is to maintain your static pages in the language like Markdown. However, being a markup language, HTML is hard to read for humans. You can, of course, create and maintain your static website pages in HTML language itself. What are most common ways of generating static HTML websites? Examples would be GitHub pages or even DropBox. This approach allows you to host your web pages on different platforms which support static HTML pages but not server side languages. HTML and all corresponding style and JavaScript files are already created and just served by a web server as they are. Static web applications, do not have the server app side. Web server application is using front end templates and data stored in databases to generate final HTML pages. In the dynamic web applications, HTML representation files are generated dynamically, in most cases by the web server. In addition to HTML, web applications usually have dedicated JavaScript and style files. This language is what web browsers read, understand and render. The language in which all websites and web apps are being presented on the web browsers is HTML.
0 Comments
Leave a Reply. |