Hexo 블로그 오류 해결
Hexo Blog Error 해결Category && tags 화면 렌더링 오류12title: tagstype: "tags"
source\tags\index.md에서 type: “tags” 또는 layout: tags를 추가한다.
헥소 블로그의 경우 카테고리와 태그 페이지를 직접 만드는데 hexo new page tags 명령어를 입력하여 index.md를 만들면 layout이나 type 옵션이 추가 되어 있지않다.
페이지를 만들 때 scaffold 양식 그대로 만들기 때문이다
category도 똑같은 방식대로 해결하면 된다
Github 배포 안됨
git 모듈이 설치가 안되어 있어서 그런 것이다. 그냥 설치하면 된다.
1$ npm install --save hexo-deployer-git
이미지 렌더링 안될 때
로컬 서버에서는 이미지가 보이는데, 배포하면 이미지가 404 not found가 뜨는 오류가 있었다.
이미지 확장자를 대문자 JP ...
헥소 블로그로 가쟈!
왜 Hexo로 가는거야?Jekyll이 확실히 편하긴한데 몬가 로컬에서 실행시킬 때도 그렇고 빌드업 시간이 늘어나는게 맘에 걸려서 이유를 찾다보니 그냥 hexo로 옮기면 되겠다 싶었다. hexo가 속도는 확실히 빠르기도 하고 Node.js 기반이라 겸사겸사 공부도 할 수 있을거 같아서도 큰 이유 중 하나이다.
Get it start Hexo BlogSetting필수 설치 사항
Node.js
Git
Hexo 설치1$ npm install -g hexo-cli
블로그 초기 세팅
주의 사항
hexo는 github repo에 jekyll처럼 코드를 올리지 않아요.
때문에 repo에는 생성된 페이지만 올라갑니다
hexo deploy하면 알아서 배포 해줍니다
모르고 push하면 충돌 일어납니다(경험담..)
backup 걱정이 그래서 생기는데 google에 git submodule 검색하면 해결책이 나옵니다
저는 그냥 cloud에 올려버리고 거기서 실행하고 있습니다(편안)
Hexo ...
Jekyll set up
내가 쓰는 jekyll theme은 minimal-mistakes 보편적이라 참고할 것도 많고 setup이 편하다
Jekll setting
준비물 : jekyll theme, git, ruby(난 2.6.4 쓰는 중)
github에 포스트를 커밋하고 블로그를 직접확인하는 것도 좋지만 너무 느려서 local에서 실행해서 확인하는게 훠얼씬 편하다
git bash를 로컬 repo에서 실행
jeykll 관련 install
123456$ gem install jekyll$ gem install minima$ gem install bundler$ gem install jekyll-feed$ gem install tzinfo-data
bundle install
gem파일에서 필요한 것들을 읽고 다운로드 받아주는 똑똑이임
jekyll serve
–livereload : 수정마다 새로 고침
여기까지 하면 로컬에서 실행할 수 있음
local에서 post 볼 때 포스트 이름이 한글 ...
jeykll theme 꾸미기
minimal_mistakes skin 변경확실히 많이 쓰이는 테마인 만큼 테마안에서도 skin을 변경할 수 있다.개인적으로 default skin은 칙칙하기도하고 답답해서 난 contrast skin으로 변경했다.
_config.yml - minimal_mistakes_skin
1minimal_mistakes_skin: "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum" "sunrise"
Dark도 괜찮은듯? 아이폰 다크모드 느낌나는데 글 쓰는 지금이 봄이라 그닥 하고 싶지 않다.
근데 막상 써보니 색감이 이상하다. 랜덤박스에서 색깔 뽑아서 쓴거같은? 이름에 충실한 스킨인가
Site default logo imag ...
Hexo Blog 초기 설정하는 방법
포스트 저장 레포지터리Hexo 블로그는 generate 과정에서 생성된 Public 폴더 내용들을 깃허브 레퍼지터리에 뿌려 웹사이트를 생성한다
나머지 파일들은 따로 백업을 해야하는데 나 같은 경우 처음에는 onedrive를 작업환경에 동기화해서 사용했었다. 하지만 블로그를 빌딩할 때마다 함께 시작하는 노트북의 비행기 소리가 시끄러워 github에 레퍼지터리를 따로 파기로 했다.
블로그 배포를 할 때 hexo-deployer-git을 사용하는데 그래선지 따로 작업 폴더에는 git이 없어서 submodule 필요 없이 레퍼지터리를 새로 생성했다.
remote repo 가져오기12git initgit remote add origin main [github repository 주소]
gitignore 파일 수정onedrive를 사용했을 당시 비행기 소리의 원인은 내가 nodemodule을 포함한 작업 폴더 전체를 백업했기 때문이다. 같은 실수를 반복하지 않기 위해 gitignore 설정을 ...
javascript 모르겠어요 - 1
const자바스크립트에서 변수를 선언할 때 ES6 전에는 var을 사용했었다.
변수를 var 형태로 선언할 경우 문제가 발생한다
변수를 한 번 더 선언할 수 있다
1234567var name = "me"; //meconsole.log(name);var name = "you";console.log(name); // you
같은 이름의 변수를 선언해도 오류가 나지 않는다. 이 경우엔 코드가 많아질수록 내가 쓴 변수가 어떻게 돌아가는지 모르는 상황이 발생할 수 있다.
호이스팅
변수는 선언 - 초기화 - 할당 순서를 걸쳐 생성된다.
호이스팅은 함수 안의 선언들을 모아서 함수 유효 범위(스코프) 내의 최상단에서 선언하는 것을 말한다
var을 통해 변수를 생성할 경우 선언-초기화 과정이 한 번에 일어나기 때문에
12console.log(hi); // undefinedvar hi;
위와 같이 변수 선언 전에 변수를 사용하더라도 오류가 발생하지 않는다 ...
javascript로 Todolist 만들기
코드 리뷰index html && css1234567891011121314151617181920<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="index.css" /> <title>Document</title> </head> <body> <div class="js-clock"> <h1>00:00</h1> </div> <form class="js-form form"> <input type="text" placeholder=& ...
바닐라 자바스크립트로 Snap scroll 구현
사전 조사Snap-Scroll 구현 방안스냅 스크롤은 fullPage.js나 이번에 CSS 업데이트하면서 추가된 CSS-Snap-Scroll 기능으로 구현한다
보통 스크롤을 트리거로 사용해 페이지를 바꾸는걸 목적으로하는데 나같은 경우 한 페이지 내에서 제목 단위로 애니메이션을 구현하고 싶었다.
스크롤을 한 번 하면 다음 제목까지 주르륵 내려가는 애니메이션을 상상했는데 찾아보니 가장 비슷한 애니메이션이 Snap-scroll 애니메이션이었다. 하지만 fullPage.js나 css 내장 Snap-Scroll 기능을 사용했지만 실패해서 바닐라 자바스크립트로 구현해보기로 했다
(2021.09.22) CSS-SNAP-Scroll 도전해봤는데 안된다. 내가 포스트를 쓰면 템플릿 엔진을 거쳐서 포스트를 html로 변환한다. page-content div 하위에 h2 태그 기준으로 div를 묶어 올리려면 엔진을 뜯어 고쳐야하는 것도 문제인데 CSS-SNAP-Scroll을 쓰더라도 내 생각대로 구현하 ...
javascript 개발환경 세팅
응? 뜬금 javascript 하는거냐?깊게 공부할 생각은 없고 그냥 코드를 읽으면 이렇게 돌아가는구나 자바스크립트는 이런 언어 이구나 알고 싶다. 그런것도 있고 자바 스크립트의 철학이라던가 워게임 할 때도 필요하고 하니 미리 조곰 해두려고 이 때 아니면 언제 해보냐?
VScode에서 jscode 개발 환경 세팅
liver server 설치
파일 - 설정 - liveserver default 브라우저 크롬으로 변환
html, js 파일 생성
1234567891011<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum ...
코틀린 1 일차
간단한 Recoder 만들기책도 있고 유튜브도 있으니까 일단 박치기로 만들어보면서 겪어 보기로 했다. 몸으로 겪는 것은 잘 까먹지 않기 마련이니
MaiActivity.kt123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475class MainActivity : AppCompatActivity() { private var output: String? = null private var mediaRecorder: MediaRecorder? = null private var state: Boolean = false override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(saved ...