Perhaps you're intrigued by static sites but can't imagine going through the manual labor of extracting your current content into a new tool. Well - good news - most static site generators have some sort of migration tools...
We're heading to Brooklyn! This month we'll have two Sessions: CMS as Code by Dmytri Kleiner of Contentful, and a roundtable discussion with Kyle Mathews and Jeff Escalante, creators of two of the most advanced static build tools, Gatsby and Spike, respectively.
Latest Showcase Sites
Popular ToolsArticle Count on upper-right corner
- Building a Static Documentation Site with Metalsmithby Greg Leeds TutorialMay 23, 17
At work my company’s product team has been using GitHub wiki for years for all of our use facing documentation. As they have grown from a small open source project to a much larger team with a more fully featured enterprise offering, they had outgrowing using GitHub wiki. We went out in search of a set of tools to build our own self hosted documentation web site with the following set of requirements…
- GraphCMS - GraphQL Based Headless CMSby Jeff Escalante TutorialMay 17, 17
One of the great advantages of headless CMS’ is that they are able to be consumed by a wide variety of different applications and build tools, rather than being tied specifically to a web frontend. And today we’ll be talking about using GraphCMS to create a static site - an architecture that suits many use cases much better than using a dynamic site or single page app.
- Displaying Medium Posts on Your Jekyll Websiteby James Hamann TutorialMay 09, 17
The solution below uses your RSS feed from Medium, parses it and stores each post as a ‘virtual document’, in a newly created Jekyll collection. From here you’re able to access the title and content of each post, which can then be displayed on whatever page you want.
- Converting WordPress Export File to Hugoby Elmar Klausmeier TutorialApr 24, 17
Now I have written a migration program in the Go programming language to convert from WordPress export format to Hugo format. This program wp2hugo.go is in GitHub. It can be freely downloaded and does not need any further dependencies, except, of course, Go.
- Replacing Disqus with Github Commentsby Don Williamson TutorialApr 23, 17
I’ve been considering removing comments from this blog for a while; mainly because the site doesn’t trigger much discussion and I didn’t like keeping the overhead of Disqus around. After looking into Disqus load-time behaviour I was pretty shocked what I was forcing on people loading the site
- Jekyll For Wordpress Developers – Smashing Magazineby Mike Neumegen TutorialApr 21, 17
Jekyll is gaining popularity as a lightweight alternative to WordPress. It often gets pigeonholed as a tool developers use to build their personal blog. That’s just the tip of the iceberg — it’s capable of so much more!
- Hugulp, a Hugo + Gulp toolchainby Juan B. Rodriguez TutorialApr 20, 17
Having decided on Hugo, I created a workflow that would allow me to replicate the famous Ruby on Rails Asset Pipeline. The basic premise of the Asset Pipeline is to minify, concatenate and fingerprint the assets used in your blog (images, stylesheets, scripts) so that less (and smaller in size) network requests are made by the browser.
- Switching from WordPress to Nikolaby Alan Pope TutorialApr 18, 17
For a long while my personal blog has been running WordPress. Every so often I’ve looked at other options but never really been motivated to change it, because everything worked, and it was not too much effort to manage. Then I got ‘hacked’
- Getting Hugo running on Netlifyby Richard Littauer TutorialApr 17, 17
Running Hugo on Netlify is satisfyingly great. You can get a static website running with almost no operating costs (unless you’re at major scale), and you’re also able to quickly deploy by pushing to GitHub, as well as getting SSL through LetsEncrypt automatically at the push of a button.
- Powering a Website Publishing workflow with Forestry CMS and Aerobaticby Aerobatic TutorialApr 11, 17
Fortunately a new breed of CMS tools that are emerging that bridge the gap — providing a slick interface for content editors but utilizing Git as the storage repository rather than a proprietary database. As we’ll see, this enables a universal deployment pipeline where changes from developers and changes from content contributors follow the same flow to production.
- Testing your Jekyll Website with Capybaraby Philipp Hansch TutorialApr 07, 17
I recently had problems when I was migrating this blog from Jekyll 2.5 to Jekyll 3.3. The permalinks were broken after the upgrade and I only noticed this after the change went live. Some basic tests could have easily prevented this.
- Hugo Easy Galleryby Li-Wen Yip TutorialApr 05, 17
Using Hugo’s built-in shortcodes, Hugo Easy Gallery makes Hugo image galleries easy.
- Quick Tip: How to Build Customizable HTML Widgets in Jekyllby Jon Persson, Sitepoint TutorialApr 05, 17
The static site generator Jekyll is known in web design circles for being light-weight and “hacky”. But that is only part of the truth. Jekyll is surprisingly powerful in terms of what you can do with it, and how user-friendly you can make it to non-technical users and clients.
- Creating a Category Based Pagination in Liquid for Jekyll without Gemsby Jay Aevyz L. TutorialApr 02, 17
In this post, I shall describe the Paginator I wrote purely in Liquid. This was my first main feature, thus was a little rough on the edges. It was also the feature that convinced me to ditch purely Liquid based solutions since documentation and debugging of it is atrocious.
- Install Jekyll on a Windows Machineby Dinika Saxena TutorialApr 02, 17
The seemingly simple [installation] instructions on the home page of its official website didn’t work for me since I use a Windows machine.
- Serverless Stack - Step-by-step tutorials for creating serverless React.js appsby Anomaly Innovations TutorialMar 24, 17
Serverless Stack is a comprehensive guide to creating full-stack serverless applications. Create a note taking app from scratch using React.js, AWS Lambda, API Gateway, DynamoDB, and Cognito. Follow our step-by-step tutorials and use our live chat if you have any questions.
- Generating static AMP pagesby Paul D'ambra TutorialMar 22, 17
AMP or Accelerated Mobile Pages is a Google-backed project that allows you to use restricted HTML to delivery static content quickly. Since AMP HTML is restricted it isn’t a fit for every site. Since this blog is published as static HTML artiles it is a good candidate for publishing an AMP version. An open source AMP jekyll plugin was amended to add AMP versions of pages.
- Dealing with version conflicts between Hugo and Netlifyby Adam Wills TutorialMar 19, 17
One of the trickier issues that I dealt with when getting started with Hugo and deploying to Netlify involved what I later found out to be a conflict of versions.
- Draft Blog Posts in Middlemanby Rubyletter TutorialMar 15, 17
The RubyLetter site — the one you’re reading right now — is built using the static site generator, Middleman. I really like Middleman because it feels much more fully-featured that Jekyll. However one thing that I missed from Jekyll was the drafts folder. You can put draft blog posts in _drafts and you’ll see them in development but not in production.
- Go static: 5 reasons to try JAMstack on your next project.by Tom Bennet, Builtvisible ArticleMar 13, 17
- Enabling offline usage of a Hugo site (PWA)by Michel Racic TutorialMar 12, 17
PWA (Progressive Web Apps) are pretty cool for certain use cases like users having flaky connections (e.g. from mobiles) or just to reduce the initial loading time (after the first visit to the page). I document my exercise adding offline capability to a small single page site with no frequent updates that I built with Hugo and the Dimension theme.
- Twitter cards partials for Hugoby GoHugoHQ TutorialMar 10, 17
With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers. Here we will build a partial that shows you how to embedd this with ease in Hugo.
- Gatsbygram Case Studyby Kyle Mathews Case StudyMar 09, 17
It combines the fast performance of static websites with the powerful abstractions, tools, and client capabilities of the React.js world.
- Autolinking shortcode through articlesby GoHugoHQ TutorialMar 09, 17
Sometimes its hard to crawl through all your articles and link them with specific keywords. What if you could just define the keywords you would like to have linked and Hugo finds the proper keywords and link them automatically with the actual page.
- Go offline! Service Worker and Hugoby gohugohq TutorialMar 08, 17
After mobile first, offline first and progressive web apps (PWA) are the current trend at the moment. Service Workers are crucial for both of them. A service worker is basically a script acting like a proxy between the browser and the network. You will find a simple example how to install a service worker for your Hugo satic site to make it blazing fast.
- Getting to grips with Contentful and Jekyll – Leon Paternosterby Leon Paternoster TutorialMar 08, 17
Contentful, if you’re unaware, is a platform agnostic Content Management System (CMS). You use its API to pull content into a website or app. There are several reasons for using Contentful instead of/in addition to a CMS
- Compare date strings in hugoby GoHugoHQ TutorialMar 07, 17
Assume you wish to compare two formatted date strings like 2017-03-15 with 2017-01-12 and you want to compare them which one is older. Or check if a date is in past or future.
- How to schedule posts for static site generators (Jekyll, Hugo, Phenomic etc.)by David Wells TutorialMar 07, 17
The post scheduler is a serverless project that gives static site owners the ability to schedule posts (or other site content).
It works with any static site setup (Jekyll, Hugo, Phenomic, Gatsby etc.)