How to make a blog with 11ty and GhostCMS
This is a pretty easy task considering we are not using the file system, but using JSON from an external source.
Install the packages that we need
npm install @tryghost/content-api @11ty/eleventy --save
That's it.
Getting the data from Ghost
In _data/posts.js, we can make the following file:
Basically, it:
- Require's the module
- Setup the API to get data (setting the keys, etc)
- Exports the posts using module.exports.
For this example, we will use the demo ghost instance located at demo.ghost.io.
Setting up the layout
In a file called _includes/base.html, insert the following:
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Blog!</title>
</head>
<body style="padding-left:32px;padding-right:32px;">
{{ content | safe }}
<footer></footer>
</body>
</html>
Basically, this creates a basic HTML document, Changes the title to My Awesome Blog!, and inserts the content.
Setting up the list of posts
Make a new file called index.html.
---
layout: base.html
---
<h1>
My Awesome Blog
</h1>
<ul>
{% for post in posts %}
<li><a href="/posts/{{ post.slug }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
This basically says: "Use the layout base.html in the folder _includes, Then, for every post from GhostCMS, make a new unordered list item with the link /post/{{ post.slug }} and the Title {{ post.title }}." Run eleventy and visit your site. It should look something like this:
We have a blog! But, If you click a link, it shows a 404 error. Lets fix that. Make a new file called posts.html and add the following:
---
pagination:
data: posts
alias: post
size: 1
permalink: posts/{{ post.slug }}/
layout: base.html
---
<h1>
{{ post.title }}
</h1>
<div class="content">
{{ post.html | safe }}
</div>
This basically uses 11ty's pagination feature and creates a new page for every post, then inserts the data into the page. Run eleventy again.
Great, we are finished, right? Nope. The webpage just looks, ugly. We can fix this with 1 line of CSS using water.css. Just insert the following line into _includes/base.html in the <head> tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
Run eleventy for the last. The webpage looks 100% better now! Now we have a blog. Thanks for reading!
Note: Every time you make a new post/update it, you will have to update it using the eleventy command.