The initial steps to setup a new blog with Statiq or migrate from Wyam are covered in porting from Wyam document in the CleanBlog repo. There are additional points raised in the GitHub discussions on the StatiqDev Discussions repo most specifically in the Migration from Wyam discussion. I had customized my blog slightly while using Wyam so there was some additional work to do. ## Bringing back the triangles Several javascript libraries have been removed from the CleanBlog theme, some of which were used to generate dynamic triangles for the header background when an image is not used. I started the discussion Javascript changes between Wyam and Statiq CleanBlog (or where have my triangles gone? 😊 ) and reintroduced the necessary libraries to bring back the triangles. ## Font Awesome Updates The move from FontAwesome 4 to 5 means that many icons stopped working, this is due to brand icons moving to a new prefix, so I had to change fa to fab in a number of places, where fa still works it appears better to change those to fas based on FontAwesome's own upgrading from version 4 guide ## Fix styles on custom navbar entries I added a dropdown to my navbar, which has lost its style after the upgrade, this appears to be a bootstrap 3 to upgrade issue. ## Publishing to Netlify Install the Netlify CLI npm install netlify-cli -g ## Exclude NetlifyCMS directory from processing and copy it to output I have been managing my Wyam blog with NetlifyCMS, this is simply a directory called admin with 2 files, index.html and config.yml. Wyam copied those files unchanged to the output. With Statiq that has changed and it processes the html file which makes it invalid, skips the config.yml file and adds a link to admin to the NavBar. Adding a file called _directory.yml to the admin directory makes it possible to set directory wide meta data, ShowInNavBar: False removes the admin link from the NavBar, setting the ContentType and MediaType, as discussed on the StatiqDev GitHub discussion Migration from Wyam, resulted in the desired behaviour yaml ShowInNavBar: False ContentType: Asset MediaType: textplain ## Update _post-footer.cshtml to set the Disqus configuration variables ``` csharp /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_identifier = '@Document.Destination.FileNameWithoutExtension.FullPath'; var disqus_title = '@Document.GetString("Title")'; var disqus_url = '@Document.GetLink(true)';

Use AppVeyor for CI​

To get started with a simple NetlifyCMS setup without the editorial workflow you can use the AppVeyor for Continuous Integration Wyam document. # Enabling the editorial workflow ## Turn off webhook for PR to prevent extra build being triggered in AppVeyor For more details see Do not build virtual merge on Pull Requests #1636 and Preventing master CI run when a commit a made on a feature branch If this is not done AppVeyor will run the master branch config when a draft is saved in NetlifyCMS as a PR is created, it will fail with

git push
remote: Anonymous access to MarkZitherProjectName.git denied.
fatal: Authentication failed for 'https:/github.comMarkZitherProjectName.git'
Command exited with code 128
```  ## Advanced AppVeyor config to support Editorial_Workflow
When a blog post is saved as a draft it will create a branch starting with 'cms', use the for branches with a regular expression to control different aspects of the build on master and cms branches, here is [an example of this in action](https:/github.comNokNokMLSBigDoorWyamBlogblobmasterappveyor.yml)

for: # override settings for master branch

• version: 1.0. branches: only: - master ####################### # removed for brevity # ####################### # override settings for cms* branches
• branches: only: - /cms.*/ deploy:

git push remote: Anonymous access to MarkZitherProjectName.git denied. fatal: Authentication failed for 'https:/github.comMarkZitherProjectName.git' Command exited with code 128

This is caused by the PR firing a Webhook which triggers the build on the master branch.  ## Other things to write about
* show the correct loggedlogged out menu based on [Netlify Identity Widget](https:/github.comnetlifynetlify-identity-widget) events and user object.
* how to populate the author field from the Netlify Identity metadata.

The following was set up in part 1, but it is worth reviewing again. I think more external providers will be available.

Set registration preference and external providers​

Registration settings and External providers are located in settings under Identity

Enable Git Gateway in Netlify​

Your CMS users are likely to not have Github logins, so enable the Git Gateway to allow them to save and publish posts to GitHub without having to setup an account on Github.

It is explained further in the Netlify Docs on Git Gateway The Git Gateway option is in settings under Identity, further down than the Registration preferences and external providers settings. ## Make it easy for user to complete signup by adding Netlify Identity Widget to the site

The email inviting a user to use the CMS links to the homepage with a invite token in the URL, if you do not follow this step the user will be left looking at the homepage not understanding why they are there or what they should do next. Add the netlify-identity-widget to your homepage, you can just add the following to the body of your layout page

<script src="https:identity.netlify.comv1netlify-identity-widget.js" /><script />

Now when the user hits the homepage with the #invite_token= in the URL the complete signup modal will appear.

Invite some users​

Might be best to come back to this step after setting the registration preferences

Despite the length of this series of blog posts NetlifyCMS is actually really easy to setup. It just involves configuration across a few different tools to get it all working in an automated fashion, from publishing a post in the CMS, thereby the file being pushed to GitHub, to automatically building and publishing your site, in this instance to Netlify. I was not familiar with all these tools when i started so please leave a comment if there are improvements that can be made.

Lets start with what Wyam and NetlifyCMS are;

""Wyam is different. It's a static content toolkit and can be used to generate web sites, produce documentation, create ebooks, and much more. Since everything is configured by chaining together flexible modules (that you can even write yourself), the only limits to what it can create are your imagination.""-- wyam.io > ""Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with friendly UI and intuitive workflow. You can use it with any static site generator to create faster, more flexible web projects."" --<cite> NetlifyCMS ## Now onto the steps I went through to setup NetlifyCMS for my blog. This information is what worked for me and makes some assumptions

• Your code is in a GitHub repository
• Your site is hosted on Netlify
• You are using AppVeyor for continuous deployment
• You are the only editor of your blog (Part 2 will deal with adding users and Netlify Identify features to the blog)
• You know that your CMS will be accessed at by manually adding admin to your site URL
• You are happy pushing your changes directly to master (Part 3 will explain the editorial workflow, which saves drafts to feature branches, creates a PR and merges once the post is published) ## Changes in your Wyam project

Add an admin directory under your Wyam input directory​

The general instructions to add NetlifyCMS to your site cover several static site generators but not Wyam (I have a PR in to add it to the table for App File Structure). Assuming you are using the default Wyam input directory name and structure the setup is; * add a folder called admin under your Wyam input directory * add 2 files to it, index.html and config.yml. In the index.html add the following, ```html

```yaml
backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)

media_folder: "input/assets/Images" # Media files will be stored in the repo under input/assets/Images
public_folder: "/assets/Images" # public_folder indicates where they can be found in the published site

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "input/posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Title", name: "Title", widget: "string"}
      - {label: "Lead", name: "Lead", widget: "string", optional: true, required: false}
      - {label: "Published", name: "Published", widget: "datetime"}
      - {label: "Featured Image", name: "Image", widget: "image", optional: true, required: false, pattern: ['^\S*$', "Please rename your image remove any spaces from the filename"]}
      - label: Tags
        name: Tags
        widget: list
      - {label: "Body", name: "body", widget: "markdown"}