Basic websites with Contented CMS

Archive

All posts, listed in reverse chronological order.

Alternatively, view all posts by year or browse posts by tag

Pages overview

Pages

The default site comes with a number of pages setup:

These pages serve certain purposes, as described here:

Homepage

This the page displayed when you visit the root of your site. It includes, below the content you add via Forestry, the last 20 posts on your site. This is hardcoded and can't be changed at the moment as this is meant to be template for a blogging site.

Archive

This page contains a pageable list of all the posts on the blog. By default it also contains a list to a page of all the posts on the site grouped by year and a page with a clickable link of tags use on the blog. This page is configured to appear in the header menu.

Another Page

A blank page serving as an example standard page in the blog.

Accessibility Statement

It is good practice for all sites to have an accessibility statement, as this can help persons with disabilities get around your site. The template is by default fully accessible and the statement reflects that. It is configured to appear in the footer menu.

About this site

This is a page on which you can describe what your site is about. It appears in the header menu.

404.md

This is the page that appears when a user visits a page that doesn't exist. It is the error page.

Page settings

There a few settings you can configure when editing a page:

Title

This is the title of the page and appears just before the content you create for the page.

Menu Location

This drop down enables you to place the page in preconfigured menus. Currently there are three options:

  • none - page does not appear in a menu
  • top - page appears in the header menu
  • bottom - page appears in the footer menu

Menu

If you configure the page to appear in a menu you can modify how it appears there. This is done in the menu sub-setting:

Menu - Title

This defines the name of the page in the menu. Use this if the page has a long title, but you want something shorter to appear in the menu

Menu - Order

This defines the location of the page within the menu. Lower numbers appear further to the left, higher numbers further to the right in the menu. It is good practice to use intervals of 10 so that you can add pages in between others without having to change modify this setting on all pages in the menu.

RSS Feed

The site also comes with an RSS feed that enables users to track updates to your site using a feed reader. This feed is pre-configured. There are a couple of properties of the feed that can be altered in the "Data" section of the CMS.

Tagged:

Posts overview

Posts

You can create and edit blog posts by going to "Posts" in the left hand menu:

Here you can create a new post directly in the Posts folder, or browse to a sub-folder and create the post there. You can also create new folders on this screen. This is done by clicking on the "Create new" button and then choosing either "Post" or "Folder". I like to group my posts into sub-folders by year. You could also add month sub-folders if you write many posts.

When you create a new post, you will see the following screen:

Post properties

Towards the left are some properties you can configure for the post. The post title, the date to be used for the post and the tags you wish to assign to the post. These are all fairly explanatory. Note though that the date-time selector has a problem with the time and you might struggle to pick a time in the afternoon. Unfortunately this is an issue in Forestry.

Post content

On the right hand side of the screen you can write your post content. This is a basic WYSIWYG editor with some styling functionality listed at the bottom. The content is stored in markdown format. You do not need to know markdown to use the WYSIWYG editor. However if you wish to edit the markdown generated by the editor, you can use the three vertical buttons towards the top right to switch into "Raw editor" mode. Markdown is a more user friendly way of writing HTML and you can find out more about writing in markdown here. You can also click on the keyboard icon at the bottom right to bring up a quick reference guide at any point.

If markdown doesn't provide the functionality you need, you can also add HTML into the raw editor. Tables is one content type you will need to use HTML for.

Preview

Whilst editing your post you can click on the preview icon at the top right to see a live preview of your post at any time. There is no need to save your content first. Just click the preview icon to update the preview.

Publishing

Once you are done editing the post content you need to save it using the "Save" button at the top right. This will save your post so that it is ready for publishing - it will not make your post live. In order to publish the post as soon as you are ready, follow the instructions in GitHub: Step 4 - build and publish your site. Alternatively the system will automatically rebuild your site at midnight every day, so you do not need to manually update the site if publishing the post can wait that long.

Tagged:

Setting up a site

Introduction

This post will take you through the steps required to setup a site using ContentedWeb. It is assumed you are comfortable setting up accounts with online services, but you do not need any prior experience in using the tools.

There are two services you need to configure: GitHub and Forestry, in that order. These instructions assume you are new to GitHub and Forestry. If you are an experienced GitHub or Forestry user, you probably don't need to follow them.

GitHub

Step 1 - sign up

If you do not already have a GitHub account, you need to create one. Go to the GitHub site, click on "Sign Up" and follow the instructions.

Once your account is created, login and keep a note of your username.

Step 2 - copy the code

Next you need to copy the repository of the template site to you account. To do this go to the eleventy-forestry-starter repository. You will see a screen that looks like this:

There are two ways to copy this repository into your account. You can either click on the "Fork" button towards the top right of the screen or you can click on the green "Use this template" button. In this guide we will do the latter. So click on that button. You will see a screen like this:

For the repository name use the following: "your-username.github.io". So in the above example we would enter "contentedweb.github.io". You can give the repository a description if you want. Keep the repository public (since you will anyway be creating a public website from it) and ensure you tick the "Include all branches" checkbox.

Then click on the green "Create repository from template" button to copy the repository to your GitHub account. After a few seconds you will see a screen like this which shows the code of your new repository:

Step 3 - enable GitHub Pages

Next we need to turn on GitHub Pages. To do so click on "Settings" in the above screen and then click on "Pages" towards the bottom of the left-hand menu. You will see the following screen:

Change the part where it says "Branch: master", to "Branch: gh-pages". To do so click on the button and choose "gh-pages" from the drop down:

It should then look like this:

If you wish to run your site under a custom domain, enter the domain name in the appropriate field above. You will have to configure your domain name to point to GitHub Pages.

Step 4 - build and publish your site

Now it is time to publish your site. To do this click on "Actions" in the menu and then on "Eleventy Build" under the Workflow heading on the left. Then click on "Run workflow" and finally the green "Run workflow" button.

The workflow will now run and will take about a minute to complete. Once it has completed, your site should be live under the URL configured in step 3, eg "https://yourusername.github.io". If you don't see it, wait a couple more minutes. It can take a little longer until the HTML pages have been uploaded and published by GitHub pages.

Forestry

Next you need to configure Forestry, so that you have a user friendly way of creating and editing content.

Step 1 - sign up

Go to the Forestry site and click on "Sign up" in the top right corner. In order to keep the process simple, just click on "GitHub" towards the bottom left of the page:

This will use GitHub for authentication and logging into Forestry. Run through the signup questions. It doesn't matter too much what you enter, but we would recommend "Other / Hobby / Eleventy" for the three questions it asks about your interests.

Step 2 - add your site

Next click on the "Add site" button on the top right and then choose 11ty:

and then GitHub:

Next you have to choose the site from your GitHub repository that you wish to manage through Forestry. If you've been following these instructions you should see the repository you setup under GitHub step 2 on this screen:

It should default to the master branch. If not, then choose the master branch as above. Click Next.

Forestry will import your site into it's system and ask you to complete the setup process. Since the setup for Forestry is already included in the starter kit, simple click on "Mark as done" on the remaining steps in the process:

And then click on "Complete setup" to finish the setup process:

Once setup is complete you will see a screen like this:

Step 3 - Personalising your site

Now you can start adding and editing content to your site. The first thing to do is change its title, subtitle and theme. To do this, click on "Data" in the left hand menu and then on "Contented CMS":

This will open up a form for setting the site's title and other properties:

When you are done, save the changes. You can also edit the pages and posts as well as creating news ones.

For more details on how to use the interface, you can read Forestry's excellent documentation.

Step 4 - publishing your changes

Because Contented CMS uses static pages, these need to re-built once you want to publish your changes. By default the site will be re-build every 24 hours at midnight GMT.

If you do not wish to wait that long, you can re-build the site manually. To do this you simply have to follow "Step 4 - build and publish your site" in the GitHub section above.

Optional Step 5 - use your URL for Forestry

This step is optional.

If you do not wish to go to forestry.io to edit your changes, the CMS can also be configured to run under your own URL using "http://yourname.github.io/admin/" (or whichever domain name you configured for GitHub Pages. To do this go to Settings in the left hand menu, scroll down a little and click on "Deploy Admin":

Conclusion

You are now all good to go.

You copied the starter site into your GitHub repository, you setup GitHub Pages and then built and published your site. Next you created a Forestry account and imported the site into Forestry. Finally you made some content changes and published those changes. Your site is now live

If you have problems with any of the above or further questions on how to use the site, please contact me on Twitter: @ContentedW.

Happy New Year

Happy New Year!

Честита Нова Година!

Bonne année!

Schéint Neit Joer!!!

🥂🍷🍸🍾🍹

Tagged: