​Moving Beyond WordPress for CMS with Component IO

Tyler Warnock

Over the past 15 years, WordPress has had a great run. Unfortunately, its age has started to show, with newer technologies enabling faster, cheaper, more secure, and all around easier to use content management.

In this tutorial, we'll build a web page with a modular, embedded CMS that is 10x faster, 10x cheaper, more secure, and has better editing tools than a standard WordPress install, and it works with any website. Sounds awesome, right? Let's get started.

Setup

We'll use several state of the art tools that are either free or inexpensive in order to build our WordPress replacement page. We have a few important things to consider:

  • Hosting - We'll host our website on Amazon Web Services because it has a free tier and it's extremely secure and reliable. We'll only be hosting static files, so it will be very inexpensive and easy to scale (when we go viral!)
  • Themes - There are many places where you can get quality themes for free or very cheap. We'll use Templated because it has almost 1,000 free themes, and if you want to look around, there are many other places you can try such as ThemeForest, Bootswatch, Template Monster, and more.
  • Content Management - We'll build our CMS with Component IO, which allows us to embed content, images, forms & more anywhere we want and to edit everything live from our own web page. It has a generous free tier and even includes a built in code editor for 100% customization.

Our goal is to create a web page that loads immediately and is free to host, live-editable, and can't be turned into a spambot or shut down by ransomware the way WordPress can.

With our tools in hand, we're ready to get started!

1) Get the website template running locally

We've found a nice-looking theme on Templated called "Phase Shift" which you can view live here.

Working on the template page named "No Sidebar", we'll make the following parts of the page editable with our CMS:

  • A content block at the top
  • A feature section in the middle
  • A form at the bottom

All three parts will be editable through our CMS, and we'll make the form submit responses to our CMS too so that everything is in one place. But first, let's get the static site running locally.

Download the template files from Dropbox or GitHub and open the file titled "no-sidebar.html" with your favorite browser (you can right-click the file and choose which application to open it with). It should look like the following:

If the page looks different, be sure you have all of the folders (/css, /fonts, /images, /js) downloaded and in the same directory as the html file. Now that we have the site working locally, let's make it editable.

Go ahead and open the "no-sidebar.html" file in a text editor too. It should now be open in your text editor and in your browser.

2) Make the static content block editable

For the CMS portion of our site, we'll use Component IO. In a new tab, visit https://component.io and create a free account & sign in. Your dashboard should look something like this:

Let's create an editable content block for our page. Click the "Content block" button on left side to create an editable content component. Doing so will take you to a page where you can edit or install the component.

From here, click the "Install" button so that we can install it on our web page.

To install, we just need to copy and paste the component code into our HTML file. Copy the component tag and the script together, and paste the component tag

<component key=oadmb></component>

on line 41 of "no-sidebar.html", just above the <section> tag with content. Then paste the script tag at the bottom of the page on line 140, just before the other <script> tags.

<script project="8PNNP8" src="https://cdn.component.io/v1"></script>

Note that if you've created your own account and your own component, you will have a different key= value for the component and a different project= value for the script.

Now save the file and refresh our template web page in the browser. It should look like this:

So just like that, our CMS content is being delivered to our page!

There should also now be a pencil icon on the right side of our page. This button will appear on the page if we're logged into Component IO, and it lets us make live edits. Click on the pencil icon to show the editable components on the page.

Now click on our new component to open the editor:

From here, we can edit the content to say whatever we want. Since we're just trying to mimic the existing template, close the editor by clicking the "X" buttons, then copy the content from our original page (starting with "NO SIDEBAR / Integer sit amet...)", and then re-open the editor and paste this content to replace the "Lorem ipsum…" text and image.

Click the "Save" button to save. Then in our "no-sidebar.html" file delete the old static content <section> starting on line 42 so that lines 39-43 of "no-sidebar.html" look like the code below.

<!-- Page -->
<div id="page" class="container">
    <component key=oadmb></component>
</div>
<!-- /Page -->

Note: if you're following along with your own project, make sure you use your own key= for the component instead of the one used here.

Save the file and reload the web page. Our page should look exactly like it did before, except now our content block is editable. Success!

3) Add a custom component

Now we'll replace the feature section in the middle of the page and make it editable too. Since this section is a custom layout for our template, we'll build a custom component from scratch that will be editable by anyone on our team, even non-technical teammates.

Back in the Component IO dashboard, click the Component IO logo to get to the dashboard's home page:

Click the "Blank component" button on the sidebar to create a blank component that we can build from scratch.

The first thing we'll do is copy the HTML from our template's feature section into Component IO so that we can mimic the content. Click the "Edit" button in Component IO and then click the "Code" toggle at the top to show the code editor:

Let's copy our existing feature section's HTML as a starting point for our new component. In the "no-sidebar.html" file, cut out lines 48-75

<div class="row">

  <!-- Content -->
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa fa-wrench">
          <h3>Integer ultrices</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
        <li class="fa fa-leaf">
          <h3>Aliquam luctus</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
      </ul>
    </section>
  </div>
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa fa-cogs">
          <h3>Integer ultrices</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
        <li class="fa fa-road">
          <h3>Aliquam luctus</h3>
          <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
        </li>
      </ul>
    </section>
  </div>
</div>

And paste this code into the HTML section of the Component IO code editor.

Now our component will deliver the exact same HTML as is on our web page currently. To see this, let's replace our web page's static HTML with the component tag for our new component.

Click the "Save" button in the code editor on Component IO and then click the "X" to exit the editor. Next, click the "Install" button like we did when installing our first component:

This time we don't need to copy the <script> tag because we already have it on our web page. We just need to copy the component tag

<component key=aardm></component>

Paste the component tag on line 48 of "no-sidebar.html", inside the <div id="main"> container. Delete the rest of the code in the container so that only the component tag is there:

<div id="main">
  <div class="container">
    <component key=aardm></component>
  </div>
</div>

Save the file and go to the tab with our web page on it. When you reload the page, it should look the exact same as before.

The difference is that now our feature section is part of our CMS and we can edit it! We could choose to always edit the raw HTML in the Component IO code editor, but that isn't much of an improvement on just editing the static HTML. Instead, let's set it up so that even non-technical users can make changes.

To do this, we need to add some fields for our CMS that can be edited easily. It looks like our feature section has 4 parts, with each part having an icon (wrench, gears, leaf, and a road) as well as some content. So let's use two fields: one called "icons" and one called "content".

Back in the Component IO dashboard, click "Done" from the install page and then click on the dropdown arrow on the "Edit" button and choose "Add / remove fields".

This takes us to a page where we can add fields to our component. Use the form on the page to create the 2 fields we mentioned:

  • One called icon that is a repeat Simple text field; and
  • One called content that is a repeat Rich text (HTML) field

Be sure to check the "Repeat" box since we'll be using these fields 4 times each. Once you've added both repeat fields, your screen should look like this:

Now let's add some content to the fields we just created.

Click "Done" and then click "Edit". This brings up the same content editor as before, but now we have custom fields.

Click "Add repeat item" to add the first item in our features section.

If we toggle over to the Code section, it looks like the first item has an icon called fa-wrench. This is from the Font Awesome icon set, and we could use any icon from there that we wanted. For now though, we'll still use "fa-wrench" for the icon.

Toggle to the Content section and add fa-wrench for the items[0].icon input. Then toggle back to the Code section and copy the first block of text (starting with "Integer ultrices / In posuere...") and paste it in for the items[0].content input. Delete the <h3> and <span> tags from the content editor and instead use the WYSIWYG tools to make "Integer ultrices" a "Heading 3" section.

Now our component editor should look like this:

Repeat this process for the remaining 3 feature sections, entering fa-cogs, fa-leaf, and fa-road for the icons, as well as the associated text content for each.

Now that the content is in place, let's make it show in our component.

Click the "Code" toggle to switch to the code editor view. We're ready to replace our static HTML with something dynamic.

We'll want to replace our component HTML with code to insert the icon and content fields we just created. With Component IO, we can access these fields through the items array, which starts at zero index. For example, to get the first icon value, we would use items[0].icon. Similarly, the second content value would be items[1].content.

Component IO uses Vue.js syntax for inserting content, so replace the above HTML in the editor with the following HTML that will insert our content:

<div class="row">
  <!-- Content -->
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa" :class="items[0].icon">
          <div v-html="items[0].content"></div>
        </li>
        <li class="fa" :class="items[2].icon">
          <div v-html="items[2].content"></div>
        </li>
      </ul>
    </section>
  </div>
  <div class="6u">
    <section>
      <ul class="style">
        <li class="fa" :class="items[1].icon">
          <div v-html="items[1].content"></div>
        </li>
        <li class="fa" :class="items[3].icon">
          <div v-html="items[3].content"></div>
        </li>
      </ul>
    </section>
  </div>
</div>

In Vue.js, :class= is used to generate a class name, and v-html= is used to insert raw HTML. There are more ways to insert values, but this is all we need for now.

Once you've updated the HTML, click "Save" and then visit our template web page tab and reload it.

Again it looks the same as before, but now it's editable. Click the pencil button on the right hand side and you can now edit the content in our feature section. Try re-ordering the boxes, changing the icons and content, and anything else you might want to do.

At this point, we have 2 CMS components on our page: one content block and one fully custom component, and both are now editable without touching or redeploying our code!

4) Add a form

Finally, let's add a form that will automatically send responses to our Component IO dashboard where we can view and manage the messages. Component IO has a library of components that includes ready-to-use forms, so visit the "Library" tab at Component IO and click the "Forms" tag on the left to filter components.

Let's choose the first one: Contact Form with reCAPTCHA option. Click on this component and then click the "Add to your project" button.

Install it the same way we installed the last 2 components: click on the "Install" button and then copy the component tag

<component key=mnark load=b></component>

And paste it into our "no-sidebar.html" file, just above the <form> element around line 63. Delete the existing <form> code so that the footer section looks like this

<!-- Footer -->
<div id="footer" class="wrapper style2">
  <div class="container">
    <section>
      <header class="major">
        <h2>Mauris vulputate dolor</h2>
        <span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>
      </header>
      <component key=mnark load=b></component>
    </section>
  </div>
</div>
<!-- /Footer -->

Again, make sure to use your specific key= for the component tag if you are following along with your own project.

Save the file and reload our template web page. It should look like this:

It doesn't look how we want, and the reCAPTCHA form isn't working because we're serving the web page from our file system. If we were serving it from localhost or as a live website, the reCAPTCHA would already be working.

Fortunately, just like with our last component, we can customize it and style it however we want. Click the pencil on the right side to open the editor and then click on the form to edit it. In the Content tab, disable the reCAPTCHA by changing the reCaptcha checkbox from "true" to "false". Then in the Code tab, replace the form's HTML with the following:

<form @submit="submit" v-if="!success">
  <div class="row half">
    <div class="12u">
      <input class="text" type="text" name="name" v-model="name" placeholder="Name" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <input class="text" type="text" name="email" v-model="email" placeholder="Email" />
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <textarea name="message" v-model="message" placeholder="Message"></textarea>
    </div>
  </div>
  <div class="row half">
    <div class="12u">
      <ul class="actions">
        <li>
          <input type="submit" :value="buttonText || 'Submit'" class="button alt" />
        </li>
      </ul>
    </div>
  </div>
</form> 
<h3 v-if="success">
  Message sent
</h3>

At the bottom of the editor's CSS panel, also add the following rule:

h3 {
  color: white;
}

Click the "Save" button to save changes to the HTML and CSS, then reload our web page. Now our form should be working. Try entering a message into the form:

When you submit the form, you should see text that reads "Message sent".

Back in the Component IO dashboard, click the Component IO logo to go to the dashboard home page and then click the dropdown menu for our project and select "Responses".

Here we can see the message was saved in the dashboard. We didn't have to do any backend work, and now we have a completely customizable form we can embed anywhere and collect responses.

Our page is now exactly like the template we started with, but with the added benefit of content we can edit live and a form that works for visitors to contact us. Now let's deploy it for the world to see.

5) Deploy to AWS

Hosting a website on AWS is as simple as creating a "bucket" on their S3 service and uploading the files for our web page. First, create an account at https://aws.amazon.com, then choose S3 from the "Services" dropdown menu.

Now click "Create bucket" so that we have a place to upload our files.

Give the bucket a name -- it must be something that no one else has used before, so you may need to try a couple of times to find one. Once you have one, click the "Create" button to create the bucket.

Next, click on the bucket name and then click the "Upload" button. Upload the folders and files for our website:

/css
/fonts
/images
/js
index.html
no-sidebar.html

Make sure these files are at the "root" of our S3 bucket, not inside of another folder.

Once all the files are uploaded, click the checkbox to select all the files and folder and then right click and select "Make public". This will allow anyone to download and view our website files.

Now click the "Properties" tab, and select "Static website hosting". Click the radio button that says "Use this bucket to host a website" and enter index.html for the index document.

Now our website is available for anyone to view at the url above the radio button.

You can click to see your hosted website or can view this tutorial's web page at http://phase-shift-0.s3-website-us-east-1.amazonaws.com. Click the "No Sidebar" link at the top right of the page to see the "No Sidebar" page we've been working on.

Just like before, you can click the pencil on the right side of the web page to make live edits to the content. Also, the form will submit responses to the Component IO dashboard just like before. We're all done!

Conclusion

We've set up a web page that is extremely fast to load (~800ms), free to host for hobby amounts of traffic, and has CMS features and a working form built in. If we wanted, we could invite other team members or clients to our project on Component IO and they would be able to make edits to the site too.

We used a basic HTML template, but we could have used any framework we wanted, including React, Angular, Vue.js, and more. We hosted our website on AWS, but again we could have also hosted the site anywhere we wanted, on any platform, and it would work the same because ultimately our solution is just HTML, CSS, and JavaScript.

From here on out, we can make edits with Component IO -- we don't have to change our codebase or redeploy our website every time we want to make a change. This will save us valuable time and let us focus on more important things.

If you enjoyed this tutorial, take a second to share it with your team or someone you think will benefit from it. It can be hard to find new tools that work well, so they'll be happy to know about it.

Whoever you tell will probably thank you -- for freeing them from the tyranny of WordPress!

This content is sponsored via Syndicate Ads

Tyler Warnock

1 post

Tyler has been working in web development for 7+ years, starting with Rails and now primarily using JavaScript: Node, Hapi, Angular, Vue, React, and so on. He lives with his wife (also a software engineer) in Sunnyvale, CA.