Web-Design
Saturday December 5, 2020 By David Quintanilla
How To Migrate From WordPress To The Eleventy Static Site Generator — Smashing Magazine


About The Creator

Scott Dawson lives in Trumansburg, New York. He’s an online designer and developer and enjoys writing, appearing, creating artwork, and making music. Scott is a front-end …
More about
Scott

Should you’re a designer or developer with intermediate information of HTML and JavaScript, and know your manner round GitHub and the command line, this tutorial is for you. We’re going to stroll step-by-step by means of changing a WordPress website right into a static website generated from Markdown.

Eleventy is a static website generator. We’re going to delve into why you’d wish to use a static website generator, get into the nitty-gritty of changing a easy WordPress website to Eleventy, and speak in regards to the professionals and cons of managing content material this manner. Let’s go!

What Is A Static Website Generator?

I began my net improvement profession a long time in the past within the mid-Nineties when HTML and CSS have been the one belongings you wanted to get a web site up and working. These easy, static web sites have been quick and responsive. Quick ahead to the current day, although, and a easy web site will be fairly sophisticated.

Within the case of WordPress, let’s suppose by means of what it takes to render an online web page. WordPress server-side PHP, working on a bunch’s servers, does the heavy lifting of querying a MySQL database for metadata and content material, chooses the appropriate variations of pictures saved on a static file system, and merges all of it right into a theme-based template earlier than returning it to the browser. It’s a dynamic course of for each web page request, although many of the net pages I’ve seen generated by WordPress aren’t actually that dynamic. Most guests, if not all, expertise equivalent content material.

Static website mills flip the mannequin proper again to that decades-old strategy. As a substitute of assembling net pages dynamically, static website mills take content material within the type of Markdown, merge it with templates, and create static net pages. This course of occurs outdoors of the request loop when customers are shopping your website. All content material has been pre-generated and is served lightning-fast upon every request. Net servers are fairly actually doing what they promote: serving. No database. No third-party plugins. Simply pure HTML, CSS, JavaScript, and pictures. This simplified tech stack additionally equates to a smaller assault floor for hackers. There’s a bit of server-side infrastructure to use, so your website is inherently safer.

Main static website mills are feature-rich, too, and that may make a compelling argument for bidding adieu to the tech stacks which can be hallmarks of recent content material administration techniques.

Should you’ve been on this trade for some time, it’s possible you’ll bear in mind Macromedia’s (pre-Adobe) Dreamweaver product. I liked the idea of library objects and templates, particularly how they let me create consistency throughout a number of net pages. Within the case of Eleventy, the ideas of templates, filters, shortcodes, and plugins are shut analogs. I received began on this complete journey after studying about Smashing’s enterprise conversion to the JamStack. I additionally learn Mathias Biilmann & Phil Hawksworth’s free ebook known as Modern Web Development on the JAMstack and knew I used to be able to roll up my sleeves and convert one thing of my very own.

Why Not Use A Static Website Generator?

Static website mills require a little bit of a studying curve. You’re not going to have the ability to simply cross off editorial capabilities to enter content material, and particular use circumstances might preclude you from utilizing one. A lot of the work I’ll present is completed in Markdown and through the command line. That mentioned, there are various choices for utilizing static website mills at the side of dynamic information, e-commerce, commenting, and score techniques.

You don’t should convert your complete website over suddenly, both. If in case you have an advanced setup, you may begin small and see how you’re feeling about static website era earlier than placing collectively a plan to resolve one thing at an enterprise scale. You too can hold utilizing WordPress as a best-in-class headless content material administration system and use an SSG to serve WordPress content.

How I Selected Eleventy As A Static Website Generator

Do a fast seek for in style static website mills and also you’ll discover many nice choices to start out with: Eleventy, Gatsby, Hugo, and Jekyll have been main contenders on my record. How to decide on? I did what got here naturally and requested some associates. Eleventy was a transparent chief in my Twitter poll, however what clinched it was a remark that mentioned “@eleven_ty feels very approachable if one doesn’t know what one is doing.” Hey, that’s me! I can unhappily get caught up in evaluation paralysis. Not right now… it felt good to decide on Eleventy based mostly on a ballot and a remark. Since then, I’ve transformed 4 WordPress websites to Eleventy, utilizing GitHub to retailer the code and Netlify to securely serve the information. That’s precisely what we’re going to do right now, so let’s roll up our sleeves and dive in!

Getting Began: Bootstrapping The Preliminary Website

Eleventy has an awesome assortment of starter projects. We’ll use Dan Urbanowicz’s eleventy-netlify-boilerplate as a place to begin, marketed as a “template for constructing a easy weblog web site with Eleventy and deploying it to Netlify. Consists of Netlify CMS and Netlify Types.” Click on “Deploy to netlify” to get began. You’ll be prompted to attach Netlify to GitHub, identify your repository (I’m calling mine smashing-eleventy-dawson), after which “Save & Deploy.”

With that completed, a number of issues occurred:

  1. The boilerplate venture was added to your GitHub account.
  2. Netlify assigned a dynamic identify to the venture, constructed it, and deployed it.
  3. Netlify configured the venture to make use of Id (if you wish to use CMS options) and Types (a easy contact kind).
Netlify’s initial deployment screen
That is Netlify’s display that reveals our preliminary deployment is accomplished. (Large preview)

Because the screenshot suggests, you possibly can procure or map a website to the venture, and likewise safe the positioning with HTTPS. The latter function was a very compelling promoting level for me since my host had been charging an exorbitant charge for SSL. On Netlify, it’s free.

I clicked Website Settings, then Change Website Title to create a extra acceptable identify for my website. As a lot as I appreciated jovial-goldberg-e9f7e9, elizabeth-dawson-piano is extra acceptable. In any case, that’s the positioning we’re changing! Once I go to elizabeth-dawson-piano.netlify.app, I see the boilerplate content material. Superior!

Eleventy Netlify Boilerplate with no customizations
Our website has been constructed and is now prepared for customizations. (Large preview)

Let’s obtain the brand new repository to our native machine so we will begin customizing the positioning. My GitHub repository for this project provides me the git clone command I can use in Visible Studio Code’s terminal to repeat the information:

Then we comply with the remaining directions within the boilerplate’s README file to put in dependencies regionally, edit the _data/metadata.json file to match the venture and run the venture regionally.

  • npm set up @11ty/eleventy
  • npm set up
  • npx eleventy --serve --quiet

With that final command, Eleventy launches the native improvement website at localhost:8080 and begins looking forward to modifications.

Preserving WordPress Posts, Pages, And Photos

The positioning we’re changing from is an current WordPress website at elizabethrdawson.wordpress.com. Though the positioning is straightforward, it’d be nice to leverage as a lot of that current content material as potential. No person actually likes to repeat and paste that a lot, proper? WordPress makes it straightforward utilizing its export operate.

WordPress Export Content screen
WordPress helps you to export content material and pictures. (Large preview)

Export Content material provides me a zipper file containing an XML extract of the positioning content material. Export Media Library provides me a zipper file of the positioning’s pictures. The positioning that I’ve chosen to make use of as a mannequin for this train is an easy 3-page website, and it’s hosted on WordPress.com. Should you’re self-hosting, you possibly can go to Instruments > Export to get the XML extract, however relying in your host, it’s possible you’ll want to make use of FTP to obtain the photographs.

Should you open the XML file in your editor, it’s going to be of little use to you. We want a method to get particular person posts into Markdown, which is the language we’re going to make use of with Eleventy. Fortunate for us, there’s a package for converting WordPress posts and pages to Markdown. Clone that repository to your machine and put the XML file in the identical listing. Your listing itemizing ought to look one thing like this:

WordPress XML directory listing
Listing itemizing for WordPress-export-to-markdown together with WordPress’ XML file. (Large preview)

If you wish to extract posts from the XML, this may work out of the field. Nevertheless, our pattern website has three pages, so we have to make a small adjustment. On line 39 of parser.js, change “submit” to “web page” earlier than persevering with.

Code snippet showing changes in wordpress-export-to-markdown
Configure wordpress-export-to-markdown to export pages, not posts. (Large preview)

Ensure you do an “npm set up” within the wordpress-export-to-markdown listing, then enter “node index.js” and comply with the prompts.

That course of created three information for me: welcome.md, about.md, and contact.md. In every, there’s front matter that describes the web page’s title and date, and the Markdown of the content material extracted from the XML. ‘Entrance matter’ could also be a brand new time period for you, and when you have a look at the part on the prime of the pattern .md information within the “pages” listing, you’ll see a bit of information on the prime of the file. Eleventy helps a wide range of entrance matter to assist customise your website, and title and date are just the start. Within the pattern pages, you’ll see this within the entrance matter part:

eleventyNavigation:
  key: House
  order: 0

Utilizing this syntax, you possibly can have pages robotically added to the positioning’s navigation. I wished to protect this with my new pages, so I copied and pasted the content material of the pages into the prevailing boilerplate .md information for dwelling, contact, and about. Our pattern website gained’t have a weblog for now, so I’m deleting the .md information from the “posts” listing, too. Now my native preview website appears to be like like this, so we’re getting there!

Local website preview after customizing content
Now that we’ve custom-made some content material, our native surroundings reveals the present state of the positioning. (Large preview)

This looks like a positive time to commit and push the updates to GitHub. A number of issues occur after I commit updates. Upon notification from GitHub that updates have been made, Netlify runs the construct and updates the reside website. It’s the identical course of that occurs regionally if you’re updating and saving information: Eleventy converts the Markdown information to HTML pages. The truth is, when you look in your _site listing regionally, you’ll see the HTML model of your web site, prepared for static serving. So, as I navigate to elizabeth-dawson-piano.netlify.app shortly after committing, I see the identical updates I noticed regionally.

Including Photos

We’ll use pictures from the unique website. Within the .eleventy.js file, you’ll see that static picture belongings ought to go within the static/img folder. Every web page may have a hero picture, and right here’s the place entrance matter works very well. Within the entrance matter part of every web page, I’ll add a reference to the hero picture:

hero: `/static/img/efficiency.jpg`

Eleventy retains web page layouts within the _includes/layouts folder. base.njk is utilized by all web page sorts, so we’ll add this code just below the navigation since that’s the place we wish our hero picture.

{% if (hero) %}
<img class="page-hero" src="https://smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/{{ hero }}" alt="Hero picture for {{ title }}" />
{% endif %}

I additionally included a picture tag for the image of Elizabeth on the About web page, utilizing a CSS class to align it and provides it correct padding. Now’s a superb time to commit and see exactly what changed.

Embedding A YouTube Participant With A Plugin

There are a number of YouTube movies on the house web page. Let’s use a plugin to create Youtube’s embed code robotically. eleventy-plugin-youtube-embed is a superb possibility for this. The set up directions are fairly clear: set up the bundle with npm after which embody it in our .eleventy.js file. With none additional modifications, these YouTube URLs are reworked into embedded gamers. (see commit)

Utilizing Collections And Filters

We don’t want a weblog for this website, however we do want a method to let folks find out about upcoming occasions. Our occasions — for all intents and functions — will probably be similar to weblog posts. Every has a title, an outline, and a date.

There are a number of steps we have to create this new collection-based web page:

  • Create a brand new occasions.md file in our pages listing.
  • Add a number of occasions to our posts listing. I’ve added .md information for a vacation live performance, a spring live performance, and a fall recital.
  • Create a group definition in .eleventy.js so we will deal with these occasions as a group. Right here’s how the gathering is outlined: we collect all Markdown information within the posts listing and filter out something that doesn’t have a location specified within the entrance matter.
eleventyConfig.addCollection("occasions", (assortment) =>
    assortment.getFilteredByGlob("posts/*.md").filter( submit => {
        return ( merchandise.information.location ? submit : false );
    })
);
  • Add a reference to the gathering to our occasions.md file, displaying every occasion as an entry in a desk. Right here’s what iterating over a group appears to be like like:
<desk>
    <thead>
        <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Location</th>
        </tr>    
    </thead>
    <tbody>
        {%- for submit in collections.occasions -%}
        <tr>
            <td>{{ submit.date }}</td>
            <td><a href="https://smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/{{ submit.url }}">{{ submit.information.title }}</a></td>
            <td>{{ submit.information.location }}</td>
        </tr>    
        {%- endfor -%}
    </tbody>
</desk>

Nevertheless, our date formatting appears to be like fairly dangerous.

Table with unformatted dates
Our date codecs might use some work. (Large preview)

Fortunately, the boilerplate .eleventy.js file already has a filter titled readableDate. It’s straightforward to make use of filters on content material in Markdown information and templates:

{ readableDate }

Now, our dates are correctly formatted! Eleventy’s filter documentation goes into extra depth on what filters can be found within the framework, and how one can add your personal. (see: commit)

Sharpening The Website Design With CSS

Okay, so now we’ve got a reasonably strong website created. We now have pages, hero pictures, an occasions record, and a contact kind. We’re not constrained by the selection of any theme, so we will do no matter we wish with the positioning’s design… the sky is the restrict! It’s as much as you to make your website performant, responsive, and aesthetically pleasing. I made some styling and markup modifications to get issues to our final commit.

Completed website
Our web site conversion is full. (Large preview)

Now we will inform the world about all of our laborious work. Let’s publish this website.

Publishing The Website

Oh, however wait. It’s already revealed! We’ve been working on this good workflow all alongside, the place our updates to GitHub robotically propagate to Netlify and get rebuilt into contemporary, quick HTML. Updates are as straightforward as a git push. Netlify detects the modifications from git, processes markdown into HTML, and serves the static website. If you’re completed and prepared for a customized area, Netlify helps you to use your current area without cost. Go to Website Settings > Area Administration for all the small print, together with how one can leverage Netlify’s free HTTPS certificates together with your customized area.

Superior: Photos, Contact Types, And Content material Administration

This was a easy website with just a few pictures. You might have a extra sophisticated website, although. Netlify’s Large Media service permits you to add full-resolution pictures to GitHub, and shops a pointer to the picture in Massive Media. That manner, your GitHub repository is just not jam-packed with picture information, and you may simply add markup to your website to request optimized crops and sizes of pictures at request time. I attempted this alone bigger websites and was actually proud of the responsiveness and ease of setup.

Do not forget that contact kind that was put in with our boilerplate? It simply works. If you submit the contact kind, you’ll see submissions in Netlify’s administration part. Choose “Types” to your website. You’ll be able to configure Netlify to e mail you if you get a brand new kind submission, and you can too add a customized affirmation web page in your kind’s code. Create a web page in your website at /contact/success, for instance, after which inside your kind tag (in kind.njk), add motion="/contact/success" to redirect customers there as soon as the shape has been submitted.

The boilerplate additionally configures the positioning for use with Netlify’s content manager. Configuring this to work properly for a non-technical particular person is past the scope of the article, however you possibly can outline templates and have updates made in Netlify’s content material supervisor sync again to GitHub and set off computerized redeploys of your website. Should you’re snug with the workflow of constructing updates in markdown and pushing them to GitHub, although, this functionality is probably going one thing you don’t want.

Additional Studying

Listed below are some hyperlinks to assets used all through this tutorial, and another extra superior ideas if you wish to dive deeper.

Smashing Editorial
(ra, yk, il)





Source link