본문 바로가기

IT/Hexo26

개발자들을 위한 블로그 플랫폼 정리 (2023/10 기준) 전적으로 도스게임플레이어 블로그 등 여러 블로그를 운영해본 경험을 토대로 작성되었습니다. 어차피 새로운 서비스들이 출시되고 기존 서비스들이 축소/삭제 되니 2023년 10월 기준이라는 것을 참고해주세요 개발자들을 위한 블로그 플랫폼 입니다. (일반 블로거는 네이버 블로그 사용하는게 가장 현명한 방법입니다) 추천순위 1위.Cloudflare Pages 2위.Github Pages 3.티스토리 4.워드프레스 5위.워드프레스닷컴 6위.블로그스팟 서비스시작일 2021년 2008년 2006년 2003년 2005년 1999년 서비스 제공업체 CloudFlare (CDN업체) Github (뒤에 MS) Kakao (한숨) 호스팅회사 WordPress Google (개살구) 글작성 제한(1일) 무제한 무제한 공개 10.. 2023. 10. 26.

네이버 Billboard.js 캔들차트 DataURL 사용법 구글차트 캔들차트는 안이쁘다 구글 차트의 캔들스틱 은 이쁘지 않다 또한 외부 URL 을 통한 데이터 넣기가 어렵다 대안은 billboard.js 차트 구글 차트 보다는 billboard.js 캔들스틱이 이쁘다 billboard.js 차트 데이터 구조가 왜 이러니 일반적인 캔들스틱의 데이터 구조는 날짜, 시, 고, 저, 종이런식으로 데이터가 들어간다. 그런데 billboard.js 차트의 캔들스틱 데이터 구조는 날짜 배열 따로 시, 고, 저, 종 배열 따로보통 데이터를 엑셀 같은걸로 저장하고 cvs 로 변환해서 넣거나 json 으로 변환해서 넣는데 billboard.js 는 전혀 데이터 구조가 맞지 않는다. 따로 구조를 만들어서 넣어야 한다. billboard.js 캔들스틱 예 {% jsfiddle sky.. 2022. 7. 4.

검색엔진(네이버,구글)에 검색 잘되게 하는 방법 검색엔진에서 검색 잘되는 방법 본인이 작성한 글이 네이버와 구글의 검색에 잘 나오게 하려면 네이버와 구글이 원하는 데로 글을 작성해서 관리해야 합니다 네이버와 구글은 블로그를 등록할 수 있는 검색서비스를 제공하고 있습니다 네이버 어드바이저 구글 검색콘솔 세부적인 서비스는 틀리겠지만 검색이 잘되게 하는 방법은 동일 합니다 @startuml skinparam monochrome true (글 작성) as A (사이트맵 작성) as B (모바일 사용 편의성 확인) as C (검색엔진에서 글 확인) as D A --> B B --> C C --> D D --> A @enduml 검색순위가 올라가는 조건 작성된 글이 기본적으로 많아야 우선순위가 올라갑니다 검색어가 세부적이어야 우선순위가 올라갑니다 nofollow.. 2022. 7. 4.

네이버 Billboard.js 차트 를 사용해보자 billboard.js 란? 네이버의 오픈소스 Javascript 차트 이다 {% quote naver https://github.com/naver/billboard.js %} 📊 Re-usable, easy interface JavaScript chart library based on D3.js {% endquote %} 깃허브에서 소스를 확인할 수 있다 billboard.js 사용법 라이브러리 import 가져다 사용하기만 할 꺼니 D3 라이브러리 가 이미 있으면 CSS : https://naver.github.io/billboard.js/release/latest/dist/billboard.min.css Javascript : https://naver.github.io/billboard.js/rel.. 2022. 7. 4.

Hexo 대소문자 인식 오류 문제 해결방법 대소문자오류 현상 Hexo 의 카테고리를 대문자로 관리하고 파일은 소문자로 관리하고 싶었습니다. 카테고리 : 대문자 파일명 : 소문자 그래서 Hexo 의 카테고리명을 소문자 => 첫글자만 대문자(hexo => Hexo)로 했는데 hexo deploy 를 해봐야 변경 안됩니다 github 를 보니 여전히 hexo 카테고리로 되어 있고 변경이 안됩니다 원인 Hexo 에서 deploy 할 때 대소문자 구분을 하지 않습니다 git 도 대소문자를 구분 하지 않습니다 해결방법 대소문자를 구분하지 않으니 처음 생성시에 사용하고 싶은 형태로 (대문자 또는 소문자) 만들어줘야 합니다. 깃허브의 skyksit.github.io repository 의 categories/ 폴더 삭제 hexo .deploy_git 폴더의 파.. 2022. 7. 4.

HEXO 링크 클릭시 전체화면으로 띄우기 HTML5 게임을 post 로 넣다 게임 컨텐츠를 추가하고 싶어서 HTML5 게임정보를 구해서 POST 로 작성했는데 게임정보를 추가하는 방법이 2가지 있었습니다 iframe 으로 넣는 방법 링크를 추가해서 새창으로 띄우는 방법 HTML5 게임이 웹브라우저에서 실행되기 때문에 PC 에서는 그나마 인터페이스가 나쁘지 않았지만 모바일에서는 인터페이스가 좋지 않아서 두 방법 다 만족스럽지 않았습니다 전체화면으로 띄우는 방법 다른 게임 WEB 을 보니 전체화면으로 제공을 해주고 있었고 전체화면으로 띄우는 기능을 Hexo 블로그에도 적용하고 싶어졌습니다 Web APIs FullscreenOptions 역시나 풀스크린 API 가 있네요 더 찾아보니 풀스크린 API 를 이용한 screenfull.js 서비스도 있었습.. 2022. 7. 4.

Hexo 에 나만의 스크립트(script)를 만들기 Hexo 블로그에 스크립트(Script) 추가 방법 post 를 타임라인 형태로 추가 해보고 싶어졌습니다 hexo plugin 을 찾아봐도 timeline 관련 플러그인이 없어서 직접 만들었습니다. 기능을 추가 하는 방법은 2가지(스크립트 추가, 플러그인 추가) 입니다. 스크립트 추가 방법 공식문서의 설명 {% quote hexo.io https://hexo.io/docs/plugins#Script %} If your plugin is relatively simple, it’s recommended to use a script. All you need to do is put your JavaScript files in the scripts folder and Hexo will load them durin.. 2022. 7. 4.

헥소(Hexo) 에 네이버 billboard 차트 추가 테스트 {% bcharts chart 90% 400px %} data: { columns: [ ["data1", 30, 200, 100, 400, 150, 250], ["data2", 130, 100, 140, 200, 150, 50] ], type: "bar", // for ESM specify as: bar() }, bar: { width: { ratio: 0.5 } } {% endbcharts %} timeout 추가 {% bcharts chart2 90% 400px %} data: { columns: [ ["data1", 30, 200, 100, 400, 150, 250], ["data2", 130, 100, 140, 200, 150, 50] ], type: "bar", // for ESM spe.. 2022. 7. 4.

헥소(Hexo) 에 차트 추가 차트리스트 블로그 작성시에 가끔이지만 차트가 필요합니다. Hexo 에서 차트 plugin 으로 등록되어 있는 리스트 chartjs echarts googlecharts billboard.js mermaid plantuml 이중에 mermaid와 plantuml 은 UML 그리는 용도이고 나머지 차트를 확인해봅니다 chartjs 설치방법 $ npm install hexo-tag-chart --save 사용방법 {% chart 85% 300 %} { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', background.. 2022. 6. 30.

헥소(Hexo)에 구글애드센스(Google AdSense)추가 구글 광고 추가 블로그 활동도 하면서 부수입도 벌고자 하는 활동입니다 다만, 구글의 애드센스 승인 기간이 한참 걸리고 사이트에 글이 어느정도 있어야 허가 해줍니다. 그러니, 미리 미리 블로그에 글도 풍성하게 올리고 승인을 기다리세요. 구글애드센스 가입 구글애드센스 가입을 합니다 예전에는 승인이 쉬웠는데 유튜브 뜨고 나서는 승인이 오래 걸립니다 그래도 신청하고 기다려봅시다 사이트 추가 사이트를 추가해줍니다 이미 사이트가 등록되어 있으면 하위 도메인도 추가해 줄 수 있습니다 사이트 광고코드 광고 > 사이트기준 메뉴에서 코드 가져오기 광고코드 생성 코드 가져오기를 누르면 head 태그사이에 넣은 사이트용 코드가 생성된다 광고코드 추가 위에서 생성한 광고 코드를 중 head 태그에 넣은 코드를 복사합니다 설정파.. 2022. 6. 30.

헥소(Hexo)에 nofollow 적용 nofollow 검색엔진에게 해당 링크를 링크 대상의 순위에서 제거 해달라는 표시 검색엔진이 분석할 때 해당 링크는 따라가지 않도록 또는 분석 대상에서 제외 시키려는 목적 hexo-autonofollow hexo-autonofollow 는 자동으로 nofollow 속성을 적용해주는 plugin 입니다 설치 $ npm install hexo-autonofollow --save 설정 헥소(Hexo)의 설정파일 _config.yml 에 정보를 추가합니다 # nofollow plugin nofollow: enable: true 배포 $ npm run deployall 확인 build 시 public 폴더에 생성된 html 속성을 보면 외부 링크나 _blank 링크의 경우 nofollow 속성이 자동으로 추가 되.. 2022. 6. 30.

헥소(Hexo)에 Robots TXT 추가 Robots 검색엔진의 사이트 크롤링 허용여부를 결정해주는 파일입니다 검색엔진은 사이트에서 제공하는 robots.txt 파일을 읽고 허가하는 경우에 한해서만 크롤링 해갑니다 우리가 만드는 블로그는 검색엔진이 많이 가져갈 수록 좋으니 대부분 허용해주면 됩니다 hexo-generator-robotstxt hexo-generator-robotstxt는 config 에서 설정한 데로 robots.txt 파일을 생성해주는 plugin 입니다 설치 $ npm install hexo-generator-robotstxt --save 설정 헥소(Hexo)의 설정파일 _config.yml 에 정보를 추가합니다 # robots plugin robotstxt: useragent: "*" allow: - / sitemap: /.. 2022. 6. 30.

헥소(Hexo) 검색엔진 제공용 RSS 피드 만들기 RSS 생성하기 검색엔진에 새로 생성되는 포스트 정보를 보내줄 수 있게 RSS 파일을 생성합니다 hexo-generator-feed hexo-generator-feed는 헥소(Hexo)용 RSS 피드를 생성할 수 있는 플러그인 입니다 설치 플러그인을 설치해줍니다 $ npm install hexo-generator-feed --save 설정 헥소(Hexo)의 설정파일 _config.yml 에 feed 정보를 추가합니다 rss2 와 atom 타입을 선택할 수 있고 둘 다 선택도 할 수 있습니다 # feed plugin feed: type: - rss2 path: - rss2.xml limit: 100 모든 포스트를 제공하기 보다는 최신 100개로 제한을 걸어서 생성합니다 배포 $ npm run deploya.. 2022. 6. 30.

헥소(Hexo) 에 사이트맵 (Sitemap) 추가 사이트맵 구글 또는 네이버 검색에 등록하기 위해서는 사이트맵이 필수 입니다 사이트맵을 구글과 네이버에 제공해야 검색엔진들이 내 사이트를 검색해줍니다 사이트맵 추가 설치 npm install hexo-generator-seo-friendly-sitemap --save 설정 헥소 _config.yml 에 사이트맵 설정을 추가합니다 sitemap: path: sitemap.xml tag: false #tag 는 사이트맵에서 제외 category: false #category 사이트맵에서 제외 특정 Post 사이트맵 제외 Post 를 개별로 사이트맵에서 제외 하려면 글상단에서 sitemap: false 를 추가하면 됩니다 결과 생성된 파일 확인 $ npm run clean && npm run build 빌드를 .. 2022. 6. 30.

헥소(Hexo)에 댓글(Disqus, Gittalk)추가 댓글 기능 헥소(Hexo) 자체적으로 댓글 기능은 없습니다 테마별댓글기능 Hexo 테마에서 댓글기능을 제공하는 경우들이 많습니다. book 테마의 경우 3가지 댓글 기능을 제공합니다 (Utterance · Disqus · Gitalk) Icarus 테마의 경우 10가지 댓글 기능을 제공합니다 (Changyan · Disqus · DisqusJS · Facebook · Gitalk · Gitment · Isso · LiveRe · Utterance · Valine) Disqus 적용하기 Disqus 가입 Disqus 는 댓글 기능을 제공하는 서비스 입니다. 무료로 일방문 5만 페이지뷰까지는 무료입니다 Site 생성하기 Disqus Admin 화면에서 New 버튼으로 사이트를 생성합니다. 댓글 기능을 적용할.. 2022. 6. 30.

Hexo 에 구글애널리틱스 추가하기 방문자분석 내 사이트에 얼마나 방문을 하고 있는 지 보고 싶을 때는 구글애널리틱스(Google Analytics) 를 추가합니다 대부분의 Hexo 테마들은 구글애널리틱스를 기본으로 지원합니다 구글 애널리틱스 계정만들기 구글 애널리틱스 사이트에 가입합니다 사이트 계정 생성 애널리틱스 홈 에서 관리 메뉴를 클릭 합니다 분석용 GA계정을 추가 합니다 계정설정 계정명 입력 : study.skyksit.com 속성설정 속성이름 : studyblog 보고시간대 : 대한민국 통화 : 대한민국 원 비즈니스 정보 업종카테고리 : 취미 비즈니스 규모 : 작음 약관 동의 데이터 스트림 설정 Choose a platform : 웹 웹사이트URL : study.skyksist.com 스트림이름 : 교육블로그 ID 확인 등록이 .. 2022. 6. 30.

Hexo 네이버 사이트 소유확인 네이버 사이트 소유확인 방법 네이버 Search Advisor 의 웹마스터 도구를 사용하려면 정기적으로 사이트 소유확인을 해야 합니다 사이트 소유확인 방법을 알아보자 네이버 Search Advisor 네이버 검색이 잘 되도록 사이트 관리자들이 방문해서 설정해야 하는 서비스 사이트 소유확인 웹마스터 도구 접속시에 1년에 한번 정도 사이트 소유확인을 하라고 나옵니다 소유확인이 필요한 사이트는 소유확인 연장 문구가 나타납니다 사이트 소유확인 방법 사이트 소유확인을 하는 2가지 방법이 있습니다 HTML 파일을 다운 받아서 사이트에 업로드 사이트 첫 페이지에 naver-site-verification 이라는 meta 태그를 등록하는 방법 방법1. HTML 파일을 다운 받아서 사이트에 업로드 HTML 확인 파일 을.. 2022. 6. 30.

Hexo 구글 검색 콘솔에 사이트맵 최신화 하기 구글 검색 강화 작성한 글들이 구글에 검색이 되는 지 확인합니다 구글 검색창에서 site:skyksit.com 을 치면 구글이 얼마나 문서를 색인해서 검색 결과를 보여주는 지 알 수 있습니다 검색결과 약 167개 라는 것을 알 수 있습니다 사이트맵 확인 구글 검색 콘솔 에 블로그의 사이트 맵이 잘 전달되는지 확인합니다 구글 검색 콘솔로 로그인 후에 Sitemaps 메뉴를 클릭합니다 여기에서 마지막으로 읽은 날짜 가 중요합니다 아무리 sitemap 이 최신으로 업데이트 되어도 마지막으로 읽은 날짜 가 과거로 되어 있으면 검색엔진이 색인을 만들어 주지 않습니다 마지막으로 읽은 날짜를 최신화 사이트맵을 재추가 제출된 사이트맵을 삭제하고 새 사이트맵 추가를 다시 해줍니다 삭제 후 새사이트맵으로 다시 추가해주면 .. 2022. 6. 30.

Hexo Next 테마 적용하기 Hexo 테마 Hexo 도 다른 blog framework 같이 다양한 테마를 제공하고 있습니다 그 중에 icarus Book 테마를 사용해 보고 있습니다. Next 테마적용 이카루스 만큼의 퀄리티 좋고 업데이트가 잘 되고 있는 Next 테마가 있어서 설치해봤습니다 포기 열심히 적용하고 했는데 구글 애드센스를 지원하지 않습니다 앞으로의 계획도 없다고 합니다 이유는 'because the Google Adsense violates our goal of creating an elegant Hexo theme.' https://github.com/next-theme/hexo-theme-next/issues/145 결론 테마가 괜찮았지만 구글 애드센스 지원을 안하는 관계로 테마 변경을 포기 했습니.. 2022. 6. 30.

Hexo 이카루스 테마 수정방법 이카루스 레이아웃 변경하기 이카루스 테마가 좋은데 글에 대한 레이아웃 폭이 너무 작아서 늘려보려고 합니다. 수정방법 환경 icarus 4.1.2 버전 기준 본문 글의 크기 조정 이카루스 v4 부터는 node_modules 에 설치 됩니다 본인이 설정한 column 수에 맞춰서 조절합니다 function getColumnSizeClass(columnCount) { switch (columnCount) { case 2: //위젯 1개만 사용할 때는 여기 수정 - return 'is-4-tablet is-4-desktop is-4-widescreen'; + return 'is-3-tablet is-3-desktop is-3-widescreen'; case 3: return 'is-4-tablet is-4-de.. 2022. 6. 30.

Hexo 이카루스(icarus) 테마 적용방법 테마변경 landscape 테마가 기본 적용되어 있습니다 테마선택 Hexo Themes 에서 마음에 드는 테마를 선택하세요. 저는 icarus 테마를 적용해보겠습니다 이카루스(icarus) 테마의 장점 꾸준한 업데이트 (가장 중요함, 현재 Hexo 5 를 지원하는 4.1.2 버전 Release) 구글 애드센스를 붙이기 쉽다 구글 Analytics를 붙이기 쉽다 반응형 디자인을 제공한다 여러 가지 comment 기능을 제공한다 설치하기 Hexo v5 부터는 테마 설치도 npm 으로 가능해졌습니다 (예전처럼 git clone 할 필요 없습니다) # npm 으로 이카루스 테마를 설치합니다 $ npm install --save hexo-theme-icarus # hexo config 를 icarus 테마로 바꿉.. 2022. 6. 30.

Hexo 태그 플러그인(Tag plugin) 사용법 태그플러그인(Tag Plugin) Hexo 를 이용해서 글을 작성할 때 Markdown 문법만으로 글을 작성하는데는 컨텐츠를 표현하는 데 한계가 있습니다. 예) 유튜브 동영상, jsFiddle, gist 문서 넣기 등 이를 보완해주기 위해서 Hexo 에서 Tag Plugins을 제공해주고 있습니다 단점 VSCode 의 Markdown Preview 에서 Preview 가 안됩니다 npm run server 로 로컬 서버에서 확인해야 합니다 장점 마크다운으로 표현하기 어려운 내용을 작성할 수 있습니다 유용한 표현이 몇개 있어서 사용하면 글 내용이 풍성해집니다 태그 플러그인(Tag Plugin) 종류 인용구 (Block Quote, Quote) 인용구를 표현할 때 사용하면 좋습니다 마크다운 보다 좋은 건 저.. 2022. 6. 30.

마크다운(Markdown) 사용법 마크다운(Markdown) 텍스트 포멧의 마크업 언어입니다 HTML 보다 제공되는 기능이 제한적입니다 Hexo 에서는 마크다운을 보완하기 위해서 Tag Plugin 을 추가적으로 사용합니다 사용처 GitHub 에 README.md 파일 만들 때 사용 Wiki 에 문서 작성할 때 정적인 블로그에 포스트 작성할 때 마크다운 설명서 GitHub Mastering Markdown Markdown 문법 문단 나누기 빈 줄을 이용하여 문단을 나눕니다인용구 > 인용구를 > > 사용합니다인용구를 사용합니다 제목 # Heading ## Heading ### Heading #### HeadingHeading Heading Heading Heading 글자강조 **굵은글씨** *기울인글씨* **굵은 *글씨을 기울여서* 작성.. 2022. 6. 28.

Hexo 로 글작성하기 Hexo 로 글작성하기 글(Post) 생성 ## 일반적인 글 생성 ## source/_posts/hexo-new-post-process.md 가 생성된다 hexo new post "hexo-new-post-process" 폴더로 구분 post 가 많아질경우에 _posts 로만 구분하기는 한계가 있습니다. 그래서 미리 구분할 폴더를 만들어줍니다. 여기서 생성한 폴더는 url 에서 사용됩니다 _posts 폴더 아래 hexo 라는 폴더를 만들어주고 거기로 hexo-new-post-process 를 이동시켜줍니다 _posts hexo hexo-new-post-process.md https://skyksit.github.io/hexo/hexo-new-post-process 와 같은 구조의 URL 을 사용하려면 _.. 2022. 6. 28.

Hexo 의 package 설정 헥소(Hexo) npm script 설정 개인마다 설정 환경이 틀리겠지만 제가 사용 중인 package.json 환경을 공유합니다 build : Hexo 의 html 생성 clean : Hexo 의 html 삭제 deploy : Hexo 의 추가된 내용만 build 해서 github page 로 deploy deployall : Hexo 의 전체 내용을 build 해서 github page 로 deploy server : local 에서 Hexo 서버 띄워서 확인 { "name": "richardkim-github-blog", "version": "1.0.1", "private": true, "scripts": { "build": "hexo generate", "clean": "hexo clean", ".. 2022. 6. 28.

Hexo 란 Hexo Hexo 는 Node.js 기반의 정적 블로그 프레임워크 입니다. Ruby 기반의 Jekyll Go 기반의 HUGO Markdown 으로 문서를 작성하고 HTML 로 Build 해서 Github pages 에 배포해서 블로그를 운영합니다 @startuml header skyksit.com title Hexo 블로그 작성 프로세스 actor Writer participant "Github\n(Repository A)" as Github participant "Github\n(OOO.github.io)" as GPages actor User Writer -> Writer : post 작성 (markdown) Writer -> Github : push Writer -> Writer : build (h.. 2022. 6. 28.

이전 1 다음

티스토리툴바