Views
8 months ago

Web_Designer_UK__May_2018

10 BEST STATIC SITE

10 BEST STATIC SITE GENERATORS 3. GATSBY www.gatsbyjs.org PRO : Gatsby uses some of the latest web technologies such as ReacttocreatestaticPWAs Like Hexo, Gatsby is powered by Node.js and so will be more familiar territory for experienced JavaScript developers. However, several things set it apart from other similar tools. Gatsby uses React, which means that everything is built with components, and allows it to benefit from React’s approach to DOM rendering. This means it can be picked up quickly by developers who have worked with React, but for those unfamiliar with it, learning React will be necessary. It also utilises GraphQL at build time to retrieve data and content from data sources, which provides a modern, consistent interface to ensure that each page receives the exact data needed when it is built. Finally, Gatsby will build pages as progressive single page apps, meaning that the entire site is downloaded and subsequent navigation is immediate. 3. 4. 4. HUGO https://gohugo.io PRO : Aims to be the fastest static site generator. Hugo is the other big hitter alongside Jekyll Widely regarded as the ‘other’ leading static site generator, it’s only natural to compare Hugo with Jekyll. Hugo is the newer of the two, and one of its key focus areas is speed, which for some has been a complaint with Jekyll. Nobody likes waiting for a site to build, and Hugo can put together a simple site from your markup and templates in milliseconds, or even blaze through thousands of pages in seconds. With Hugo it’s also typical to write content with Markdown, and the templating engine is based on Go templates since Hugo itself is implemented in the Go programming language. Like Jekyll, it ships with a lightweight HTTP server to quickly serveyourpageslocally.Thetwo tools’ build workflows are overall fairly similar. Formany,thekeybenefitofHugois its quicker, simpler path to getting started, with very little need for configuration and no dependencies other than the core binary. Its documentation and tutorials are very good, and it has an ethos of maintaining simplicity which makes for a very approachable learning curve. One disadvantage Hugo has relative to Jekyll is that it lacks the extensive plugin ecosystem available for the latter. Given its wide range of built-in functionality, however, this is unlikely to be a problem for most users. It also may be marginally lighter on support on sites such as StackOverflow since it hasn’t been around as long; however, it continues to grow in popularity and many believe it may become the leading static site generator in the near future. “ HUGO CAN PUT TOGETHER A SIMPLE SITE FROM YOUR MARKUP AND TEMPLATES IN MILLISECONDS ” 76 __________________________________________________feature

10 BEST STATIC SITE GENERATORS 5. NUXT https://nuxtjs.org PRO : UseNUXTtotake advantage of Vue.js for your static sites Vue.js has gained immense popularity as a front-end framework in recent years, due to its combination of a gentle learning curve, high performance and powerful feature set. Nuxt.js is actually a framework for creating server-rendered Vue applications – that is, dynamic pages which are rendered by the server 6. 7. PELICAN http://docs.getpelican.com before being passed in their completed form to the client to display. However, it can also be use to build static sites, with a command line parameter that will build static HTML pages for all routes through a Vue project. Since Nuxt is a Vue framework, familiarity with Vue will be necessary to use it, but developers who have worked with Vue before will feel right at home. And, like Vue, it also brings a component-based approach to development of your sites. 5. 6. MKDOCS www.mkdocs.org PRO : MkDocs might well be the easiest way to create websites for project documentation MkDocs is more specialised than the tools we’ve looked at up until now. It sets out with one very simple objective in mind: to provide a fast and easy-to-use way to generate HTML sites for project documentation. And it absolutely succeeds at doing this. It’s built in Python, so you’ll need Python and pip (Python package manager) installed to get it. After that, getting started is easy. Documentation is written in Markdown, and the tool is configured using a single YAML file. The command-line build process is as simple as it could be. The MkDocs GitHub page includes a number of themes which are specially designed for documentation, or you can build HTML for your own theme. MkDocs is one of the easiest static site generators to get started with, and if documentation is your use case, there really isn’t much cause to look at other tools. PRO : Pelican is a highly popular static blog generator built in Python Pelican supports content written in multiple languages, including the ubiquitous Markdown. It uses the Jinja templating engine, which is both easy to use and extremely powerful, meaning that while Pelican is primarily optimised for building blogs, it is also well suited to building a wide range of different types of other sites. It’s also fast, and can comfortably handle sites with thousands of pages without making you wait for them to build. Like many of the leading static site generators, Pelican allows you to import your site from a variety of blogging platforms. This makes it trivial to convert an existing site built with WordPress or many other popular content management systems. If you’re familiar with Python, and especially if you’ve used 7. Jinja templates before, Pelican is a very safe choice. Conversely, however, it may be a little harder to get to grips with for developers who are more familiar with JavaScript or Ruby. “ WHILE PELICAN IS PRIMARILY OPTIMISED FOR BUILDING BLOGS, IT IS ALSO WELL- SUITED TO BUILDING A WIDE RANGE OF DIFFERENT TYPES OF OTHER SITES ” feature _________________________________________________77

Web_Designer_UK__May_2018
Web_Designer_UK__May_2018
Web_Designer_UK__May_2018
Brand_Manual_Guide_a4_v3
Web_Designer_Issue_262_2017
IN ACTION
Refreshing_Your_UI_with_HTML5_Bootstrap_and_CSS3_HTML5Denver2013
H95bvZ
Appliness-April-2013
Full Stack Web Design
Professional JavaScript For Web Developers
vuejs
Learn_To_Code_part_1092864a
download the slides (PDF, 12MB)
1I1dzX8hh
MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF
alufix - Duroc AB
Download
Metro Revealed - Download Center - Microsoft
Start Here! Learn JavaScript - Cdn.oreilly.com
Portal Technologies - Geon
Web Design Tips
Reflective Journal
javascript
AJAX and PHP
asia-15-Johns-Client-Side-Protection-Against-DOM-Based-XSS-Done-Right-(tm)
BRANDBOOK
Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition
DEPLOYING WEB APPS NATIVELY - Motorola Solutions Launchpad
jQuery in Action - Manning Publications