GitHub 블로그 테마 이주 #3 - 사이트 설정

M3. GitHub 블로그 테마 이주 #3 - 사이트 설정 GitHub 블로그 테마 이주 #3 - 사이트 설정 이 글에서는 Minimal Mistakes의 설정 매뉴얼 을 따라 하나씩 설정합니다. 제 경우에 필요하거나 대다수 블로그 운영시 필요한 설정 위주로 설명합니다. 본인에게 필요한 설정에 대한 설명이 빠져있을 수 있으니, 해당 매뉴얼을 대략이나마 훝어보기를 권합니다. 특별한 설명이 없으면 루트 디렉토리에 위치한 _config.yml 파일을 수정합니다. 관련글 테스트 서버 구성 기존 데이터 복사 사이트 설정 커스터마이징 (Part 1) 커스터마이징 (Part 2) 운영 사이트에 반영 테스트 사이트의 수정 사항 일괄 반영 사이트 설정 (Site settings) 테마 (Theme) GitHub 리포지토리로 클론하였기에 따로 설정할 필요가 없습니다. 로컬(local)에서 테스트하고자 하는 경우 필요합니다. 스킨 (Skin) 기본 설정이 무난해서 설정하지 않았습니다. 사이트 언어 (Site locale) ko-KR 로 설정합니다. _data/ui-text.yml 파일에 언어별로 각 용어에 대한 번역이 있습니다. 예를 들어 recent_posts 는 영어로는 Recent Posts , 한국어로는 최근 포스트 로 설정되어 있습니다. 한국어로 누가 번역했는지 모르겠지만 감사하게 잘 쓰겠습니다. less _data/ui-text.yml # Korean # ------ ko : &DEFAULT_KO skip_links : skip_primary_nav : skip_content : skip_footer : page : "페이지" pagination_previous : ...

GitHub 블로그 테마 이주 #6 - 운영 사이트에 반영

이미지
M6. GitHub 블로그 테마 이주 #6 - 운영 사이트에 반영 GitHub 블로그 테마 이주 #6 - 운영 사이트에 복제 이 글에서는 테스트 서버를 충분히 검증한 경우, 운용 사이트에 복제하는 과정을 담고 있습니다. 동일한 데이터를 사용하되 운영 사이트와 테스트 사이트에 따라 다르게 동작시키는 방법도 포함하고 있습니다. 관련글 테스트 서버 구성 기존 데이터 복사 사이트 설정 커스터마이징 (Part 1) 커스터마이징 (Part 2) 운영 사이트에 복제 테스트 사이트의 수정 사항 일괄 반영 파일 정리 Minimal Mistakes 테마를 복사할 때, 샘플이나 설명문이 함께 따라옵니다. 이는 본인의 사이트와 관련이 없으니 제거할 수 있습니다. 매뉴얼에 불필요한 파일 목록 이 잘 정리되어 있습니다. 이 파일들은 Minimal Mistakes 리포지토리 에서 언제라도 다시 확인이 가능하니 지워도 무방합니다. 해당 목록 중에서 minimal-mistakes-jekyll.gemspec 는 지우지 않는 것이 좋습니다. 이 파일을 지울 경우 GitHub에서 페이지를 빌드하는 과정에서 다음과 같은 주의(warning) 메시지가 발생합니다. Warning: github-pages can't satisfy your Gemfile's dependencies. 주의 .github 대신 .git 를 지우지 않도록 주의해야 합니다. .git 에는 로컬 리포지토리에 대한 관리 정보를 담고 있습니다. 실수로 지운 경우에는 테스트하고 있는 리포지토리(제 경우에는 QuantKangAlpha.github.io )를 클론해서 다시 받거나 로컬 리포지토리를 재설정해야 합니다. 최악의 경우 최종 푸시한 이후 로컬에서 변경한 사항이 사라질 수 있습니다. 사이트 소유자 확인 코드 구글/빙/네이버/사이트 소유자 확인 코드는 사이트마다 다르게 발급됩니다. 테스트 사이트는 검색 노출이 목적이 아니므로 운용 사이트의...

블로그스팟(blogspot) 커스터마이징

블로그스팟(blogspot) 커스터마이징 블로그스팟(blogspot) 커스터마이징 블로그스팟(blogspot)으로 블로그를 운영하면서 조금씩 고친 주요 설정 수정 내역입니다. 일부는 블로그스팟의 설정 메뉴에서 지정이 가능하며, 일부는 테마의 HTML 소스를 고져야 합니다. 블로그스팟 내 설정으로 가능한 부분 블로그 스팟의 설정 메뉴에서 조정 가능한 부분입니다. 구글 애널리틱스 설정 > 기본 > Google 애널리틱스 측정 ID 에 애널리틱스 측정 아이디를 넣으면 됩니다. 시간대 설정 > 서식 > 시간대 에서 한국 표준시 로 설정하면 됩니다. 날짜와 시간 관련 서식 블로그스팟의 날짜나 시간 관련 서식은 한국어에 적절하지 않습니다. 현재는 아래와 같이 설정해 두었습니다. 날짜 헤더 형식 : 2024-02-08 타임스탬프 형식 : 2월 08, 2024 댓글 타임스탬프 형식 : 2월 08, 2024 3:32 오후 한국어에 맞게 설정하기 위해서는 테마의 HTML 파일을 직접 수정해야 할 듯 합니다. robots.txt robots.txt의 기본 설정은 다음과 같습니다. User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search Allow: / Sitemap: https://onuri2005.blogspot.com/sitemap.xml Mediapartners-Google 봇에 대해 크롤링을 막아 두었습니다. 이 봇은 구글 애드센스와 관련이 있습니다. 큰 문제는 없을 수 있지만, 애드센스를 달고자 하는 분은 이 항목을 지우는게 나을 수 있습니다. (참고: What does User-agent: Mediapartners-Google mean? ) 맞춤 robots.txt 사용 설정 에서 User-agent: * 부터 끝가지 넣어서 지정하면 됩니다. 테마 HTML을 수정하여야 하는 부분 아래는 ...

GitHub(깃허브) 블로그에 쿠팡 광고 넣기

이미지
GitHub(깃허브) 블로그에 쿠팡 광고 넣기 GitHub(깃허브) 블로그에 쿠팡 광고 넣기 이 글에서는 GitHub 블로그에 쿠팡 광고를 설정하는 방법을 설명합니다. 쿠팡 광고 코드 만들기 쿠팡 파트너스 홈페이지에서 다양한 형식의 광고 링크를 만들 수 있습니다. 제 경우에는 사이트 하단에 붙일 목적으로 다이나믹 배너를 선택했습니다. 다이나믹 배너는 내용이 옆으로 움직이면서 계속 바뀌기 때문에 사용자 시선을 끌기 좋습니다. 이를 페이지 중간이나 사이드에 배치하면, 사이트를 이용하는데 불편을 줄 수 있습니다. 제 경우에는 페이지 맨 마지막에 위치한 각주 블록 위에 붙일 계획이기에, 광고 효과가 높을 것으로 예상되는 다이나믹 배너를 선택했습니다. 구분이 편한 이름을 배너 제목에 붙이고 사이트에 적절한 배너 타입과 배너 데이터를 선택합니다. 고객 관심 기반 추천에 추천 상품 피드를 선택했습니다. 깔끔하게 보이도록 테두리 없음으로 선택했습니다. 배너 만들기 버튼을 클릭하면 자바 스크립트 코드가 생성됩니다. < script src = " https://ads-partners.coupang.com/g.js " > </ script > < script > new PartnersCoupang . G ( { "id" : 755374 , "trackingCode" : "AF3144276" , "subId" : null , "template" : "carousel" , "width" : "680" , "height" : "140" } ) ; </ script > 광고 모듈 정리하고 쿠팡 광고 코드 넣기 광고 모듈 정리하기 이전 글 에서 애드센스 광고 코드를 _includ...

GitHub(깃허브) 블로그에 애드센스 수동 광고 넣기

이미지
GitHub(깃허브) 블로그에 애드센스 수동 광고 넣기 GitHub(깃허브) 블로그에 애드센스 수동 광고 넣기 이 글에서는 GitHub 블로그에 애드센스 수동 광고를 설정하는 방법을 설명합니다. 수동 광고가 필요한 경우 구글 애드센스 사용자는 콘텐츠 전달의 편의와 광고 효율 향상을 위해 자동 광고와 수동 광고를 섞어쓰는 경우가 많습니다. 자동 광고는 말 그대로 애드센스가 알아서 광고를 보여줍니다. 수동 광고는 사용자가 지정한 위치에 지정한 형태로 광고를 보여줍니다. 애드센스는 자동 광고에 대해 "사이트 전체에서 가장 적합한위치에 자동으로 광고 게재"라고 설명하고 있습니다. 자동 광고 기능을 켜면 사용자 경험(user experience)를 해치는 경우가 종종 있습니다. 모바일의 경우 맨 상단 제목 바로 아래 큼지막한 광고를 보여주는 경우도 많습니다. 페이지의 기본 내용을 보려고 해도 스크롤을 해야 하는 것은 물론이고, 상단 광고 로딩에도 시간이 소요되게 됩니다. 애드센스에서 광고를 넣지 않을 영역(제외된 영역)을 지정할 수는 있지만, 사이트 구조에 따라서는 지정할 수 없는 부분도 있습니다. 아래와 같이 제목 밑을 광고 제외 영역으로 지정하려고 하는데, 지정이 되지 않습니다. 그런데 여기에 광고가 나타납니다. 광고 제외 가능 영역 (파란색) 실제 나타난 광고 사이트 운영 목적에 따라 다르겠지만, 사용자 경험을 조금 우선시 한다면 적절한 수준으로 광고를 줄일 필요가 있습니다. 수동 광고 사용하기 여기서는 자동 광고를 모두 끄고, 페이지의 맨 마지막에 있는 각주 바로 위에만 광고를 수동 게재하는 방법을 설명합니다. 이 보다는 자동 광고 수를 줄이고, 원하는 위치에 수동 광고를 기본 배치하는 것이 나을 수 있습니다. 수동 광고를 만들기 위해서는 먼저 광고 단위를 만들어야 합니다. 디스플레이, 인피드, 인아티클, 멀티플렉스의 4가지를 지원합니다. 각각을 눌러보면 어떤...

GitHub 블로그 테마 이주 #7 - 테스트 사이트의 수정 사항 일괄 반영

이미지
M7. GitHub 블로그 테마 이주 #7 - GitHub 블로그 테마 이주 #7 - 테스트 사이트 수정 사항 운영 사이트에 반영 GitHub 블로그 테마 이주 #7 - 테스트 사이트의 수정 사항 일괄 반영 앞에서는 테스트 사이트를 구축하여 개발한 후, 운영 사이트에 일괄 복제 하는 방법을 소개하였습니다. 이 글에서는 개발 과정에서 현재까지의 테스트 사이트 수정 사항을 운영 사이트에 반영하는 방법을 소개합니다. 관련글 테스트 서버 구성 기존 데이터 복사 사이트 설정 커스터마이징 (Part 1) 커스터마이징 (Part 2) 운영 사이트에 반영 테스트 사이트의 수정 사항 일괄 반영 테스트 사이트 변경 내역의 예 테스트 사이트에 세 가지를 수정해서 각각 푸시하겠습니다. 목록내 링크의 밑줄 제거 목록( <li> )에 나오는 링크에 밑줄이 있습니다. 다소 복잡해 보이니 제거하겠습니다. 표 내부 링크에서 밑줄을 제거 한 것처럼 _sass/minimal-mistakes/_base.scss 을 수정하여, 목록 내 링크의 밑줄을 제거하겠습니다. li { a { text-decoration : none ; } } 수정 사항을 테스트 사이트에 푸시합니다. git add -A git commit -m 'remove underline of links in <li>' git push 엣지 브라우저와 크롬 브라우저의 결과가 다릅니다. 엣지에서는 밑줄이 사라지지 않았지만, 크롬에서는 사라졌습니다. 해석하는 방식에 차이가 있거나 캐싱 때문으로 보입니다. 메인 페이지 제목 변경 메인 화면의 문구인 "퀀트강의 슬기로운 주식 정보"는 여러 번 등장합니다. index.md 파일을 수정하여 "성공적인 투자를 위해 "로 바꾸겠습니다. layout : splash title : 성공적인 투자를 위해 수정 후...

GitHub 블로그 테마 이주 #5 - 커스터마이징 (Part 2)

이미지
M5. GitHub 블로그 테마 이주 #5 - 커스터마이징 (Part 2) GitHub 블로그 테마 이주 #5 - 커스터마이징 (Part 2) 이 글에서는 사이트를 운용하는 목적에 맞게 UI 설정을 조정한 기록을 담고 있습니다. 그 중에서도 주로 SCSS/CSS/HTML 수정이 필요한 부분을 담았습니다. 비슷한 용도로 수정이 필요한 분들에게 도움이 되면 좋겠습니다. 관련글 테스트 서버 구성 기존 데이터 복사 사이트 설정 커스터마이징 (Part 1) 커스터마이징 (Part 2) 운영 사이트에 반영 테스트 사이트의 수정 사항 일괄 반영 페이지 하단 소셜 링크와 저작권 표시 변경하기 페이지 하단에 여러 소셜 링크와 RSS 피드, 그리고 저작권이 표시됩니다. 소셜 링크에 대한 설정은 _config.yml 에 있습니다. 소셜 링크 관련 부분은 _includes/footer.html 에서 생성합니다. 제 경우에는 저작권만 남기고 싶습니다. 소셜 링크와 관련한 부분은 (이후에 다시 살리고 싶은 경우가 있으니) 코멘트 처리하고, 저작권 문구는 수정하였습니다. 앞서 _config.yml 에서 설정한 site_name 을 여기서 사용하고 있습니다. 저적권과 관련하여 사이트명이 들어가는 부분은 site.title 변수를 이용하였습니다. < div class = " page__footer-copyright " > {{ site.title }}에서 제공하는 금융 정보는 투자 참고사항이며, 오류가 발생하거나 지연될 수 있습니다. {{ site.title}}는 제공된 정보에 의한 투자 결과에 법적인 책임을 지지 않습니다. &copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. </ div > 원하는대로 문구가 수정되었습니다. 향후 위아래 여백을 조금 줄일 필요가 있어...