Docs
Examples
Jekyll

Add Penmark to a Jekyll static site

The Penmark CMS is enabled by 3 components, the Login component (renders login buttons), the Drafts component (renders a list of your drafts) and the Post component (renders an edit button for individual posts). The Drafts and Post component also render the Penmark editor when the edit button is clicked.

This guide details the steps to add Penmark to your Jekyll static site. Alternatively, you can start from this Penmark & Jekyll template, or you can view the commit adding Penmark to the Jekyll website.

Here are the steps to add Penmark to your Jekyll site:

1. Add the Penmark-CMS GitHub App (opens in a new tab) to your repository.

2. Add the Login Component

  1. Create a login.md file to add a login page, with the following content:
<body>
    <script 
        type="module" 
        src="https://penmark.appsinprogress.com/dist/LoginClient.js"
    ></script>
</body>

3. Add the Drafts Component

This step depends on your Jekyll theme. The minima theme is used as an example here.

If you are using a theme, you will need to override the files of your theme to add the Penmark scripts. See these instructions (opens in a new tab) for more details.

  1. Override your home page to add the Penmark Drafts script. Add the following to the _layouts/home.html file where you want the drafts to appear:
<script 
    type="module" 
    src="https://penmark.appsinprogress.com/dist/DraftsClient.js"
    draftsFolder="{enter the folder where your private drafts are stored}"
    postsFolder="{enter the folder where your public posts are stored}"
    imagesFolder="{enter the folder where your public images are stored}"
    githubUsername="{enter your GitHub username}"
    githubRepoName="{enter your GitHub repo name}"
></script>
  1. This will only be visible when you are logged in, and only GitHub users who have contributor access to the underlying repository will be able to see the drafts.

4. Add the Post component

This step also depends on your Jekyll theme. The minima theme is used as an example here.

If you are using a theme, you will need to override the files of your theme to add the Penmark scripts. See these instructions (opens in a new tab) for more details.

  1. Override your single post page to add the Penmark Drafts script. Add the following to the _layouts/post.html file where you want the drafts to appear:
<script 
    type="module" 
    src="https://penmark.appsinprogress.com/dist/PostClient.js" 
    postfilepath="{enter the path to the post file}"
    draftsFolder="{enter the folder where your private drafts are stored}"
    postsFolder="{enter the folder where your public posts are stored}"
    imagesFolder="{enter the folder where your public images are stored}"
    githubUsername="{enter your GitHub username}"
    githubRepoName="{enter your GitHub repo name}"  
></script>
  1. This will add an edit button only for logged in users.
HugoNextJS