Github 사용해서 블로그 만들기 - 2 (With discus, formspree, mermaid)

Overview

지난 포스팅에서는 나만의 블로그를 생성해 봤다. 이번 시간에는 disqus(댓글), formspree(contact) 기능 그리고 mermaid 구성을 추가해본다. (feat: cloudinary)

 

 

 

 

📅 관련 글

2025.01.24 - [Blog Setting] - Github 사용해서 블로그 만들기 - 1 (With jekyll)

 

 

 

---



 

Disqus, Formspree, Mermaid cloudinary란?

 

• Disqus
  Disqus는 웹사이트나 블로그에 댓글 기능을 추가할 수 있는 서비스이다. Jekyll과 같은 정적 사이트 생성기에서도 간단히 통합할 수 있다.
  • 설치: Disqus 계정을 생성하고, 사이트에 맞는 shortname을 설정한다.
  • 통합: `_config.yml` 파일에 Disqus shortname을 추가하고, 포스트 레이아웃에 댓글 스크립트를 삽입한다.
  • 주요 기능: 댓글 관리, 스팸 필터링, 사용자 참여 분석.
• Formspree
  Formspree는 이메일 기반 폼 제출 서비스를 제공하며, 정적 웹사이트에서도 쉽게 사용할 수 있다.
  • 설치: Formspree에서 폼 엔드포인트를 생성한다.
  • 통합: HTML 폼의 `action` 속성에 Formspree 엔드포인트 URL을 추가한다.
  • 주요 기능: 폼 제출 처리, 스팸 방지, 자동화된 이메일 알림.
• Mermaid
  Mermaid는 다이어그램과 차트를 Markdown 파일에 통합할 수 있도록 도와주는 도구이다. Jekyll에서도 사용할 수 있다.
  • 설치: Mermaid JavaScript 파일을 사이트에 포함시킨다.
  • 통합: Markdown 파일에서 Mermaid 블록을 사용하여 다이어그램을 작성한다.
  • 주요 기능: 플로우차트, 시퀀스 다이어그램, 간트차트 등의 시각화를 지원.

• Cloudinary
  Cloudinary는 이미지와 비디오 관리, 최적화, 전달을 위한 클라우드 기반 서비스이다. Jekyll과 같은 정적 사이트 생성기에도 쉽게 통합할 수 있다.
  • 설치: Cloudinary 계정을 생성하고 API 키와 URL을 발급받는다.
  • 통합: 이미지 URL을 Cloudinary의 URL 형식으로 변경하여 사용한다.
  • 주요 기능: 이미지 최적화, 다양한 포맷 변환, CDN을 통한 빠른 로드 속도.

 

 

Dusqus 설정

 

1. 계정을 생성한 뒤 `New` 버튼을 눌러 새로운 사이트를 생성한다.

 

 

 

그럼 아래와 같이 사이트가 생성할 수 있다.

 

 

그리고 general 버튼을 누르면 아래와 같이 shortname을 확인할 수 있다.

 

 

그리고 나서 해당 shorname을 `_config.yml` 에 `disqus_username` 에 넣어주고 배포하면 아래와 같이 연결될 것이다.

 

 

 

Formspree 설정

formspree 설정은 훨씬 간단하다.

 

1. formspree 가입 후에 Overview 맨 밑으로 가면 Form Endpoint가 있다.

 

 

2. 해당 값을 `_config.yml` 에 `formspree-form_id` 값에 넣어주면 끝이다.

• Contact 페이지를 통해서 메세지를 보낼 수 있다.

 

상대방이 메세지를 보내면 메일로 연락이 온다.

 

 

Mermaid 설정

 

_includes/head.html 에 아래와 같이 직접 로드 해주면 된다.

    <!-- Mermaid.js 직접 로드 -->
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true });
    </script>

 

 

그러면 _post 게시물에 아래와 같이 직접 작성하여 사용가능하다.

 

cloudinary

cloudinary 사용해서 사진을 올려두고 블로그에서 로드해서 쓸 수 있다.

 

_post 예시

date: 2025-01-21 09:00:00
layout: post
title: GitLab CI/CD Pipeline Configuration Guide
subtitle: Understanding GitLab CI/CD workflow and .gitlab-ci.yml configuration
description: Learn about GitLab CI/CD, pipeline configurations, and practical examples
image: <image_url>
optimized_image: <image_url>
author: somaz
tags:
  - gitlab
  - cicd
  - pipeline
  - automation

 

 

업로드 한 사진 예시

 

 

 

마무리

이외에도 아직까지 설명할 내용들이 많이 있다. 나머지에 내용에 대한 설명은 다음 포스팅에서 하도록 하겠다.

• Private Repo 전환하여 Public Repo에 배포하기
• Google Search Console 등록 및 Sitemap 설정

 

 

---

Reference

https://formspree.io/forms

https://disqus.com/

https://mermaid.live/edit

https://console.cloudinary.com/