Google 스프레드시트를 데이터베이스로 사용하는 방법(무료 블로그 호스팅 포함)

Papa Parse & GitHub 덕분에 데이터베이스가 있는 가장 저렴한 단순 정적 블로그를 완전 무료로 호스팅할 수 있습니다.

우리 모두는 자신의 작은 슈퍼 틈새 블로그를 가지고 있지만 대부분의 경우 블로그가 다운되거나 매우 느린 친구가 있습니다.

여기서 문제는 대부분의 사람들이 웹 사이트 관리에 대해 거의 또는 전혀 알지 못하며 종종 "WordPress와 함께 가십시오"라는 조언을 우리에게 요청한다는 것입니다.

그러나 때로는 견고한 블로그를 갖고 싶다면 크기, 비용 및 지원으로 인해 WordPress도 관리하기 어려울 수 있습니다.

이 문제를 해결하기 위해 저는 데이터베이스가 있는 간단한 정적 블로그를 완전히 무료로 호스팅하는 가장 저렴하고 쉬운 계획을 생각해 냈습니다(첫해에 0.99$만큼 낮을 수 있는 도메인 등록 비용 제외).

이제 새 블로그를 만들어 보겠습니다. 이름을 The Cats Blog이라고 하겠습니다.

블로그 템플릿의 경우 React를 사용하여 간단하게 유지하고 모든 것을 관리하는 단일 구성 요소 앱을 만들 것입니다.



데이터베이스의 경우 google spreadsheets으로 이동하여 가져오려는 모든 데이터가 포함된 테이블을 만듭니다.

제 경우에는 Id, Title, Body, Image가 포함된 더미 테이블을 만들었습니다.

웹 사이트로 데이터 가져오기

데이터를 가져오기 위해 Papa Parse이라는 도구를 사용합니다.

프로젝트 폴더 터미널에서 다음을 실행합니다.

npm i papaparse

짜잔! 당신은 우리에게 약간의 데이터를 얻을 수 있는 도구가 있습니다!

const Papa = require(“papaparse”);
const filePrasing = () => new Promise((resolve)=> {
  Papa.parse(“YOUR GOOGLE SPREADSHEETS LINK", {
   download: true,
   header: true,
   newline: “”,
   complete: function(results, file) {resolve(results.data);}
  })
});

const getData = async() => {
  const data = await filePrasing();
  return data
}

참고: Papa Parse가 시트를 구문 분석하려면 시트를 CSV로 공개적으로 공유해야 합니다.

이제 getdata()를 호출한 후 Papa Parse는 스프레드시트에서 데이터를 가져오고 하나의 단일 개체 안에 있는 모든 데이터가 포함된 약속을 반환합니다.

[
 {
   “ID”: “1”,
   “title”: “ARTICLE TITLE”,
   “body”: “<p>ARTICLE BODY IN HTML</p>”,
   “image”: “IMAGE LINK"
 },
 {
   “ID”: “2”,
   “title”: “ARTICLE TITLE”,
   “body”: “<p>ARTICLE BODY IN HTML</p>”,
   “image”: “IMAGE LINK”
 }
]

반응을 사용하여 이 작업을 수행하기 위해 반응 후크 useState를 사용하여 상태를 관리하고 useEffect를 사용하여 웹 사이트가 렌더링될 때 상태를 업데이트합니다.

/* our data variable */
const [data, setData] = useState([])
useEffect(() => {
  getData().then((res)=> setData([…res]))
}, []);
/* our data variable */

블로그 레이아웃

블로그 레이아웃의 경우 구성 요소가 상태를 매핑하고 프런트 엔드에 데이터를 표시합니다. 또한 단순하게 유지하기 위해 사용자가 기사를 클릭하면 반응이 단일 페이지 애플리케이션 프레임워크이기 때문에 기사 본문이 포함된 팝업에 표시됩니다.

/* Article popup */
  const loadArticle = (id) => {
    document.getElementById('article').innerHTML= data[id-1].body //adds the article body to the articleParagraph/article <p>
    document.getElementById('articles').style.filter = 'blur(10px)' //adds the blur effect to the background
    document.getElementById('articleParagraph').style.visibility = 'visible' //makes the articleParagraph <div> visible
    document.querySelector('body').style.overflow ='hidden' //Disables the website scrolling feature
  }
/* Article popup */

/* Article close toggle */
  const hide = () => {
    document.getElementById('articles').style.filter = 'blur(0px)' //Removes the blur effect
    document.getElementById('articleParagraph').style.visibility = 'hidden' //hides the articleParagraph <div>
    document.querySelector('body').style.overflow ='scroll' //enables the website scrolling feature
  }
/* Article close toggle */

  return (
    <div className="App">
      <div className='header'>
        <h1 className='logo'>The Cats Blog</h1>
      </div>
      <div id='articleParagraph' >
        <p id='article'></p>
        <img src="../close.svg" className='closeIcon' onClick={()=>hide()} />
      </div>
      <div className='articlesContainer'>
        <div id='articles'>
          {
            data.map(
              (el)=>(
                <div className='block' key={el.ID} >
                  <h1 className='articleTitle' onClick={()=>loadArticle(el.ID)}>{el.title}</h1>
                  <img src={el.image} className='image' onClick={()=>loadArticle(el.ID)}/>
                </div>
              )
            )
          }
        </div>
          <div className='footer'>
            <p className='footerText'>This web site was created by Reda-codes</p>
            <ul>
              <li><a href="https://github.com/Reda-codes" target="_blank">GitHub</a></li>
              <li><a href="https://www.linkedin.com/in/reda-med/" target="_blank">LinkedIn</a></li>
            </ul>
          </div>
      </div>
    </div>
  );
}

참고: 위의 모든 코드를 얻으려면 the project repository on GitHub으로 이동하십시오.

최종 결과

마지막으로, 우리 블로그가 완료되었고 기능적으로 남은 유일한 것은 그것을 호스팅하는 것입니다.

무료 블로그 호스팅

blog은 로드할 때마다 Google 스프레드시트에서 데이터를 가져오는 정적 웹 페이지이기 때문에 GitHub pages에서 무료로 호스팅할 수 있으며 블로그에 사용자 지정 도메인을 갖고 싶은 경우 GitHub에서 무료로 허용합니다. .

이 프로젝트는 반응 자습서가 아닌 Google 스프레드시트를 데이터베이스로 사용하는 방법을 보여 주는 것일 뿐이며, 서버가 필요한 다른 프레임워크를 사용하는 경우 더 복잡한 블로그를 구축할 수 있습니다.

이 프로젝트의 모든 코드를 얻으려면 the project repository on GitHub 로 이동하십시오.