Example expp is running here - https://contentium.vercel.app/.
Contentium is a project you can use for creating sites with search engine optimalized, server side rendered/generated content that is written in markdown files. This project uses Next.js as the main framework, mdx to render markdown, Prism.js for code highlights, and Tailwind CSS for styles.
Content is generated from the ./data
folder that is the root of the project. The folder contains settings.json
file that contains the basic settings for a site.
{
"metaDescription": "This is example blog of Contentium project.",
"mainTitle": "My Example blog",
"mainDescription": "This is example blog made by **Ladislav Prix**.",
"ogImageExtension": "png",
"ogUrl": "https://blog.example.com",
"footer": "Copyright 2021 © [Ladislav Prix](mailto:[email protected])",
"autosearchTresholdCount": "100"
}
- metaDescription - Content of
<meta name="description">
and<meta name="og:description">
tags on the main page. - mainTitle -
<h1>
title on main page. Also the<title>
tag and the<meta name="og:title">
tag of the page. - mainDescription - Main description of the page, right below title, supports markdown.
- ogUrl - Url that will be used as content of the
<meta name="og:url">
meta tag on main page and as a base for that tag on article pages. - ogImageExtension - extension of a image in -
/public/assets/pages/home.{ogImageExtension}
- that will be used as content of the<meta name="og:image">
tag on the main page. - footer - Footer on all pages, supports markdown.
- autosearchTresholdCount - Threshold of number of articles after which search on main pages stops searching automatically as you type and instead of taht waits for click on search button. High treshold can cause performance issues, change with caution.
Then ./data
folder contains articles
folder that includes other folders that are home to concrete articles. Each article is defined by its own metadata.json
file. A Markdown file with the text itself. Markdown file should not contain the main heading because it is taken over from metadata.json
. You can see the full structure of the ./data
folder in this repo.
{
"title": "Contentium case study",
"metaDescription": "Contentium is a project, build with Next.js.",
"keywordText": "markdown",
"ogImageExtension": "png",
"brief": "**Contentium** is a project, build with Next.js.",
"highlighted": true,
"createdAt": "2021-09-09",
"author": "Ladislav Prix",
"readingTimeInMinutes": 5
}
- title - Name of article in list
<h1>
title on article page and<title>
of the article page. (searchable) - metaDescription - Content of the
<meta name="description">
tag on the article page. - keywordText - Content of the
<meta name="keywork">
tag on the article page. (searchable) - ogImageExtension - extension of the image -
/public/assets/pages/{articleFolderName}.{ogImageExtension}
- that will be used as content of the<meta name="og:image">
tag on the article page. - brief - Brief description in article list, supports markdown.
- highlighted - Articles with highlighted flag set to true are shown first in list of articles and also have special ⭐ mark at the end of their title.
- createdAt - Date when article was created. Used as secondary sort after highlighted flag.
- author - Author of the article. (searchable)
- readingTimeInMinutes - Estimated reading time in minutes.
Contentium can be used in two different modes, those can be run natively or using Docker image shamyr/contentium-base
that is exposed from this project.
- ISR mode - ISR mode uses Incremental static regeneration, this mode is best when you need to change content while the application is running. This can be done with commands
yarn build
andyarn start
. - SSG mode - SSG mode uses Server side generation, this mode is best when you don't need to change content on the fly and statically generated pages are enough for you.
This mode requires Node.js as runtime because it runs nextjs server on the backend that performs Incremental static regeneration. You can start the application in this mode natively using yarn build
and yarn start
commands in the project root. Or you can use Docker image shamyr/contentium-base
as you can see below. ISR mode provides healty mixture of performance, SEO and flexibility to add new content while the application is running without need to deploy new updated service.
FROM shamyr/contentium-base as builder
RUN yarn build
FROM node:16-alpine3.11 as runner
WORKDIR /app
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/data ./data
EXPOSE 3000
CMD ["yarn", "start"]
This mode generates static pages that can be put to CDN and served from there. You can build pages natively using yarn export
. Or you can use Docker image shamyr/contentium-base
as you can see below, where we build pages and put them to Nginx web server. SSG mode provides maximum performance and SEO thanks to the generated pages, but it comes with cost that you cannot add pages without need to rebuild whole app.
FROM shamyr/contentium-base as builder
RUN yarn export
FROM nginx:1.21.1-alpine
COPY --from=builder /app/docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/out /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]