Add Penmark to any website

Penmark can be added to any website. This guide describes the main steps for any site to add Penmark. If you are using Hugo, Jekyll or NextJS, follow the specific instructions for these frameworks below:

• Hugo
• Jekyll
• NextJS

Add Penmark to your 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.

Here are the steps to add Penmark to your site:

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

2. Add the Login Component

1. Add a hidden page of your blog (for instance, /login). This is intended to be only used by the editor of the blog, not readers of the blog. Anybody accessing this page will see the login buttons.
2. Add the Penmark Login component script to this page:

<script type="module" src="https://penmark.appsinprogress.com/dist/LoginClient.js"></script>

3. Add the Drafts Component

1. In your home page of your website, add the following script:

<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>

2. 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

1. In each page of your individual posts, add the following script:

<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> 

2. This will add an edit button only for logged in users.