Netlify + Hugo로 만든 무료 블로그가 Netlify CMS로 웹상에서 편집 가능하게! 감무량

7540 단어 NetlifyCMSNetlifyHugo
개인적으로 강추 정적 사이트를 호스팅하는 서비스 Netlify

정적 사이트 제너레이터는 호스팅 비용 제로로 메인터넌스 비용도 별로 걸리지 않아 최고이지만, 투고의 작성이나 편집에 일일이 git를 사용하지 않으면 안 된다고 하는 좌절이 있었다.

Netlify CMS? 이것이 설마 이 과제를 해결하는 것이 아닌가? 라고 생각해 보면 무려,

바로 요구하고 있던 것이었다.

그런 획기적인 서비스가 이Netlify CMS인 것이다.

static-site용의 관리 화면을 생성할 뿐이지만(획기적도 아니다), Netilify로 무료 호스팅할 수 있다고 하는 것은 아닐까.

감무량인 텐션으로 잘 모르는 문장이지만, 실제로 기존의 Hugo 사이트에 추가해 보았다.

했던 일


  • Hugo로 만든 사이트를 github에 호스팅
  • 위의 리포지토리를 Netilify에 배포

  • htps : // 기주 b. 코 m / 세친 gs / ゔ ぇぺ에서 netlify 용 OAuth 앱 생성
  • Authorization callback URL에 https://api.netlify.com/auth/done 설정

  • Netlify 관리 화면의 Access에 github Authentication provider 추가
  • 다음 파일을 새로 만들고 commit! push!
  • Hugo의 디렉토리 구성에 따라 작성 위치가 변경됩니다


  • /content/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>
      <!-- Include the stylesheets from your site here -->
      <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.3.9/dist/cms.css" />
      <!-- Include a CMS specific stylesheet here -->
    
    </head>
    <body>
      <script src="https://unpkg.com/netlify-cms@^0.3.9/dist/cms.js"></script>
    </body>
    </html>
    

    /content/admin/config.yml
    backend:
      name: github
      repo: user/repo
      branch: master
    
    media_folder: "static/img" # Folder where user uploaded files should go
    public_folder: "img"
    
    collections: # A list of collections the CMS should be able to edit
      - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
        label: "Post" # Used in the UI, ie.: "New Post"
        folder: "content/post" # The path to the folder where the documents are stored
        create: true # Allow users to create new documents in this collection
        fields: # The fields each document in this collection have
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Publish Date", name: "date", widget: "datetime"}
          - {label: "Intro Blurb", name: "description", widget: "text"}
          - {label: "Image", name: "image", widget: "image", required: false}
          - {label: "Body", name: "body", widget: "markdown"}
    
    

    (config.yml이 비교적 다양한 사용법을 할 수 있다면 흥분됩니다)

    위의 파일을 만들면 마지막 git push (그렇지 않아)

    게시 된 사이트 /admin로 이동하여 github 로그인하면 ...



    관리 화면을 사용할 수 있게 되었습니다.

    심플하고 비교적 누구나 사용할 수 있는 UI의 느낌이 좋네요.

    Netlify CMS를 먼저 시도하면



    이 페이지에 Deploy to Netilify 버튼이 있으므로 누르고 OAuth로 설정하는 것만으로 시도 할 수 있습니다.

    자신은 우연히 Hugo 사용하고 있었지만, Hugo 이외에도 정적 사이트 제너레이터라면 여러가지 사용할 수 있는 것 같네요.

    좋은 웹페이지 즐겨찾기