Working with Static Sites: Bringing the Power of Simplicity to Modern Sites

by Raymond Camden, Brian Rinaldi

Overview

Just like vinyl LPs, static sites are making a comeback, evidenced by the wide array of static-site generators now available. This practical book shows you hands-on how to build these simple sites for blogs and other use cases, and how to make them more powerful. In the process, you’ll work with some of today’s more mature and popular static-site generators.

Authors Raymond Camden and Brian Rinaldi explain the advantages of using static-site generators for building fast and secure sites. Web and frontend designers and developers will also explore methods for adding dynamic elements and for migrating an existing CMS to a static site.

• Build a basic four-page static site with the Harp generator
• Create a simple blog with Jekyll
• Develop a documentation site with Hugo by generating site files and creating the layout
• Add dynamic elements, such as forms, comments, and search
• Integrate a CMS with tools such as CloudCannon and Netlify CMS
• Use one of several options to deploy your static files
• Learn methods for moving an existing CMS to a static site

Product Details

ISBN-13:	9781491960899
Publisher:	O'Reilly Media, Incorporated
Publication date:	03/03/2017
Sold by:	Barnes & Noble
Format:	eBook
Pages:	198
File size:	29 MB
Note:	This product may take a few minutes to download.

About the Author

Raymond Camden is a developer advocate for IBM. His work focuses on the StrongLoop platform, Bluemix, hybrid mobile development, Node.js, HTML5, and web standards in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at [e-mail].

Brian Rinaldi is the Developer Programs Manager at Telerik focused on ensuring that the Developer Relations team creates top notch content for the web development community on the Telerik Developer Network. Brian also serves as co-editor of Mobile Web Weekly and authored a report on Static Site Generators for O'Reilly. You can follow Brian via @remotesynth on Twitter.

Table of Contents

Preface vii

1 Why Static Sites? 1

Benefits of Static Sites 2

Static Sites Are Fast 2

Static Sites Are Secure 2

Other Benefits 3

What Kinds of Sites Can Go Static? 3

What Are Static Site Generators? 4

2 Building a Bask Static Site 9

Welcome to Harp 10

Your First Harp Project 12

Working with Layouts and Partials 16

Working with Data 19

Generating a Site 25

Building Camden Grounds 25

Going Further with Harp 37

3 Building a Blog 39

Slogging with Jekyll 39

Your First Jekyll Project 41

Writing a Post 45

A Quick Introduction to Liquid 48

Working with Layouts and Includes 50

Adding Additional Files 52

Working with Data 54

Configuring Your Jekyll Site 57

Generating a Site 59

Building a Blog 59

Going Further with Jekyll 66

4 Building a Documentation Site 69

Characteristics of a Documentation Site 69

Choosing a Generator for Your Documentation Site 70

Our Sample Documentation Site 71

Creating the Site 74

Installing Hugo 74

Generating the Initial Site Files 75

Configuring the Hugo Site 76

Adding Content 77

Creating the Layout 79

Going Further 86

5 Adding Dynamic Elements 87

Handling Forms 87

Wufoo Forms 88

Google Docs Forms 93

Formspree 97

Adding a Comment Form to Camden Grounds 99

Adding Comments 101

Working with Disqus 102

Adding Comments to The Cat Blog 105

Adding Search 106

Creating a Custom Search Engine 106

Adding a Custom Search Engine to a Real Site 110

Even More Options 111

6 Adding a CMS 113

CloudCannon 114

Creating a Site on CloudCannon 114

Editing a Site on CloudCannon 117

Where to Go from Here 121

Netlify CMS 122

Setting Up the Netlify CMS 122

Where to Go from Here 130

Jekyll Admin 130

Setting Up Jekyll Admin 131

Editing a Site in Jekyll Admin 131

Where to Go from Here 135

More Options 135

Forestry.io 136

Lektor 137

Headless CMS 137

7 Deployment 141

Plain Old Web Servers 141

Cloud File Storage Providers 142

Hosting a Site on Amazon S3 142

Hosting a Site on Google Cloud Storage 147

Deploying with Surge 151

Deploying with Netlify 157

Summary 167

8 Migrating to a Static Site 169

Migrating from WordPress to Jekyll 169

Other Migration Options 174

Hugo 174

Middleman 176

Hexo 177

Harp 177

Many More Options Are Available 177

Go Forth and Be Static 177

Index 179