Learn Clojurescript, Linux and Wordpress

WordPress has been around for a long time and powers a huge number of sites.

Just because WordPress isn't brand new doesn't mean it can't get the job done!

Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

### While watching, consider...

- What are the tradeoffs of using a CMS for a site?
- Would headless WordPress work for me or my clients in this scenario?

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

wordpress

WordPress as a Headless Content Management System (CMS) and GraphQL API

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Installing the AWS CLI on your local workstation may be one of the biggest boosts to productivity you can make if you use AWS often. Almost all AWS features are available via the CLI allowing you to script, schedule and automate many AWS related tasks.
In this lesson, I’ll show you how to setup and verify the AWS CLI.

Installing the AWS CLI on OS X and Linux

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Every programmer starting to work in a *nix environment eventually finds themselves in VIM, the default text editor. Often by mistake! Because VIM lacks the typical polished GUI of normal programs, it can be hard to discover the correct sequence of commands to even exit the program. Once you learn how to exit VIM, then the next task is to also learn how to make VIM do what you want -while- exiting!

In this lesson we cover 7 different ways of exiting VIM, whether you are in EX mode or Command (also known as Escape) mode, whether you are editing a single file or several at once.

Exit Vim

ClojureScript is a compiler for Clojure that targets JavaScript. It emits JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

clojurescript

In this lesson I show you how to get and manipulate command-line arguments in Clojure/ClojureScript by writing a small program that greets you by name. I also show how comments are delimited, how to get a value out of a sequence, how to bind a symbol to a value, and how to define a function.

Handle command-line arguments in ClojureScript


Clojure is a dynamic, general-purpose programming language, combining the approachability and interactive development of a scripting language with an efficient and robust infrastructure for multithreaded programming. Clojure is a compiled language, yet remains completely dynamic – every feature supported by Clojure is supported at runtime. Clojure provides easy access to the Java frameworks, with optional type hints and type inference, to ensure that calls to Java can avoid reflection.

clojure

In this lesson I show what a Clojure keyword is and why we prefer them as keys in maps; and the three ways we can look up a value in a map.

Keywords and Map Lookup in Clojure and ClojureScript

To run Ghost, we first need to install the ghost cli. This can be done with npm now that Node.js is installed on the server.

After installing the CLI we will create a directory `/var/www/ghost` that the actual installation of Ghost will occur in. We'll update the permissions of this file to include the `ghost-admin` user that we are logged in as.


Install Ghost CLI and Create Directory

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Ghost has two hard dependencies which need to be installed before it can run. Those are Nginx and Node.js.

We will start by installing Nginx and set Nginx up to control the traffic coming into the EC2 server. After this, we'll install NVM using the raw install script that they provide on GitHub. With NVM installed we can then install the latest version of Node.js


Install Nginx and Node.js on a AWS EC2 Server

Now that we are SSH'ed into our EC2 instance we can start modifying the server to actually run the application that we want to to run. Before we do that we want to switch users because you initially SSH you are the root user.

We will start by adding a `ghost-admin` user that we will give sudo permissions to. Once we are logged into that user we will update the server to ensure we are on the latest and greatest versions before installing additional software.


Add and Log In to an AWS EC2 Instance with a sudo User

We'll look at the minimum requirements to create your own theme. With two files, style.css and index.php, you have all you need to get started. We'll look at how to pass information about the theme to WordPress and how to set-up a direct link to the admin panel.

Create a Stand-Alone Theme in WordPress

As we saw in [Create and Explore a Single WordPress Post Through Gutenberg and the REST API](https://egghead.io/lessons/egghead-explore-a-single-post-through-the-rest-api?pl=headless-wordpress-4a14), there is a lot of data available to you. This data might not be configured exactly how you'd like it. For instance, maybe you want comments to load with the initial call to `/posts/#ID` without having to make additional calls for Author and Comments.

In this lesson, you'll see how to extend a behavior by adding an action in the `functions.php` file that lives in `/wp-content/themes/twentytwenty`. We will use `register_rest_field` to add Comments to the request for a post.

Extend a WordPress REST API to Register a Comments field on the Post GET API

There are dozens of options available in Gutenberg for building a post, the amount of data coming through the Headless WordPress API can make it hard to manage presentation on the front end. To handle this we can filter out blocks that we won't use so that we can reasonably expect what data will be coming through the API.

In this lesson, we will limit the blocks available in the editor by adding the `allowed_block_types` filter.

Filter Blocks Types that are Exposed in Gutenberg for a Predictable Headless WordPress API

If there's something you want to do with your WordPress site, there is likely a plugin that will make it easy!

In this lesson, we will show how you can use Markdown to write your posts. We will install the `WP Githuber MD - WordPress Markdown` plugin to easily add this functionality.

Write Markdown Posts in WordPress with the WordPress Markdown Editor Plugin

It is critical for development that your local environment accurately reflects your remote site. In this lesson, you will learn how to import plugins, configuration, and content from a remote to a local WordPress instance.

There are a few steps to do this:

- Create a fresh install of a WordPress Instance
- Copy the `wp-content` folder over to your local site
- Activate all the necessary plugins that allow the instance to function properly
- Export and import custom post types
- Upload the generate content XML file to the local site

Replicate a Remote WordPress Site Locally by Importing Content and Logic

One of the strengths of WordPress is the commenting system. In previous lessons, we have seen how to get the comments alongside the posts.

In this lesson, will use Application Passwords, a WordPress plugin that allows authentication via non-interactive systems (in our case, using REST API) to provide authentication when posting a comment.

Using the auth functionality provided by our API client, we'll `POST` to Posts comments, resulting in a comment associated directly to the HTML of the post.

There are different strategies for publishing comments. The first one is approving and triggering a build using WebHooks. The alternative is using a third-party system, something like DISQUS. But the benefit of keeping the comment directly associated with the HTML is that it becomes indexable and searchable.

Add Comments to a Headless WordPress Post using Application Passwords

There are two approaches to dealing with an extensive media library when using a Headless WordPress solution. The first is that during the build step, the assets are queried and downloaded to a static folder that's served using a CDN. The second approach is that you use a third-party solution like Cloudinary to host your images.

In this lesson, we will use the [Cloudinary WordPress plugin](https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/) to migrate all images from our existing posts to Cloudinary. This approach provides the benefit of managing the assets directly on the WordPress interface and using Cloudinary to serve them.

## Next steps for you to try:

- Add additional data via WordPress Plugins
- Build a frontend for your data with Gatsby or Next.js

Manage Media Assets in a Headless WordPress Site using the Cloudinary WordPress Plugin 

I'll give you an overview of the basic web application architecture that is involved with setting up a headless WordPress site.

A WordPress application is made of three key components:

- A web-server
- The file system
- The database

It used to be an arduous task to get set up locally to run a WordPress instance. You needed to correctly download and configure a web-server and a database. You then needed to get the files installed in the correct place for the web-server to be able to access them. This was particularly grueling on a Windows system.

The WordPress hosting company, FlyWheel, has a tool called Local which I use exclusively for all my WordPress development. With a few clicks a web-server is configured, the files downloaded and the database prepared for you.

Configure and Start a WordPress Instance using Local

In this lesson, we will explore the `/wp-json` route and some of the default functionality. 

WordPress gives us a lot of options and data to work with right away. The number of routes available can be overwhelming but we will be focusing on the `/wp/v2` routes available. There are a number of routes that involve posts and individual posts including revisions and autosaves. As well as similar routes for pages, tags, and taxonomies.

You'll want to continue to explore the `/wp/v2` routes available to you.

Explore Pages, Tags, and Taxonomies in the WordPress JSON Route

We will create a new post with a comment. This is done in a tool call Gutenberg that WordPress has pre-installed for you with every fresh site. There are quite a few options available to you on how you want to structure your posts but I will show you a few.

Then, we'll look at how that post is rendered on WordPress's frontend and work out how we'd gather that same data on the REST API. You'll see in the end how you will need to make several API calls to fetch all the data you need through the API. This is because the initial call to `/posts/#ID` gives you all the posts' contents but also gives you the ID to the author and comments on the post that you will need to fetch to display correctly.

Create and Explore a Single WordPress Post Through Gutenberg and the REST API

In this lesson, we will explore the WordPress API and documentation and pose a challenge to extend the API in some way with some suggestions.



Challenge: Extend the REST API

WordPress ships with a set of default content types that you might be very used to Posts, Media, Pages, and Comments. In many cases, we'll want custom content types that fit our use-case. To do this, we'll create custom post types.

In this lesson, we will use a plugin, Custom Post Type UI, to create a custom post type and see how to retrieve the data in the REST API.

Add a Custom Post Type in WordPress with the CPT UI Plugin

In this lesson, we explore the Gutenberg editor and discuss how this is reflected in the database. Gutenberg has endless options of how you can create and style posts in the WordPress UI. There are plenty of content blocks to choose from and each of those blocks has several options with how you can customize the content to your needs.

The downfall of this experience is how it is exposed in the API from the database. The whole post is saved to the database as a single rendered blob of HTML. This blob has to be parsed and handled on the front-end without the context of the blocks in the editor. If you were using React, you would need to use `dangerouslySetInnerHTML` which is not optimal.

Topics

Instructors

Content Type