Select Page
Static website generators – part 3

Static website generators – part 3

After a long break let’s take a look at another Static Generator – Hexo.

Hexo is powered by Node.js and is mostly aimed at blogging. It has a deploy integration for GitHub which makes it a great fit to build a documentation site for a GitHub project as well. If you are a JavaScript developer, the setup should be relatively easy. Like many other general purpose generators, you’ll probably want to write your content in Markdown. The default templating engine is Swig, which is once again well suited for JavaScript developers. However, Hexo is extensible to allow other templating engines to be used if you want.

The Hexo website includes a range of pre-built themes for you to try out, and one especially popular feature of the tool is its support for single-command deployment.

Installation of Hexo

Installing Hexo is quite easy. However, you do need to have a couple of other things installed first:

This link provides details to install Hexo. Just follow the steps.

Static Website Generator vs WordPress

We reviewed static site generators when we began this series of articles. If you need a quick review – a static site is a collection of pages contained in basic HTML files.  A static site generator (SSG) is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as Markdown files) and templates. The resulting build is transferred to your live server. Static site generators are systems that compile templates into static HTML pages. There is no server processing or rendering, so static websites tend to be very fast and lightweight, saving you and your users precious time and bandwidth. This increased efficiency is reflected in lower costs (including lower maintenance costs) and, potentially, higher revenues.

What is the difference between WordPress and Hexo?

When talking about performance, one must think about caching. Although there are multiple techniques for caching WordPress, this is not usually a straightforward task, unlike caching static files. Serving cached files is more performant than serving actual files from the server and it can save time when loading websites.

Advantages of Hexo

Hexo has many pros:

  • it is blazing fast,
  • it is easy to deploy to GitHub pages or any other host with one deploy command,
  • it is powerful with solid Markdown support,
  • it is highly extensible,
  • it is open source and there are many open source themes, and
  • there are available free plugins.

With Hexo, one can create markdown files and HTML layouts which will be converted to static HTML files when deployed. Hexo provides a deploy configuration which builds our static files into a GitHub branch. This means one can maintain documentation as markdown in our project’s master branch and deploy it, with one command, to gh-pages.

My experience working with Hexo

I decided to create a blog post for Hexo without any graphics. I found creating the blog post in Hexo to be easier than Jekyll. Readers may recall that I discussed Jekyll as part 2 of this series. The default theme also looks good on the site. I decided to just run the site locally. If time permits, I may post some of these examples on a Web Professionals server and link to them. In the interim, here is a screen capture of the results. I did not encounter any major issues when working with Hexo locally.

Screen capture of simple Hexo blog post.
Example of Hexo blog post

Final Thoughts

During my course of study as a Web Developer I tried many CMS systems and installed a lot of software. I found working with Hexo a little easier than most. It also has a little learning curve. One must use the command prompt to run different commands. I was able to get desired output to display locally with not that much effort. Each time I made changes I had to run ‘hexo server’ command on command prompt. That is the essence of static site generators (one must remember to constantly update the resulting web pages when changes are made).

One may find it simple and easy to build sites using Hexo or one may face problems initially installing and running and deploying. It all depends how the computer configuration/set up is. I am curious as to your experiences with Hexo. What did you like/ dislike? Please update the comments with your experiences.

Static Website Generators – Part 2

Static Website Generators – Part 2

We covered the fundamentals of static site generators recently. Let’s take a deeper dive into one of them.

Jekyll 

Jekyll remains the most widely used static site generator. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting. The Liquid templating engine is used to place this Markdown content into the HTML template, and to combine templates representing various parts of a page (say, header, footer and content) in a modular and re-usable manner. It also has support for Sass for those with a preference for CSS pre-processing, and it’ll play fine with libraries like Bootstrap. Also included with Jekyll is an HTTP server which can be used to easily deploy and test your static pages locally.

Importers is a feature which enable an existing site to be migrated to Jekyll with relative ease. For example, you can take an existing WordPress site as a starting point with Jekyll using one of the importers.

If you have a GitHub repository, you’re able to create a GitHub pages site for free using Jekyll. This can be a convenient way to give a polished landing page to your GitHub project.

The big downside of Jekyll – and this applies to most generators – is that it can seem complex at first and is a new technology to master.

If you want to try it yourself, here is the link to install Jekyll.

Installation of Jekyll

You first need to install the Ruby DevKit or you will experience errors. If you are installing Ruby only for the purpose of running Jekyll, Portable Jekyll will give you a full working Jekyll install in less than 5 minutes.

Few easy steps:

To set up your site locally with Jekyll, follow these steps:

  1. Create a local repository for your Jekyll site.
  2. Install Jekyll using Bundler.
  3. (optional): Generate Jekyll site files.
  4. Build your local Jekyll site.
  5. Keep your site up to date with the GitHub Pages gem.
  6. Configure Jekyll.

Does Jekyll generate valid HTML?

Jekyll essentially a parser that converts plain text content written in a special formatting language called Markdown into HTML. These content blocks get inserted into one or more templates to build final output for a static page or a post. Markdown is a styling language used to prepare written content such as blog posts in Jekyll that can eventually be converted into HTML. Markdown allows user to focus on content by using an easy-to-read and easy-to-write plain text format, which can then be converted to valid HTML.

My experience working with Jekyll

Jekyll is widely used Static Generator. I tried working with Jekyll. I followed easy steps to install and run a Jekyll post locally. I first installed Ruby, then used the command prompt to get the desired Jekyll output locally.

Here are some screen captures to get an idea how the site look like. It is a simple blog post without any graphics.

I transferred all generated files and also post I created via FTP to a server. It didn’t give the desired output shown in above images. For example, the link to the CSS file appears to be broken upon transfer.

During my course of study as a Web Developer I tried many different CMS and installed different software, but working with Jekyll is little different. It has a bit of a learning curve and I think someone before working may need someone to have a little technical background. I am still trying to see what I need to change in the background code when it is transferred to a server. Clearly, something did not work properly.

These are my initial observations on using the tool. You may have different experiences and we look forward to your comments. The biggest issue with using any static generator is that you must generate the entire site each time you make updates (so all the links work). You would then need to transfer the appropriate files to the server each time. In my opinion, there are other tools (such as WordPress) which would seem to be more efficient (although less secure as they interact with a database).

As always, we look forward to your comments.

 

Static Website Generators

Static Website Generators

What is a static website generator?

A static site is a collection of pages contained in basic HTML files. A static site generator is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data such as Markdown files and templates. The resulting build is transferred to your live web server.

An Introduction to Static Site Generators article was published a few years ago. The basic concept has remained constant. It explains the popularity of static site generator. It also help people of all skill levels understand exactly what static site generators are, acknowledge their advantages, and understand if their limitations are a deal-breaker or if, on the contrary, they can be overcome.

How static sites work?

The proposition of a static site is to shift the heavy load from the moment visitor’s request the content to the moment content actually changes. Using a news kiosk metaphor, think of a scenario where it’s the news agencies who call the kiosk whenever something newsworthy happens.

Example website prototype displayed across different devices (desktop and mobile)

(more…)

PHP 5 – End of Life

PHP 5 – End of Life

PHP Matters

PHP is a commonly used language for web sites and web application development. It is a general purpose, server-side scripting language run a web server that’s designed to make dynamic pages and applications. PHP is mainly focused on server-side scripting tasks, such as collecting form data, generating dynamic page content, or tracking session state. PHP also does much more.

Decorative image displaying text on a monitor

(more…)

Accessibility and WordPress Gutenberg

Accessibility and WordPress Gutenberg

What is WordPress Project Gutenberg?

Gutenberg is more than an editor. While the editor is the focus right now, the project will ultimately impact the entire publishing experience including customization (the next focus area). Gutenberg looks at the editor as more than a content field, revisiting a layout that has been largely unchanged for almost a decade. This allows us to holistically design a modern editing experience and build a foundation for things to come.

Here is the link to get more information on the Gutenberg plugin.

WordPress logos on blue background.

(more…)

How Cyber Security is changing the web design industry

Today’s article is from our member Julia Eudy. Julia – Many thanks for writing this article and providing your insights.

When I think of the industry of web design, I think of the many talented people responsible for populating the internet with information over the past couple of decades. But our job is never done! From continual refinement of responsive design, to developing content worthy of Google’s latest search strategy; our jobs as designers and web managers is an ever-evolving landscape. In today’s market it is essential to stay current with technology and the threats targeting those we serve and those who search online. Without constant awareness and action by our peers in technology, cybercriminals will continue to challenge our time, patience, and livelihood.

Websites have become Key Point of Attack for Cybercriminals

While many believe that email phishing is a key entry point for most cyber criminals, it has become apparent that they are often using an unsuspecting website to hide their activity of malware designed collect valid emails and launch other criminal schemes. While some argue that nothing is hack-proof; content management systems built on open-source code have enabled the unsecure environment we now reside. It goes without saying that sharing code saves time; but is it worth the longer-term cost?

Let’s explore the leading CMS platform, WordPress. It is an easy-to-use interface making it popular among novice developers and DIY professionals, but it is often a prime target of hackers who specifically build robotic scripts designed to quickly search through the openly published source files looking for vulnerabilities. Technical web designers (those who know how to customize the code and apply advanced security settings) understand that keeping current on updates and effectively managing a recovery plan for the sites you have created has become a time-consuming task and one that is raising the overall cost of website management. However, the millions without some technical skillset, have likely already become an unsuspecting victim to one of the many ongoing threats facing the WordPress community.

A prime example of how open-source code created a breeding ground for a cyberattack happened in early 2017 when one of 20 hacking groups launched a digital turf war on WordPress by discovering a flaw found in their REST API script. A wide-spread attack impacted roughly 1.5 million pages of WordPress sites1 across 39,000 unique domains in a matter of days as reported by security plugin developers WordFence and Sucuri. Keep in mind that only 1.5 million of the 24 billion pages running WordPress2 are protected by these firewall applications.

Insurance Companies are Looking at Who to Blame for the Increase in Commercial Claims

From the outside looking in, the internet landscape is under attack, but who is to blame? This is a question many insurance companies are beginning to ask3 as their costs to cover cyber-attacks on commercial policies continue to rise.

Looking at a big picture, here are some general facts to consider…

  • According to the Small Business Administration, there are approximately 28 million small businesses in America which account for approximately 54% of all sales in the country. 4
  • In a 2017 report by Kaspersky Lab, the average cost for a data breach against a small and medium-sized business in North America was $117,000.5
  • An article published in 2017 by INC Magazine, referenced a presentation made at the NASDAQ by Michael Kaiser, the Executive Director of the National Cyber Security Alliance, who stressed concerns about the attack on Small Business and that such attacks are expected to continually rise because of their (the small business professional’s) lack of awareness of the pending risks.6
  • A 2016 study performed by Ponemon Institute LLC and Keeper Security revealed that the number one type of cyber attack targeting small and medium sized businesses was through a web-based attack with the web server being the most vulnerable entry point.7
  • That same study by Ponemon Instutute cited “negligent employees or contractors” as the root cause of the data breach. 7

So, I ask you, when the Insurance companies follow the facts, who do you think they will turn to recover their loss?

  • Will it be the random person who pointed out their vulnerability by successfully holding their web presence ransom? – likely not. That person is too difficult for them to track.
  • Will they blame the contractor who their customer hired to create their website? – Yes!

In recent conversations I’ve had with insurance professionals, one question asked was, “Should web designers have an ethical obligation to inform an untechnical customer of the risks involved with having a website?” As a technology professional, I agreed that they should and most likely do, but it is often the customer who elects to not add to their expenses for proper technical support. Their reply – “Ok, show me the proof and we go back to our customer!”
Most web managers are aware that being hack-proof is near impossible to achieve; however, as web professionals we are hopefully more aware and have taken necessary precautions to defend our livelihood. Contracts, authorized “opt-out” forms proving we’ve informed the customer of the risks, and building trusted relationships with supporting contractors are just a few first places to start; but having our own policies to cover mistakes and cyber threats should also be considered.

Like our other certifications, we are exploring resources necessary to develop a comprehensive training and security certification to help web developers stay current with different types cyber threats that they may encounter. This certification would identify specific areas that are being targeted and give the opportunity for continued training opportunities to learn more or improve your skills in specific areas. This certification would also classify you as a Cyber Certified Web Professional which will identify to those seeking a web services provider that you have participated in training that is designed to reduce their web-based risks.

If you are interested in learning more about this certification and the time schedule for training and certification release, please contact us and let us know your thoughts.

CITATIONS:

  1.  1.5 million pages of WordPress sites
  2. 24 billion pages running WordPress
  3. Insurance
  4. Kaspersky Lab
  5. INC Magazine Article
  6. Ponemon Institute/Keeper Security Study

Author Bio

Julia Eudy is a Technology Consultant with specialties in Online Marketing, Web Design and Cyber Security. She teaches Content Management Systems (WordPress) and Social Media Marketing at St. Charles Community College in Cottleville, MO, in addition to managing a small Online Marketing firm (Golden Services Group) that focuses on online marketing solutions for small-medium sized businesses. Additionally, she is working with a group of professionals to create a training program designed to inspire K-12 students to pursue careers in technology and cyber security.