bennolor/hugoblog
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

NetlifyCMS Integration #6

New Issue
Open
opened 2025-06-01 18:24:12 +02:00 by bennolor · 1 comment
bennolor commented 2025-06-01 18:24:12 +02:00
Owner
Copy Link

Description:

Integrate NetlifyCMS with our Hugo site to provide a user-friendly content management interface.

Tasks:

  1. Create the admin directory in the static folder:
    • mkdir -p static/admin
  2. Create the NetlifyCMS configuration file static/admin/config.yml:
backend:
  name: github
  repo: bennolor/blog
  branch: main # Branch to update
  base_url: https://blog.yourdomain.com # Auth callback URL

media_folder: "static/images/uploads" # Media files will be stored here
public_folder: "/images/uploads" # The src attribute for uploaded media

collections:
  - name: "posts" # Used in routes, e.g., /admin/collections/blog
    label: "Blog Posts" # Used in the UI
    folder: "content/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
    fields: # The fields for each document
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "image", widget: "image", required: false}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Categories", name: "categories", widget: "list", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Draft", name: "draft", widget: "boolean", default: false}
      - {label: "Body", name: "body", widget: "markdown"}
  
  - name: "pages"
    label: "Pages"
    folder: "content"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text", required: false}
      - {label: "Body", name: "body", widget: "markdown"}
  1. Create the NetlifyCMS index file static/admin/index.html:
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
  1. Create GitHub OAuth App for authentication:
  2. Set up authentication proxy service for NetlifyCMS:
    • Create a new directory for the OAuth proxy
    • Create oauth/package.json for dependencies
    • Create oauth/server.js for the proxy server
    • Add Docker configuration for the proxy service
  3. Update docker-compose.prod.yml to include the OAuth service:
  oauth:
    build: ./oauth
    restart: always
    environment:
      - GITHUB_CLIENT_ID=your_client_id
      - GITHUB_CLIENT_SECRET=your_client_secret
      - REDIRECT_URL=https://blog.yourdomain.com/admin
    networks:
      - web
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.oauth.rule=Host(`blog.yourdomain.com`) && Path(`/callback`)"
      - "traefik.http.routers.oauth.entrypoints=websecure"
      - "traefik.http.routers.oauth.tls.certresolver=myresolver"
  1. Test the CMS locally
  2. Commit and push changes

Definition of Done:

  • NetlifyCMS configuration files created
  • GitHub OAuth application registered
  • Authentication proxy service implemented
  • CMS accessible at /admin URL
  • Content can be created and edited through the CMS interface
  • Changes made through CMS successfully trigger the deployment pipeline
## **Description:** Integrate NetlifyCMS with our Hugo site to provide a user-friendly content management interface. ## **Tasks:** 1. Create the admin directory in the static folder: - `mkdir -p static/admin` 2. Create the NetlifyCMS configuration file `static/admin/config.yml`: ```yaml backend: name: github repo: bennolor/blog branch: main # Branch to update base_url: https://blog.yourdomain.com # Auth callback URL media_folder: "static/images/uploads" # Media files will be stored here public_folder: "/images/uploads" # The src attribute for uploaded media collections: - name: "posts" # Used in routes, e.g., /admin/collections/blog label: "Blog Posts" # Used in the UI folder: "content/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 fields: # The fields for each document - {label: "Title", name: "title", widget: "string"} - {label: "Publish Date", name: "date", widget: "datetime"} - {label: "Featured Image", name: "image", widget: "image", required: false} - {label: "Description", name: "description", widget: "text"} - {label: "Categories", name: "categories", widget: "list", required: false} - {label: "Tags", name: "tags", widget: "list", required: false} - {label: "Draft", name: "draft", widget: "boolean", default: false} - {label: "Body", name: "body", widget: "markdown"} - name: "pages" label: "Pages" folder: "content" create: true slug: "{{slug}}" fields: - {label: "Title", name: "title", widget: "string"} - {label: "Publish Date", name: "date", widget: "datetime"} - {label: "Description", name: "description", widget: "text", required: false} - {label: "Body", name: "body", widget: "markdown"} ``` 3. Create the NetlifyCMS index file `static/admin/index.html`: ```html <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> </head> <body> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html> ``` 4. Create GitHub OAuth App for authentication: - Go to GitHub Developer Settings > OAuth Apps > New OAuth App - Set Application name: "Blog CMS" - Homepage URL: https://blog.yourdomain.com - Authorization callback URL: https://blog.yourdomain.com/callback - Note the Client ID and Client Secret 5. Set up authentication proxy service for NetlifyCMS: - Create a new directory for the OAuth proxy - Create `oauth/package.json` for dependencies - Create `oauth/server.js` for the proxy server - Add Docker configuration for the proxy service 6. Update docker-compose.prod.yml to include the OAuth service: ```yaml oauth: build: ./oauth restart: always environment: - GITHUB_CLIENT_ID=your_client_id - GITHUB_CLIENT_SECRET=your_client_secret - REDIRECT_URL=https://blog.yourdomain.com/admin networks: - web labels: - "traefik.enable=true" - "traefik.http.routers.oauth.rule=Host(`blog.yourdomain.com`) && Path(`/callback`)" - "traefik.http.routers.oauth.entrypoints=websecure" - "traefik.http.routers.oauth.tls.certresolver=myresolver" ``` 7. Test the CMS locally 8. Commit and push changes ## **Definition of Done:** - NetlifyCMS configuration files created - GitHub OAuth application registered - Authentication proxy service implemented - CMS accessible at /admin URL - Content can be created and edited through the CMS interface - Changes made through CMS successfully trigger the deployment pipeline
bennolor added this to the Release milestone 2025-06-01 18:29:49 +02:00
bennolor added this to the Initial Development and Deployment project 2025-06-01 18:29:51 +02:00
bennolor moved this to To Do in Initial Development and Deployment on 2025-06-01 21:42:19 +02:00
bennolor commented 2025-06-01 22:17:19 +02:00
Author
Owner
Copy Link

Not doing Netlify but instead Decap

Not doing Netlify but instead Decap
bennolor started working 2025-06-01 22:17:26 +02:00
bennolor worked for 1 hour 44 minutes 2025-06-02 00:02:07 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone Release
Projects
Clear projects
No project Initial Development and Deployment
Assignees
Clear assignees
bennolor
No Assignees
1 Participants
Notifications
Total Time Spent: 1 hour 44 minutes
bennolor
1 hour 44 minutes
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: bennolor/hugoblog#6
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?