Step-by-Step Guide to Create a Jekyll Static Website with Self-Hosted Netlify CMS

1. Prerequisites

Ensure you have the following tools and accounts ready:

A GitHub account and a new repository created for your website.
Jekyll installed on your local machine.
Node.js and npm installed.
A server to host your static website and CMS (e.g., AWS, DigitalOcean, or another hosting provider).

2. Setting Up a Jekyll Site

Create a New Jekyll Site
```
jekyll new my-website
cd my-website
```
Install Required Dependencies
```
bundle install
```
Test the Site Locally
```
bundle exec jekyll serve
```
Open your browser at http://localhost:4000 to verify that the site is running.

Push to GitHub

git init
git add .
git commit -m "Initial Jekyll site"
git branch -M main
git remote add origin https://github.com/USERNAME/REPOSITORY.git
git push -u origin main

Replace USERNAME and REPOSITORY with your GitHub username and repository name.

3. Add Netlify CMS to Your Project

Install Netlify CMS
- Install Netlify CMS using npm:
```
npm install netlify-cms-app
```

Add CMS Configuration

Create a new directory admin/ in your Jekyll project root.

Add a file admin/config.yml with the following content:

backend:
  name: github
  repo: USERNAME/REPOSITORY
  branch: main

media_folder: "assets/uploads"
public_folder: "/assets/uploads"

collections:
  - name: "pages"
    label: "Pages"
    folder: "_pages"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

  - name: "blog"
    label: "Blog"
    folder: "_posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Date", name: "date", widget: "datetime"}
      - {label: "Body", name: "body", widget: "markdown"}

Add the CMS Entry Point In your index.html or a layout file, add the following script tag:
```
<script src="https://unpkg.com/netlify-cms-app/dist/netlify-cms.js"></script>
```
Push Changes to GitHub Commit and push the changes to your GitHub repository.
```
git add .
git commit -m "Add Netlify CMS"
git push
```

4. Hosting Your Static Website with CMS

Generate the Static Site
```
bundle exec jekyll build
```
This will create a _site directory with your static website files.
Deploy the Website
- Copy the contents of the _site directory to your server's web root (e.g., /var/www/html).
- Configure your web server (e.g., Nginx, Apache) to serve the files.
Example Nginx configuration:
```
server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}
```
Restart your web server to apply the configuration.

5. Set Up GitHub Authentication for CMS

Create a GitHub OAuth App
- Go to GitHub Developer Settings > OAuth Apps.
- Create a new OAuth app:
  - Homepage URL: https://yourdomain.com
  - Authorization Callback URL: https://yourdomain.com/callback
- Note down the Client ID and Client Secret.
Host an OAuth Proxy Netlify CMS requires an OAuth proxy to handle authentication. You can use a prebuilt solution like netlify-cms-github-oauth-provider.
- Clone the repository:
```
git clone https://github.com/vencax/netlify-cms-github-oauth-provider.git
cd netlify-cms-github-oauth-provider
npm install
```
- Configure it with your GitHub OAuth credentials:
```
export OAUTH_CLIENT_ID=your_client_id
export OAUTH_CLIENT_SECRET=your_client_secret
export OAUTH_REDIRECT_URL=https://yourdomain.com/callback
```
- Start the proxy server:
```
npm start
```
Alternatively, deploy this proxy to a platform like Heroku or your own server.

Update config.yml for Netlify CMS In the admin/config.yml file, update the backend section:

backend:
  name: github
  repo: USERNAME/REPOSITORY
  branch: main
  base_url: https://your-oauth-proxy.com

6. Enable HTTPS for Your Website

To ensure secure communication:

Use Let’s Encrypt to set up SSL on your server.
Follow your server's documentation to configure HTTPS.

7. User Guide: Using Self-Hosted Netlify CMS

Log in to Netlify CMS
- Navigate to https://yourdomain.com/admin/.
- Log in using your GitHub credentials via the OAuth proxy.
Update Pages
- Go to the "Pages" collection.
- Edit or create a new page.
- Click "Save" and "Publish".
Create Blog Posts
- Go to the "Blog" collection.
- Click "New Blog".
- Fill in the title, date, and content.
- Click "Save" and "Publish".

By hosting Netlify CMS on your own server, you maintain full control over your static website and its content management system.

brennanMKE/README.md