IT,프로그래밍 블로그

애널리틱스를 이용해서 웹사이트 분석하기

Wed, 06 May 2020 00:00:00 +0000

analytics란?

애널리틱스란 웹 사이트 트래픽을 추적하여 웹사이트의 실적을 돕는 도구로 사이트에 방문한 이용자 수, 유입 검색어, 방문자들이 어떤 유입채널을 통해 내 사이트에 방문하는지, 각 페이지에 방문자가 머무르는 시간은 얼마나 되는지 등을 추적하여 사이트 운영시 참고 할 수 있다.

구글 애널리틱스 가입하기

구글 계정으로 [구글 애널리틱스] 페이지에 접속 후 가입을 한다.

사이트 정보 등을 입력한 후 [추적ID 가져오기] 버튼을 클릭 한다.

가입을 완료하면 내 고유 ID가 있는 추적 코드를 받을 수 있다.

애널리틱스 코드 삽입하기

발급받은 추적 코드 스크립트를 분석을 할 모든 웹사이트 페이지에 붙여 넣으면 데이터 수집이 시작된다.

<html>
  <head>
  	...
	
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-?????????-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-?????????-1');
    </script>
  </head>
  <body>
  	...
  </body>
</html>

TIP: 구글 애널리틱스 상세 유입 경로 보기

기본적으로 보이는 유입 경로에는 대표 URL로 나오고 있어 유입 페이지의 상세한 URL정보를 알 수 없다. 필터 설정을 통해 상세 URL 정보를 알 수 있다.

[관리] > [보기] > [필터] > [+필터추가] 버튼을 눌러 필터 추가 화면으로 이동한다.

“필드 A -> 추출 A”: [추천] 선택, “(.*)” 입력
“출력대상 -> 생성자”: [맟춤설정] 선택, “$A1” 입력
“입력란 A는 필수 항목입니다.”, “출력 입력란 덮어쓰기” 체크

설정 후 다음날 [잠재고객] > [맞춤] > [맞춤설정] 메뉴에서 상세 URL을 확인할 수 있다.

검색엔진최적화(Search Engine Optimization, SEO)

Wed, 01 Apr 2020 00:00:00 +0000

SEO란?

검색엔진 최적화(SEO)는 ‘Search Engine Optimization’ 또는 ‘Search Engine Optimizer’의 약자로, 검색엔진에서 검색이 잘 되게 하는 방법을 말한다.

sitemap.xml

sitemap.xml은 웹사이트 내 모든 페이지의 목록을 나열한 파일로 책의 목차와 같은 역할을 한다. 검색 엔진 로봇의 일반적인 크롤링 과정에서 발견되지 않는 웹페이지에 대한 정보를 제공해주기 때문에 더 많은 웹페이지가 크롤링되고 색인될 수 있게 도와준다.

다국어 사용시 사이트맵에 언어정보

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>http://www.example.com/foo.html</loc>
    <lastmod>2020-03-10</lastmod>
  </url>
  <url>
    <loc>http://www.example.com/bar.html</loc>
    <lastmod>2018-04-01</lastmod>
  </url>
</urlset>

robot.txt

robots.txt는 사이트의 루트 디렉토리에 위치하며 웹사이트에 대한 검색엔진 로봇들의 접근을 제어해주고 로봇들에게 웹사이트의 사이트맵이 어디 있는지 알려주는 역할을 한다.

모든 접근 허용

User-agent: *

/admin/ 하위 경로에 대한 모든 웹 크롤러의 접근을 차단

User-agent: *
Disallow: /admin/

사이트맵 위치 안내

Sitemap: https://example.com/sitemap.xml

타이틀 & 메타디스크립션 태그

타이틀 태그는 영문의 경우 공란 포함 65자, 한글은 32자, 메타디스크립션 길이 제한은 영문 기준 320자, 한글 160자 정도로 사람들이 관심있어 할만한 키워드, 문구를 설정한다.

<html>
  <head>
    <title>페이지 타이틀(검색 결과에 나오는 부분)</title>
    <meta name="description" content="페이지 내용을 정리한 설명(검색 결과 프리뷰로 나타나는 영역)">
  </head>
</html>

오픈그래프 태그

소셜 검색엔진최적화 메타태그인 오픈그래프 태그(Open Graph)는 페이스북, 트위터 등의 소셜미디어에서 웹페이지 URL이 공유될 때 웹페이지의 주요 정보(제목, 이미지, 설명)가 표기되는 방식을 설정한다.

Open Graph가 적용된 웹페이지 URL 공유시 태그로 설정된 정보들이 표시된다.

<html>
  <head>
    <meta property="og:url" content="https://example.com" />
    <meta property="og:title" content="페이지 타이틀" />
    <meta property="og:description" content="페이지 설명" />
    <meta property="og:image" content="https://example.com/image.js" />
  </head>
</html>

대표 주소 설정

http://example.com
http://www.example.com
https://example.com
https://www.example.com

방문자가 위의 4가지 중 어떤 주소를 입력하든 일관성 있게 특정 주소 하나로 접속이 되도록 설정을 해 웹사이트를 각각 별도의 웹사이트로 인식하지 않도록 하여 웹사이트의 도메인 점수가 분산되지 않도록 한다.

<html>
  <head>
	<link rel="canonical" href="https://example.com/url/path" />
  </head>
</html>

이미지 태그 최적화

이미지 Alt태그가 잘 설정되어 있는 이미지의 경우, 이미지 검색에서 높은 검색 순위를 차지한다.

<img src="./그림파일.gif" alt="그림설명">

모바일 최적화

반응형 웹사이트로 제작하는 것을 권장한다.

모바일 친화성 테스트: https://search.google.com/test/mobile-friendly

HTTPS 보안 프로토콜 사용하기

HTTPS 보안 프로토콜을 사용하는 웹사이트에 대해 구글 검색엔진에서 랭킹 가산점을 부여한다.

웹페이지 로딩 속도 개선

웹페이지의 로딩 속도는 사용자 경험에 영향을 미치기 때문에 검색 엔진은 로딩 속도가 짧은 웹사이트에 높은 점수를 부여한다.

웹페이지 속도 테스트: https://developers.google.com/speed/pagespeed/insights/

동적 페이지 피하기

페이지 최초 로딩 시에는 내용이 없다가 동적으로 컨텐츠를 불러올 경우 검색 엔진 로봇이 페이지 내용을 가져갈 수 없다.

다국어 페이지 최적화

페이지의 언어별 버전에 서로 다른 URL을 사용할 것을 권장한다.

Google에 여러 언어 또는 지역별 페이지 알리기

<html>
  <head>
    <link rel="alternate" hreflang="en-gb" href="http://en-gb.example.com/page.html" />
    <link rel="alternate" hreflang="en-us" href="http://en-us.example.com/page.html" />
    <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" />
    <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />
    <link rel="alternate" hreflang="x-default" href="http://www.example.com/" />
  </head>
</html>

다국어 각 페이지에 모두 hreflang 코드를 넣어 줘야한다. 다국어 설정되지 않는 언어의 사용자가 들어올 경우 x-default로 설정한 페이지로 연결된다.

검색엔진 순위 (2020년 2월)

요약

sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>http://www.example.com/foo.html</loc>
    <lastmod>2020-03-10</lastmod>
  </url>
  ...
</urlset>

robots.txt

User-agent: *
Sitemap: https://example.com/sitemap.xml

html

<html>
  <head>
    <title>타이틀</title>
    <meta name="description" content="설명">
    <meta property="og:url" content="https://example.com" />
    <meta property="og:title" content="타이틀" />
    <meta property="og:description" content="설명" />
    <meta property="og:image" content="https://example.com/image.js" />
	<link rel="canonical" href="https://example.com/url/path" />
  </head>
  <body>
    ...
  </body>
</html>

모바일 최적화 https://search.google.com/test/mobile-friendly
웹사이트 속도 개선 https://developers.google.com/speed/pagespeed/insights/

참고자료

사이트맵: https://www.sitemaps.org/index.html 모바일 친화성 테스트: https://search.google.com/test/mobile-friendly
웹페이지 속도 테스트: https://developers.google.com/speed/pagespeed/insights/
검색엔진 최적화(SEO) 초보자 가이드: https://support.google.com/webmasters/answer/7451184?hl=ko
구글 품질 가이드라인: https://support.google.com/webmasters/topic/6001971?hl=ko&ref_topic=6001981
구글 크롤링 및 색인 생성: https://support.google.com/webmasters/topic/9427949?hl=ko&ref_topic=9428048
검색엔진 순위: http://www.ebizmba.com/articles/search-engines

구름 IDE로 Jekyll 클라우드 개발환경 세팅하기

Sun, 01 Mar 2020 00:00:00 +0000

Cloud IDE 란?

언제 어디서나 사용 가능한 클라우드 통합개발환경(Integrated Development Environment IDE).
웹브라우저만 있으면 설치 없이 C, C++, PHP, 루비, 펄, 파이썬, 자바스크립트(Node.js), Go 등의 코딩, 디버그, 컴파일, 배포 등 개발에 관련된 모든 작업을 동료 간 협업으로 클라우드에서 할 수 있다.

대표적인 클라우드 IDE 서비스

Cloud9 - https://c9.io
Codenvy - https://codenvy.com/
Koding - http://www.koding.io
codeanywhere - https://codeanywhere.com
구름IDE - https://www.goorm.io

구름 IDE 가입

구름 IDE는 이메일 회원가입 또는 소셜 로그인(구글, 페이스북, 카카오, 네이버, github, bitbucket, 페이코)을 통해 회원 가입을 할 수 있다.

구름 IDE 회원가입 화면

구름 IDE 가격정책

구름IDE 1개월 기준 가격정책

기본 무료 계정은 각 컨테이너당 5개까지 컨테이너를 생성할 수 있으며 컨테이너는 동시 실행을 할 수 없다.
컨테이너를 하나만 실행 가능하지만 각 컨테이너당 도메인이 3개 까지 가능해 한개의 컨테이너로 3개의 웹서버를 테스트 할 수 있다.

컨테이너 생성

구름IDE의 무료 사용자가 첫 컨테이너 생성시 사용 목적을 입력하여 승인을 받아야 한다.
12시간 이내 승인되며 승인 후 컨테이너 생성이 가능하다.

사용 목적을 최소 100자 이상 입력 해야한다.

Jekyll 개발환경을 세팅하기 위해 컨테이너 이름 입력 > 공개 범위 : Private > 소프트웨어 스택 : Ruby > Template: Ruby 빈 프로젝트 선택 후 컨테이너를 생성한다.

Jekyll 설치

루비가 이미 설치되어 있으니 바로 지킬을 설치한다.

# RubyGems 를 통해 Jekyll 과 Bundler 를 설치한다
$ gem install bundler jekyll

내 깃허브 Jekyll 저장소 가져오기

# 내 저장소 clone
$ git clone 깃허브주소 프로젝트폴더명
# ex) git clone https://github.com/사용자명/저장소명.git jekyllBlog
#     git clone [email protected]:사용자명/저장소명.git jekyllBlog
$ cd 프로젝트폴더명  
# gem 라이브러리 설치
$ bundle install

지킬 서버 실행

도메인 설정하기

[ 프로젝트 > 실행 URL과 포트 ] 로 들어가 원하는 도메인을 설정한다.

_config_dev.yml 파일의 url을 설정한 도메인 주소로 변경한다.

#_config_dev.yml 

...
url: 'https://설정한이름.run.goorm.io'
...

실행 스크립트 설정하기

[ 프로젝트 > 실행 > 실행 명령 추가 ] 로 들어가 실행 스크립트를 작성한다.

서버 프로세스로 체크 후 아래 명령어를 입력한다.

$ JEKYLL_ENV=production jekyll serve --host 0.0.0.0 --config _config_dev.yml

이제 설정한 실행 스크립트를 실행하면 하단에 콘솔창이 추가되며 실행된다.

깃 사용자 정보 설정

git config user.name "사용자명"
git config user.email 이메일주소

깃허브 배포

root@goorm:/workspace/컨테이너명(master)# git add .
root@goorm:/workspace/컨테이너명(master)# git commit -m "commit message"
root@goorm:/workspace/컨테이너명(master)# git push
Username for 'https://github.com': 사용자명
Password for 'https://사용자명@github.com':

매번 비밀번호를 입력하기 싫다면 깃 설정을 수정하면 된다.

$ vi /workspace/컨테이너명/.git/config

.git/config 파일의 [remote “origin”]의 url부분을 수정한다.

# .git/config

[core]
	repositoryformatversion = 0
	filemode = true
	bare = false
	logallrefupdates = true
[user]
	name = 사용자명
	email = 이메일주소
[remote "origin"]
	url = https://사용자명:비밀번호@github.com/사용자명/저장소명.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
	remote = origin
	merge = refs/heads/master

공개범위를 Public로 생성한 컨테이너인 경우 타인이 볼 수 있으니 Private로 생성한 컨테이너에서만 수정하도록 한다.

유사 서비스

cloud9 IDE

Koding

OriginHub

Codenvy

SourceLair

Codeanywhere

참고자료

구름 IDE : https://ide.goorm.io
구름 IDE 가격정책 : https://ide.goorm.io/pricing

Redmine 설치 및 플러그인 적용

Tue, 11 Feb 2020 00:00:00 +0000

Redmine

레드마인(Redmine)은 오픈 소스 프로그램으로 웹 기반의 프로젝트 관리 와 버그 추적 기능을 제공하는 도구이다.

화면기반의 프로젝트 관리에 도움이 되도록 달력과 간트 차트를 제공하고 일정관리 기능을 제공한다.

또한 레드마인은 통합된 프로젝트관리 기능과 이슈추적, 여러가지 형상 관리 기능을 제공한다.

레드마인은 루비 온 레일즈에 기반하여 작성되었고 멀티 플랫폼을 지원하며 여러가지 종류의 데이터베이스 및 34개의 언어를 지원한다.

Bitnami

비트나미(Bitnami)는 가상 어플라이언스 및 웹 애플리케이션, 개발 스택용 소프트웨어 패키지 및 설치 라이브러리이다.
레드마인을 한 번의 클릭으로도 손쉽게 설치할 수 있도록 패키징하여 제공한다.

Bitnami Redmine 다운로드

아래 사이트에서 최신 버전의 설치파일을 다운 받을 수 있다.
https://bitnami.com/stack/redmine/installer

구버전 설치파일은 Bitnami comuunity 게시판에 요청하면 Bitnami 개발자들이 link를 알려준다.

Bitnami Redmine linux installer 3.4.6-5 :
https://downloads.bitnami.com/files/stacks/redmine/3.4.6-5/bitnami-redmine-3.4.6-5-linux-x64-installer.run
Bitnami Redmine linux installer 4.0.2-3 :
https://downloads.bitnami.com/files/stacks/redmine/4.0.2-3/bitnami-redmine-4.0.2-3-linux-x64-installer.run

CentOS Linux 7에 Bitnami Redmine 설치

# 최신버전을 아직 지원하지 않는 레드마인 플러그인이 있어 3.4.6-5 버전으로 설치
$ wget https://downloads.bitnami.com/files/stacks/redmine/3.4.6-5/bitnami-redmine-3.4.6-5-linux-x64-installer.run
$ chmod 775 bitnami-redmine-3.4.6-5-linux-x64-installer.run
$ ./bitnami-redmine-3.4.6-5-linux-x64-installer.run
Language Selection

Please select the installation language
[1] English - English
[2] Spanish - Español
[3] Japanese - 日本語
[4] Korean - 한국어
[5] Simplified Chinese - 简体中文
[6] Hebrew - עברית
[7] German - Deutsch
[8] Romanian - Română
[9] Russian - Русский
Please choose an option [1] : 4
----------------------------------------------------------------------------
Bitnami Redmine Stack 설치 마법사를 시작합니다.

----------------------------------------------------------------------------
설치할 구성 요소를 선택하십시오. 설치하지 않을 구성 요소는 선택을 취소하십시오. 계속할 준비가 되면 다음을 클릭하십시오.

Subversion [Y/n] :y

PhpMyAdmin [Y/n] :y

Redmine : Y (Cannot be edited)

Git [Y/n] :y

위의 선택이 정확합니까? [Y/n]: y

----------------------------------------------------------------------------
설치 경로

Bitnami Redmine Stack의 설치 경로를 선택하세요.

폴더 선택 [/opt/redmine-3.4.6-5]: /opt/redmine-3.4.6-5

----------------------------------------------------------------------------
Admin 계정 생성

Bitnami Redmine Stack 관리자 계정을 생성합니다.

이름 [User Name]: admin

이메일 주소 [[email protected]]: 이메일주소

로그인 계정명 [user]: admin

패스워드 :
패스워드를 재입력 :
# 여기서 입력한 비밀번호는 첫 로그인 후 다시 설정하게 된다.
----------------------------------------------------------------------------
기본 데이터 설정에 사용할 언어

기본 데이터 설정 시 사용할 언어를 선택하세요.

[1] Bosnian
[2] 불가리아어
[3] Catalan
[4] 체코어
[5] Danish
[6] 독일어
[7] 영어
[8] 스페인어
[9] 프랑스어
[10] Galician
[11] 히브리어
[12] Hungarian
[13] 이탈리아어
[14] 일본어
[15] 한국어
[16] Lithuanian
[17] 네덜란드어
[18] Norwegian
[19] 폴란드어
[20] 포르투갈어
[21] 루마니아어
[22] 러시아어
[23] Slovak
[24] Slovenian
[25] 세르비아어
[26] 스웨덴어
[27] Turkish
[28] Ukrainian
[29] Vietnamese
[30] 중국어
옵션을 선택하십시오. [15] : 15

사용하시겠습니까? [y/N]: y

----------------------------------------------------------------------------
SMTP 설정

어플리케이션에서 통보가 가능하도록 이메일 지원 기능을

기본 이메일 서비스 제공자

[1] GMail
[2] 사용자 정의
옵션을 선택하십시오. [1] : 1

----------------------------------------------------------------------------
SMTP 설정

This data is stored in the application configuration files and may be visible to
others. For this reason, it is recommended that you do not use your personal
account credentials.

GMail 주소 []: 이메일주소

GMail 패스워드 :
재입력 :
----------------------------------------------------------------------------
이제 컴퓨터에 Bitnami Redmine Stack을(를) 설치할 준비가 되었습니다.

계속하시겠습니까? [Y/n]: y

----------------------------------------------------------------------------
컴퓨터에 Bitnami Redmine Stack을(를) 설치하는 동안 기다려 주십시오.

 설치
 0% ______________ 50% ______________ 100%
 #########################################

----------------------------------------------------------------------------
컴퓨터에 Bitnami Redmine Stack 설치를 완료했습니다.

Redmine 어플리케이션 구동 [Y/n]: y

정보: To access the Bitnami Redmine Stack, go to
http://127.0.0.1:80 from your browser.
계속하려면 [Enter] 키 누르기:

Redmine 실행/중지

/opt/redmine-3.4.6-5/ctlscript.sh start
/opt/redmine-3.4.6-5/ctlscript.sh stop
/opt/redmine-3.4.6-5/ctlscript.sh restart

SMTP 설정

레드마인 메일알림을 이용하기 위해 SMTP 설정을 한다.

설정파일 수정

vi /opt/redmine-3.4.6-5/apps/redmine/htdocs/config/configuration.yml

하단 production 부분을 수정한다.

production:
  email_delivery:
    delivery_method: :smtp
    smtp_settings:
      enable_starttls_auto: true
      address: "smtp.gmail.com"
      port: 25
      domain: "smtp.gmail.com"
      authentication: :login
      user_name: "이메일주소"
      password: "비밀번호"

Gmail 보안설정에서 보안 수준이 낮은 앱에 대한 계정 액세스 변경을 설정
https://myaccount.google.com/lesssecureapps?pli=1

보안 수준이 낮은 앱 허용을 사용으로 변경한다.

계정 엑세스 허용
https://accounts.google.com/b/0/displayunlockcaptcha
수정 후 서버 재실행

/opt/redmine-3.4.6-5/ctlscript.sh restart

관리 > 설정 > 메일알림 페이지에서 테스트메일보내기

성공시 상단에 “‘이메일주소’님에게 메일이 발송되었습니다.” 라는 문구가 나온다.

Plugin 설치

플러그인 다운로드 : https://www.redmine.org/plugins?page=1
레드마인 버전에 맞는 플러그인을 받아 사용한다.

플러그인 다운받아 아래 경로에 압축 해제

/opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins

플러그인 다운 페이지에서 설명하는 이름으로 폴더명을 변경한다.
Bitnami Console 실행 후 ‘/apps/redmine/htdocs’ 경로에서 플러그인 설치 스크립트를 실행한다.

/opt/redmine-3.4.6-5/use_redmine
cd /opt/redmine-3.4.6-5/apps/redmine/htdocs
bundle install --without development test
rake redmine:plugins:migrate RAILS_ENV=production

레드마인 플러그인 : Progressive Projects List 설치

프로젝트들에 대한 진척도를 bar 형태로 표시해주며, 프로젝트의 version를 기준으로 issue 현황을 파악하는 플러그인
https://www.redmine.org/plugins/progressive-projects-list

프로젝트들에 대한 진척도를 bar 형태로 표시

cd /opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins
wget https://github.com/ergoserv/redmine-progressive-projects-list/archive/v4.0.0.tar.gz
tar -xvf v4.0.0.tar.gz
rm v4.0.0.tar.gz
mv redmine-progressive-projects-list-4.0.0 progressive_projects_list
/opt/redmine-3.4.6-5/use_redmine
cd /opt/redmine-3.4.6-5/apps/redmine/htdocs
bundle install --without development test
rake redmine:plugins:migrate RAILS_ENV=production

오류 발생 시 아래 명령어 실행 후 다시 시도

bundle install --no-deployment
rake redmine:plugins:migrate RAILS_ENV=production

레드마인 재실행

exit
/opt/redmine-3.4.6-5/ctlscript.sh restart

레드마인 플러그인 : CKEditor 설치

레드마인 문서 작성시 텍스타일 문법이 아닌 위지윅(WYSIWYG) 에디터인 CKEditor로 변경
https://www.redmine.org/plugins/redmine-ckeditor

cd /opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins
wget https://github.com/a-ono/redmine_ckeditor/archive/1.1.7.tar.gz
tar -xvf 1.1.7.tar.gz
rm 1.1.7.tar.gz
mv redmine_ckeditor-1.1.7 redmine_ckeditor
/opt/redmine-3.4.6-5/use_redmine
cd /opt/redmine-3.4.6-5/apps/redmine/htdocs
bundle install --without development test
rake redmine:plugins:migrate RAILS_ENV=production

오류 발생 시 아래 명령어 실행 후 다시 시도

bundle install --no-deployment
rake redmine:plugins:migrate RAILS_ENV=production

레드마인 재실행

exit
/opt/redmine-3.4.6-5/ctlscript.sh restart

레드마인 관리 > 설정 > 일반 > 본문 형식을 Ckeditor로 변경

본문 형식을 Ckeditor로 변경 후 저장

CKEditor 플러그인 설치하기 : Paste image as base64 설치

문서 작성 시 클립보드에 있는 이미지를 그대로 붙일 수 있는 플러그인 https://ckeditor.com/cke4/addon/pastebase64

플러그인을 다운받아 아래 경로에 넣기

cd /opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins/redmine_ckeditor/assets/ckeditor-contrib/plugins
wget https://download.ckeditor.com/pastebase64/releases/pastebase64_1.0.zip
unzip pastebase64_1.0.zip
rm pastebase64_1.0.zip

CKEditor 설정파일 수정

vi /opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins/redmine_ckeditor/assets/ckeditor/config.js

CKEDITOR.editorConfig에 “config.extraPlugins = ‘pastebase64’” 추가

CKEDITOR.editorConfig = function( config ) {
        config.extraPlugins = 'pastebase64'
};

CKEditor init.rb에 base64 allow 옵션 추가

vi /opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins/redmine_ckeditor/init.rb

하단에 아래 구문 추가

Loofah::HTML5::WhiteList::ALLOWED_PROTOCOLS.add('data')

폴더 및 파일 권한 변경

chmod 777 /opt/redmine-3.4.6-5/apps/redmine/htdocs/public/plugin_assets/redmine_ckeditor/ckeditor-contrib/plugins
chmod 777 /opt/redmine-3.4.6-5/apps/redmine/htdocs/public/plugin_assets/redmine_ckeditor/ckeditor/config.js

레드마인 재실행

/opt/redmine-3.4.6-5/ctlscript.sh restart

Plugin 삭제

/opt/redmine-3.4.6-5/use_redmine
cd /opt/redmine-3.4.6-5/apps/redmine/htdocs
rake redmine:plugins:migrate NAME=플러그인명 VERSION=0 RAILS_ENV=production
exit
rm -rf /opt/redmine-3.4.6-5/apps/redmine/htdocs/plugins/플러그인명

Redmine Log 보기

tail -1000f /opt/redmine-3.4.6-5/apache2/logs/error_log
tail -1000f /opt/redmine-3.4.6-5/apps/redmine/htdocs/log/production.log

Redmine 테마 설치

테마 다운로드 : https://www.redmine.org/projects/redmine/wiki/Theme_List

플러그인 다운받아 아래 경로에 압축 해제

/opt/redmine-3.4.6-5/public/themes/

레드마인 재실행

/opt/redmine-3.4.6-5/ctlscript.sh restart

관리 > 설정 > 표시방식에서 원하는 테마 선택

표시방식에서 원하는 테마 선택

다른 프로젝트 관리도구

레드마인 외에도 아래와 같은 관리도구들이 있다.

MyCollab

OpenProject

참고자료

Bitnami 레드마인 Installer : https://bitnami.com/stack/redmine/installer

Bitnami 커뮤니티 게시판 : https://community.bitnami.com

구글 계정 고객센터 : https://support.google.com/accounts/answer/6010255?hl=ko

레드마인 플러그인 다운로드 : https://www.redmine.org/plugins?page=1

레드마인 테마 다운로드 : https://www.redmine.org/projects/redmine/wiki/Theme_List

CKEditor 플러그인 다운로드 : https://ckeditor.com/cke4/addons/plugins/all

유용한 사이트 모음

Wed, 22 Jan 2020 00:00:00 +0000

포털 사이트
정보 사이트
도구 사이트
심심풀이 사이트
학습 사이트
취업 사이트
게임 사이트
- 싱글플레이
- 멀티플레이
자료 사이트
돈버는 사이트

포털 사이트

커뮤니티 모아보기: aagag.com; beobe.ai; issuelink.co.kr; trenday.net; jagei.co.kr; ilchu.com; hotge.co.kr; noda.me; larala.kr; jamnanda.com; communitymoa.com
할인정보 모아보기: algumon.com
웹툰 모아보기: yamae.pro
소셜 북마크 서비스: mar.gar.in
시작 페이지 서비스: trand.co.kr
뉴스 모아보기: newspaper.co.kr

정보 사이트

할인 정보: ppomppu.co.kr/zboard/zboard.php?id=ppomppu; clien.net/service/board/jirum; bbs.ruliweb.com/market/board/1020; slrclub.com/bbs/zboard.php?id=marketinfo; coolenjoy.kr/bbs/jirum; quasarzone.co.kr/bbs/board.php?bo_table=qb_saleinfo; threppa.com/bbs/board.php?bo_table=0209; city.kr/ln; dealbada.com/bbs/board.php?bo_table=deal_domestic; eomisae.co.kr/fs; fmkorea.com/hotdeal; ajpeople.com/bbs/board.php?bo_table=hotdeal
아파트 실거래 비교: hogangnono.com; dot1.kr
노하우 위키: wikihow.com
스팸 전화번호 조회: missed-call.com
사기피해사례 검색: thecheat.co.kr
짧은 주소의 원래주소 조회: wepplication.github.io/tools/longUrl
웹호스팅 가격비교: sansting.com
보험 비교: e-insmarket.or.kr
Java 커뮤니티: okky.kr
안드로이드 커뮤니티: androidpub.com
.Net 커뮤니티: devpia.com
PHP 커뮤니티: phpschool.com
불법 주차 단속 알림 시스템: parkingsms.wizshot.com
자동차 리콜 알림: car.go.kr
뭔지 모르는 알약 정보 찾기: pharm.or.kr

도구 사이트

이미지 관련

온라인 포토샵: photopea.com; pixlr.com; sumopaint.com; befunky.com
이미지용량 줄이기: jpegmini.com; compressnow.com; jpeg-optimizer.com; compresspng.com; tinypng.com
이미지 자르기: postcron.com/image-splitter/; fengyuanchen.github.io/photo-editor/
이미지 합치기: bbom.org/tools/
이미지 배경제거: burner.bonanza.com; clippingmagic.com; remove.bg
그림 자동 채색: paintschainer.preferred.tech
이미지 해상도 업스케일링: waifu2x.udp.jp
사진에서 얼굴 검출해 모자이크: facepixelizer.com
gif 생성 / gif에서 이미지 추출: wepplication.github.io/tools/aniGifGen
gif 생성, 크기조정, 자르기, 글씨넣기, 쪼개기: ezgif.com
웹페이지 이미지 한번에 저장: imagecyborg.com
흑백 이미지 칼라로 변경: colorize.dev.kaisou.misosi.ru
이미지에에서 칼라 팔레트 추출: cssdrive.com/imagepalette
이미지에서 텍스트 추출: i2ocr.com; ocr.retia.co.kr; newocr.com
로고 생성: flamingtext.com

개발 관련

아이콘 생성: convertico.com
파비콘 생성: favicon-generator.org
반응형 웹사이트 테스트: troy.labs.daum.net
HTML 문자참조표: wepplication.github.io/tools/htmlCodes
아스키코드표: wepplication.github.io/tools/asciiCodes
HTML 색상표: wepplication.github.io/tools/colorPicker
이미지 데이타 URL 생성: wepplication.github.io/tools/img2Url
문서 틀린점 비교: wepplication.github.io/tools/compareDoc
HTML/JS/CSS/SQL 코드 보기 좋게 변경: wepplication.github.io/tools/beautifyCode
HTML/JS/CSS 코드 압축: wepplication.github.io/tools/minifyCode
URL, HTML, Base32, Base64 인코더/디코더: wepplication.github.io/tools/encoder
해쉬 / 인코딩: emn178.github.io/online-tools
해쉬 / 암호화: wepplication.github.io/tools/crypt
UUID 생성: wepplication.github.io/tools/uuidGen
Javascript 키 인풋 테스트: wepplication.github.io/tools/keyCode/; unixpapa.com/js/testkey.html; javascript.info/keyboard-events
정규표현식 테스트: regexr.com
Java/APK 디컴파일러: javadecompilers.com
사이트 중국 접속 테스트: comparitech.com/privacy-security-tools
웹개발 도구 모음 (ip조회, 핑테스트, 인코딩, 해싱, 암호화 등등): tool.heyo.me
더미 이미지 생성: gifpng.com; placeholder.com
언어별 API 모음: overapi.com
언어별 코드 실행: compileonline.com
HTML5 지원현황: html5test.com
HTML 소스보기: wepplication.github.io/tools/htmlViewer/
그림 그려서 HTML 코드 만들기: sketch2code.azurewebsites.net

기타

특수문자 모음: wepplication.github.io/tools/charMap
외부/내부 IP조회: wepplication.github.io/tools/ipconfig
외부 IP 조회: ipipipip.net; findip.kr; mylocation.co.kr
인터넷 아카이브(웹 사이트 과거 모습 보기): web.archive.org; archive.is
온라인 시계 (알람, 타이머, 스톱워치, 세계시간): vclock.kr
마인드 맵: mind42.com
일회용 이메일: guerrillamail.com; expirebox.com; incognitomail.com; maildrop.cc; yopmail.com
한국어 맞춤법 검사기: speller.cs.pusan.ac.kr; alldic.daum.net/grammar_checker.do
글자수 세기 / 맞춤법 검사기: saramin.co.kr/zf_user/tools/character-counter
글자수 세기: wepplication.github.io/tools/charCounter
한영타 변환기: wepplication.github.io/tools/eng2Kor
웹 메모장: protectedtext.com; noteapp.com
웹 그림판: mrdoob.com/projects/harmony
게시판 HTML코드 생성: wepplication.github.io/tools/webEditor
랜섬웨어 무료 복구: nomoreransom.org
PDF 변환: allinpdf.com; smallpdf.com
파일 포맷 변환: convertfiles.com
EML 뷰어: wepplication.github.io/tools/emlViewer
PDF등으로 ebook 생성: toepub.com
SMI->SRT 자막 변환 / 자막 싱크 조절: wepplication.github.io/tools/smi2Srt
문자 음성으로 읽기: wepplication.github.io/tools/tts
말하는거 문자로 받아 적기: wepplication.github.io/tools/stt
파일 저장소: mediafire.com; imgbox.com; sendvid.com
일회용 파일공유: justbeamit.com; dropjiffy.com; sendtransfer.com
패스워드 만들기: passwordchart.com
온라인 문서 번역: onlinedoctranslator.com
모니터 무결점 테스트: monitor.co.kr
인터넷 속도측정: speedtest.net; fast.com
로또번호 생성기: wepplication.github.io/tools/lottoNumGen; kor.pe.kr/util/4/lotto; okojj.com/apps/lotto.php; lotto.gobest.co.kr/lott6-0.php
전광판 만들기: wigflip.com/signbot
오디오 자르기: mp3cut.net
오디오/비디오 포맷 변환기: media.io
회로 설계, 시뮬레이션: circuitlab.com
토렌트 magnet -> .torrent 변환: grep.kr/magnet; magnet2torrent.com
tv 보기: hdtv.im
중국 번체자 > 간체자 변환: ltool.net
짧은 url 주소 만들기: bitly.com
매직아이 생성: wepplication.github.io/tools/magicEyeGen
서버 시간 확인: time.navyism.com; timecker.com; poitime.com
바코드/QR코드 생성: wepplication.github.io/tools/barcodeGen; free-barcode-generator.net; terryburton.co.uk
QR코드 생성: qr.ioi.tw
웹 바코드/QR코드 스캐너: wepplication.github.io/tools/barcodeScanner
웹 손전등: wepplication.github.io/tools/flashlight
아스키아트 생성: wepplication.github.io/tools/asciiArtGen; patorjk.com/software/taag
파일 MD5 체크섬 확인: wepplication.github.io/tools/fileChecksum
자동화 서비스: ifttt.com
우편번호/주소 조회: wepplication.github.io/tools/postcode
길찾기 서비스: map.naver.com/index.nhn?menu=route; map.daum.net/?target=car; google.co.kr/maps
번역 서비스: translate.google.co.kr; papago.naver.com; translate.kakao.com; bing.com/translator; better-translator.com; acidsound.github.io/transplus
구글 캘린더 음력 등록: googlelunar.cpueblo.com
이미지 검색: google.com/imghp; tineye.com
한자 필기 검색: hanja.dict.naver.com
순서도(플로우 차트), 네트워크 구성도 다이어 그램 그리기: go.gliffy.com/go/html5/launch
주소변경 원클릭 서비스(은행, 카드, 보험): ktmoving.com

심심풀이 사이트

무료 운세: shinhan.haezone.com
온라인 낙서: drawball.com
이름 풀이: yuksul.com/saju/free_name.html
꿈 해몽: insidedream.net
스무고개: kr.akinator.com
아이큐 테스트: arealme.com/iq; memorado.org/iqtest; iqtest.kr; iqtest.so
성격 유형 검사: 16personalities.com
퍼즐 / 미로 출력: krazydad.com

학습 사이트

자격증

기출문제: gunsys.com; comcbt.com; munjebank.net

공모전/경진대회

국내 공모전: gongmo.incruit.com/; detizen.net; contest.jobkorea.co.kr; thinkuniv.com

교육

IT 교육/세미나: sharedit.co.kr
무료 교육/강연: seminarmessenger.com; edwith.org
공개SW 행사안내: oss.kr
국내 IT 컨퍼런스 일정: zetawiki.com
프로그래밍 문제풀이: codingdojang.com; acmicpc.net; programmers.co.kr; algospot.com; jungol.co.kr; judge.lavida.us
소셜 강좌 사이트: opentutorials.org
대학 공개 강의: kocw.net
C언어 강좌: modoocode.com
프로그래밍 강좌(생활코딩): opentutorials.org/course/1

취업 사이트

아르바이트: alba.co.kr; albamon.com
채용 정보: jobkorea.co.kr; saramin.co.kr; work.go.kr; incruit.com
공공기관 채용정보: job.alio.go.kr
기업 정보 (연봉, 후기 등): jobplanet.co.kr; kreditjob.com; dsum.co

게임 사이트

싱글플레이

플래피 버드: ellisonleao.github.io/clumsy-bird
2048: play2048.co
네모네모로직: nemonemologic.com
Transport Tycoon Deluxe: epicport.com/en/ttd
Caesar III: epicport.com/en/caesar3
Dune 2: epicport.com/en/dune2
X-COM: UFO Defense: epicport.com/en/xcom
DOS 게임 라이브러리: bit.ly/1yuo1Tm
웹브라우저 게임 모음: bitplay.co
HTML5 게임 모음: publishers.softgames.com
플래쉬 게임 모음: flashgames.tistory.com
1024바이트 javascript 게임 개발 대회 게임들: js13kgames.com

멀티플레이

세포 키우기: agar.io
지렁이 키우기: slither.io
탱크 키우기: diep.io
싱크홀 키우기: hole-io.com
땅따먹기: paper-io.com; splix.io
보드게임 모음: boardgamearena.com; playok.com
끝말잇기 온라인: kkutu.io
브루탈 매니아: crazygames.com/game/brutalmania-io
배틀로얄: miniroyale2.io
헬리콥터 키우기: copter.io
2D 배틀 그라운드: surviv.io

자료 사이트

무료 이미지: pexels.com; unsplash.com; pixabay.com
무료 영상: mazwai.com
유료화된 프로그램 마지막 프리웨어 찾는곳: 321download.com
무료 글꼴: 안심 글꼴파일서비스; blog.naver.com/wosr1; 리디바탕체; 배달의민족 무료글꼴; 네이버 나눔손글씨; 네이버 나눔글꼴; 빙그레 서체; 쿠키런 글꼴; GS칼텍스 독립서체; 디자인210 ON 서체; 어비폰트; 카페24 무료폰트; 여기어때 잘난체; 야놀자 야체; 중고나라 중나좋체
무료 게임 소스코드: archive.org/details/gamesourcecode

돈버는 사이트

AI 기계학습 데이터 작업: crowdworks.kr
설문조사: panel.co.kr; panelnow.co.kr; surveylink.co.kr

Jekyll을 이용한 무료 블로그 만들기

Fri, 05 Oct 2018 00:00:00 +0000

지킬(Jekyll) 이란?

Jekyll은 GitHub의 창업자이자 전 CEO인 Tom Preston-Werner이 창시한 Ruby 언어 기반의 심플한 정적 사이트(DB 통신 등을 해서 서버에서 HTML 페이지를 실시간으로 만들던 동적 사이트 방식이 아닌 완성된 HTML 파일을 바로 전달) 생성기로 Ruby 언어 기반 이지만, 루비 문법을 알지 못해도 블로그를 만들 수 있습니다.

Jekyll에서 정의해 놓은 규칙에 따라 마크업 언어(Liquid 기능이 추가된 HTML, Markdown 등)로 만든 레이아웃으로 정적 웹사이트를 만들어 줍니다.

정적 사이트 엔진은 Hugo, Hexo, Gatsby 등 수백가지가 존재 하지만 Jekyll 은 GitHub Pages 의 내부 엔진으로 있기 때문에, Jekyll 페이지/블로그/웹사이트를 GitHub 서버에 무료로 호스팅 할 수 있습니다.

Ruby 설치

지킬은 루비 기반으로 만들어졌기 때문에 루비 설치가 필요합니다.

운영체제별(맥OS, 우분투 리눅스, 윈도우즈) 루비 설치법은 아래 링크에서 확인 가능합니다.
OS별 루비 설치하기 : https://jekyllrb-ko.github.io/docs/installation/

Jekyll 설치

루비 설치 되어 있으면 루비젬을 통해 Jekyll과 Bundler를 설치합니다.

# RubyGems 를 통해 Jekyll 과 Bundler 를 설치한다
$ gem install bundler jekyll

Jekyll 기본 사용법

Jekyll 프로젝트 만들기

# ./myblog 에 새 Jekyll 사이트를 생성한다
$ jekyll new myblog

Jekyll은 프로젝트 폴더 내의 파일들을 Jekyll의 규칙에 따라 해석하여 최종적으로 정적인 웹사이트를 _site 디렉터리에 생성합니다.

$ bundle exec jekyll build --watch
# => ./_site 에 정적 파일들을 생성합니다.
#    --watch를 입력하면 변경사항이 감지되면, 자동으로 다시 생성합니다.

Jekyll 은 개발 서버도 내장하고 있어서, 로컬상에서 브라우저로 접속하여 사이트가 어떻게 생성될지 미리 살펴볼 수 있습니다.

$ bundle exec jekyll serve
# => 개발서버가 실행됩니다. http://localhost:4000/

Jekyll 폴더 구조

_config.yml // 환경설정 정보 파일
_data // 사이트에 사용할 데이터 파일을 넣는 폴더
_drafts // 아직 게시하지 않은 포스트를 넣는 폴더 (jekyll serve 명령에 --drafts 명령을 추가해서 미리 볼 수 있다.)
_includes // 레이아웃에 삽입할 코드를 넣는 폴더
_layouts // 페이지 레이아웃 템플릿을 넣는 폴더
_posts // 포스팅할 문서를 넣는 폴더
_sass // 사이트에 사용되는 스타일들을 정의하는 Sass파일을 넣는 폴더
_site // Jekyll 이 변환 작업을 마친 뒤 파일들이 생성되는 폴더

깃허브(Github) 가입

(“GitHub Pages로 사이트 만들기” 참고).

Jekyll 테마를 이용해 깃허브 페이지에 지킬 블로그 만들기

깃허브 사이트에서 블로그에 사용할 저장소를 생성합니다.

우측 상단의 “+” 아이콘을 누른 후 “New repository”를 누릅니다.

Repository name에 “사용자이름.github.io” 을 입력하고 Create repository 버튼을 눌러줍니다.

인터넷에 깃허브 테마를 찾으면 포트폴리오, 블로그 등 수많은 유료/무료 테마들을 찾을 수 있습니다.
저장소 모음 : http://jekyllthemes.org/

마음에 드는 테마의 Github 페이지를 찾아 깃허브 주소를 복사합니다.

지킬 테마 깃허브 페이지에서 “Clone or download” 버튼을 누르면 주소를 볼 수 있습니다.

# 마음에 드는 테마를 로컬 저장소로 clone
$ git clone 깃허브주소 프로젝트폴더명
# ex) git clone https://github.com/Phlow/feeling-responsive.git username.github.io

$ cd 프로젝트폴더명  

# gem 라이브러리 설치
$ bundle install

# clone한 프로젝트의 git 삭제
$ rm -rf .git

Ruby는 필요한 라이브러리들을 Gemfile 안에 작성하고 bundle install 명령어로 Gemfile에 작성된 라이브러리들을 한번에 설치할 수 있다.

clone한 프로젝트에 _config.yml 등의 파일들을 나에게 맞게 수정을 한 후 내 저장소에 PUSH 하기

$ git init
$ git add .
$ git commit -m "Initial commit"
# 깃 원격저장소를 위에서 만든 저장소로 설정
$ git remote add origin [email protected]:username/username.github.io.git

# 원격 저장소에 PUSH
$ git push -u origin master

일정 시간이 지난 후
브라우저로 “https://사용자이름.github.io/” 에 접속하면 지킬 테마가 적용된 블로그가 생긴것을 볼 수 있습니다.

포스트 작성

_posts 폴더에 포스팅 파일을 마크다운으로 작성합니다.

이때 파일명은 YEAR-MONTH-DAY-title.MARKUP 형태로 작성을 해야 합니다.

ex) 2018-10-05-hello.md

파일을 작성 후 git을 이용해 PUSH하면 포스트가 작성된 것을 확인할 수 있습니다.

git add .
git commit -m "hello posting"
git push

머릿말(Front Matter) 작성법

Jekyll에서 Front Matter는 MARKUP 해석할 때 사용하는 메타정보를 쓰는 것으로 파일의 첫 시작 부분에 ---으로 시작해서 ---를 끝으로 이 사이에 정보를 YAML 포멧으로 작성합니다.

---
layout: default
title: Welcome to Jekyll
categories : 
    - web  
tags : [ruby, jekyll, git]
date : 2018-10-05 12:34
permalink: /:categories/:title/
---

layout : 사용할 레이아웃 파일(_layouts 폴더에 존재하는 파일)을 지정
category, categories : 포스트에 하나 또는 여러 개의 카테고리를 지정할 수도 있다.
tags : 포스트에 여러 개의 태그를 지정할 수도 있다.
date : 파일명이 아닌 다른 날짜로 지정하여 사용할 수 있다.
permalink : 페이지의 url 경로를 나타낸다.(기본설정: /year/month/day/title.html)

마크다운(Markdown) 작성법

Markdown은 2004년 존그루버에 의해 만들어진 텍스트기반 마크업언어로 웹 작성자를 위한 텍스트 - HTML 변환 도구입니다.
Markdown을 사용하면 웹 페이지를 작성하는 HTML 코드를 알지 못해도 읽고 쓰기 쉬운 일반 텍스트 형식으로 작성한 다음 XHTML (또는 HTML)로 변환 할 수 있습니다.
github의 저장소 README.md 파일 이나 위키 사이트 등에서 마크다운 문서를 사용합니다.

헤더 쓰기

1~6 까지 지원(h1 ~ h6)

# 이건 `<h1>` 태그와 같습니다.
## 이건 `<h2>` 태그와 같습니다.
### 이건 `<h3>` 태그와 같습니다.

결과 :

이건 <h1> 태그와 같습니다.

이건 <h2> 태그와 같습니다.

이건 <h3> 태그와 같습니다.

개행

마크다운에서는 단순히 엔터를 하면 줄바꿈이 되지 않습니다.
공백(스페이스바)이나 개행(엔터)을 두번이상 하여 줄바꿈을 합니다.

문장 뒤에 스페이스바 2번 이상 띄운 후 엔터를 하면 한줄 내려간다.  
문장 쓴 후 엔터 2번 이상 하면 문단이 나눠진다.

문장 뒤에 그냥 엔터를 하면 개행이 안된다.
이 문장은 위 문장에 붙어서 나온다.

결과 :

문장 뒤에 스페이스바 2번 이상 띄운 후 엔터를 하면 한줄 내려간다.
문장 쓴 후 엔터를 2번 이상 하면 문단이 나눠진다.

문장 뒤에 그냥 엔터를 하면 개행이 안된다. 이 문장은 위 문장에 붙어서 나온다.

문자 강조하기

글자 기울여쓰기(italic)는 ‘*‘이나 ‘_‘을 문장 앞뒤에 넣어 사용합니다.
굵은글씨(bold)는 ‘**‘이나 ‘__‘을 문장 앞뒤에 넣어 사용합니다.

*기울여진 글씨*  
_이것도 기울여진다_  

**굵은 글씨**  
__이것도 굵게쓰기__  

***굵고 기울여진 글씨***  
___이것도 굵고 기울여진 글씨___

결과 :

기울여진 글씨
이것도 기울여진다

굵은 글씨
이것도 굵게쓰기

굵고 기울여진 글씨
이것도 굵고 기울여진 글씨

인용구(BlockQuote) 쓰기

이메일에서 사용하는 > 블럭인용문자를 이용한다.

> 첫번째 인용구
>> 두번째 인용구

결과 :

첫번째 인용구

두번째 인용구

리스트 쓰기

1. 하나
2. 둘
    1. 둘에 하나

* 1단계
    - 2단계
        + 3단계
- 1단계
+ 1단계

결과 :

하나

둘

둘에 하나

1단계

2단계

3단계

1단계

1단계

구분선 만들기

구분선을 그리고 싶으면 -, *, _ 를 3개 이상 입력을 합니다. 이 때 “- - -“와 같이 중간에 공백을 넣어도 상관없습니다.

- - -
_______
*****

결과 :

링크

링크: [Google](https://google.com "마우스 올리면 나오는 글자")  
새창 링크: [Google](https://google.com "alt text"){:target="_blank"}

결과 :

링크: Google
새창 링크: Google

이미지 넣기

- ![마우스 올리면 나오는 글자](https://wepplication.github.io/assets/img/image.png )
- ![alt text](http://username.github.io/assets/img/image.png)
- ![Image Alt 텍스트](/assets/img/image.png)
- ![Image Alt 텍스트](/assets/img/image.png)

표 삽입하기

|(vertical bar) 와 -(hyphen/dash)을 이용해서 테이블을 생성할 수 있습니다.
:(Colons)기호를 이용하여 테이블 내용을 정렬할 수 있습니다.

| Header One | Header Two | Header Three | Header Four |
| ---------- | :--------- | :----------: | ----------: |
| Default    | Left       | Center       | Right       |

결과 :

Header One Header Two Header Three Header Four

Default Left Center Right

Header One	Header Two	Header Three	Header Four
Default	Left	Center	Right

markdown table generator 이 사이트를 통해 테이블 마크다운을 생성할 수 도 있습니다.

특수기호 쓰기

마크다운에서 사용하는 예약어 같은 특수문자를 사용하려면 HTML코드를 이용하여 사용 할 수 있습니다.

"(&quot;)
#(&#35;)
%(&#37;)
&(&amp;)
'(&#39;)
*(&#42;)
<(&lt;)
>(&gt;)
`(&#96;)
" "(공백)(&nbsp;)

HTML 코드로 입력하시면 마크다운 문법을 무시하고 특수문자로 입력됩니다.
http://www.umsiko.co.za/links/specchar.html 에서 HTML 코드를 찾아볼 수 있습니다.

인라인 코드(inline code) 쓰기

코드의 앞뒤에 ‘(키보드 물결 표시 자판)을 사용하며 짧은 코드를 쓸 때 유용합니다.

태그가 표현된다 : `<span>hello</span>`  
태그가 사라진다 : <span>hello</span>

결과 :

태그가 표현된다 : <span>hello</span>
태그가 사라진다 : hello

여러줄 코드(code block) 쓰기

특정 언어를 지정하여 코드를 하이라이팅 할 경우는 코드 앞 뒤에 ```나 ~~~ 를 사용합니다.

```python
x = 1
if x == 1:
    # indented four spaces
    print("x is 1.")
```

결과 :

x = 1
if x == 1:
    # indented four spaces
    print("x is 1.")

Jekyll 에는 Rouge 를 활용한 코드 구문 강조가 기본적으로 포함되어 있으며, 포스트에 코드 내용을 삽입하는 것 또한 간단합니다. 다음과 같이 전용 Liquid 태그를 사용하기만 하면 됩니다.

Rouge를 이용하면 블로그에 코드를 붙여넣을 때 간단하게 syntax highlighting 기능을 이용할 수 있습니다. Jekyll은 syntax highlighting기능으로 Pygments도 지원했었는데 Jekyll 3(2016년 02월)부터 Pygments를 더이상 지원하지 않습니다.

highlight 시작 태그 뒷부분에 c, java, javascript, python, ruby, go, html, css, shell 등의 언어 코드를 넣어 해당 언어에 맞게 하이라이팅합니다.
지원 리스트 보기 : Rouge 지원 언어 리스트

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}

결과 :

def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end

highlight 시작 태그 뒷부분에 linenos 를 추가하여 코드 앞에 줄 번호를 표시할 수도 있습니다.

다른 정적 사이트 생성기

많은 정적 사이트 생성기 들 중 대표적인 생성기는 아래와 같다.

Next.js

Gatsby

Hugo

Hexo

요약

[루비 설치]

# Jekyll과 Bundler 설치
$ gem install bundler jekyll

깃허브에 “사용자이름.github.io”로 GitHub 저장소 생성

# 마음에 드는 테마를 로컬 저장소로 clone
$ git clone 깃허브주소 프로젝트폴더명
# ex) git clone https://github.com/Phlow/feeling-responsive.git 사용자이름.github.io

$ cd 사용자이름.github.io  

# clone한 프로젝트의 git 삭제
$ rm -rf .git

# gem 라이브러리 설치
$ bundle install

# jekyll 서버 실행
$ bundle exec jekyll serve

clone한 테마 프로젝트에 _config.yml 등의 파일들을 나에게 맞게 수정을 한 후 내 저장소에 PUSH 하기

$ git init
$ git add .
$ git commit -m "Initial commit"

# 깃 원격저장소를 위에서 만든 저장소로 설정
$ git remote add origin [email protected]:사용자이름/사용자이름.github.io.git

# 원격 저장소에 PUSH
$ git push -u origin master

일정 시간이 지난 후
“https://사용자이름.github.io/” 으로 사이트 접속

참고자료

Ruby : https://www.ruby-lang.org/en/downloads/

RubyInstaller : https://rubyinstaller.org/downloads/

Jekyll : https://jekyllrb.com/

Jekyll Documentation : https://jekyllrb.com/docs/

Jekyll Documentation 한글 번역 : https://jekyllrb-ko.github.io/

Jekyll Theme : http://jekyllthemes.org/

Markdown : https://daringfireball.net/projects/markdown/

Liquid : https://shopify.github.io/liquid/

정적 사이트 생성기 리스트 : https://staticsitegenerators.net/

Rouge Wiki : https://github.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers

GitHub Pages를 이용한 무료 홈페이지 만들기

Tue, 02 Oct 2018 00:00:00 +0000

Github Pages란?

깃허브(Git Hub)는 깃(소프트웨어 개발에서 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템)을 좀 더 편하게 이용하도록 만든 깃 서버 웹 호스팅 서비스이고 오픈소스 소프트웨어의 중심지(hub) 역할을 하면서 오픈소스 프로젝트가 널리 퍼지는 데 크게 기여하고 있는 서비스입니다.
깃허브 페이지(GitHub Pages)는 이러한 깃허브에서 제공하는 정적 사이트 호스팅 서비스로 일반적인 HTML 콘텐츠를 지원하는 것 외에도 인기있는 정적 사이트 생성기인 Jekyll을 지원합니다.

Github 가입하기

http://github.com 으로 접속하여 Username, Email, Password를 입력 후 Sign up for GitHub를 눌러 가입 한 후 이메일 인증을 거치면 가입이 끝이납니다.

여기서 사용자이름(Username)은 이후 생성되는 깃허브 페이지 사이트의 도메인이 됩니다. (사용자이름.github.io)

GitHub 저장소 생성하기

우측 상단의 “+” 아이콘을 누른 후 “New repository”를 누릅니다.

Repository name에 원하는 저장소 이름을 누르고 Create repository 버튼을 눌러줍니다.

특정 몇 명만 코드에 접근할 수 있는 프라이빗 저장소는 유료이며 무료로 만들경우 소스 코드가 모두 공개되니 개인정보가 보이지 않도록 주의 해야합니다.

로컬 저장소에 깃허브 저장소 복제하기

프로젝트를 저장할 폴더로 이동하여 새 저장소를 복제하기

git clone [email protected]:사용자이름/저장소이름.git

이제 해당 프로젝트 폴더에 index.html 파일을 추가하여 별도의 서버 없이 포트폴리오 사이트 같은 간단한 사이트를 만들 수 있다.

로컬 저장소를 Cloud9, 구름IDE 같은 클라우드 개발툴을 이용하면 특정 컴퓨터가 아닌 어디서든 사용할 수 있다.

깃허브 저장소 PUSH

변경사항 깃허브 저장소에 push하기

$ git add .
$ git commit -m "first commit"
$ git push

브라우저로 “https://github.com/사용자이름/저장소이름” 에 접속을 해보면 깃허브 저장소를 볼 수 있다.

Github Pages 사용하기

브라우저로 “https://github.com/사용자이름/저장소이름/settings” 에 접속을 하면 저장소 설정을 하실 수 있습니다.

하단에 있는 GitHub Pages > Source에 None으로 된 선택창을 master branch로 변경 후 Save

깃 페이지 소스 설정을 하면 저장소에 올린 파일들로 정적 사이트를 생성합니다.
https://사용자이름.github.io/저장소이름/ 으로 접속하면 사이트를 볼 수 있습니다.

※ 파일 위치에 따른 URL

/index.html 파일은 https://사용자이름.github.io/저장소이름/
/aaa/index.html 파일은 https://사용자이름.github.io/저장소이름/aaa
/bbb.html 파일은 https://사용자이름.github.io/저장소이름/bbb

git push 후 바로 반영이 되지 않고 어느정도 시간이 지나야 반영된다.

GitHub Pages URL 뒤에 저장소 이름없이 생성하기

repository생성후 page를 활성화하면
“https://사용자이름.github.io/저장소이름/” 으로 사이트가 생성된다.
“https://사용자이름.github.io/” 주소로 바로 연결되게 하고 싶으면 깃허브 저장소 생성 시 Repository name에 “사용자이름.github.io”로 생성을 하면 된다.

“사용자이름.github.io”로 저장소를 생성할 경우 별도로 깃허브 페이지 활성 설정을 하지 않아도 사이트가 생성된다.

GitHub Pages 의 제한 사항

GitHub Pages source repositories have a recommended limit of 1GB .
Published GitHub Pages sites may be no larger than 1 GB.
GitHub Pages sites have a soft bandwidth limit of 100GB per month.
GitHub Pages sites have a soft limit of 10 builds per hour.

GitHub Pages 소스 저장소의 권장 제한은 1GB입니다.
게시 된 GitHub 페이지 사이트는 1GB를 초과 할 수 없습니다.
GitHub 페이지 사이트의 대역폭 제한은 한 달에 100GB입니다.
GitHub 페이지 사이트의 builds 제한은 시간당 10회 입니다.

기본적인 Git 명령어

# git 사용자 정보 설정
git config user.name "사용자 이름"
git config user.email 이메일주소

# 현재 디렉토리에 git 저장소를 생성
git init

# 수정한 파일들을 스테이징 영역에 올리기
git add .

# 스테이징 영역에 올라가 있는 파일들을 커밋
git commit -m "변경된 메시지 내용을 입력"

# 원격저장소에 푸시 (-u는 원격저장소로부터 업데이트를 받은 후 push를 한다는 의미, origin과 master는 각각 리모트 저장소와 브랜치를 의미합니다.)
git push -u origin master

# 강제 push(덮어쓰기)
git push -f

# 원격저장소를 복제하여 저장소를 생성
git clone 저장소주소

# 새로운 원격 저장소를 추가
git remote add 이름 저장소주소

# 원격 저장소를 제거
git remote rm 이름

# 무시할 파일을 .gitignore 에 추가하기 전에 git push 했을 경우
# 원격 저장소에 있는 .gitignore 파일들 제거하기
$ git rm -r --cached .
$ git add .
$ git commit -m "Apply .gitignore"
$ git push

GitHub 저장소 삭제하기

브라우저로 “https://github.com/사용자이름/저장소이름/settings” 에 접속을 해서
하단에 있는 Danger Zone > Delete this repository > “Delete this repository” 버튼을 누른 후
팝업창에 저장소이름을 입력 후 “I understand the consequences, delete this repository” 버튼을 누른다.

TIP : git 설치 없이 사용하기

깃허브 저장소를 생성하면 깃허브 주소와 함께
“We recommend every repository include a README, LICENSE, and .gitignore.” 라는 메세지를 볼 수 있다.
여기서 README 버튼을 클릭하면 텍스트 입력창이 나오는데

임의로 내용을 입력 후 하단에 “Commit new file”을 누른다.

여기에 입력을 하여 저장소에 README 파일을 추가 할 수 있다.

이 후 “Create new file” 버튼으로 직접 파일 내용을 입력해 생성하거나 “Upload files” 버튼으로 파일을 업로드 할 수도 있다.

파일 내용 입력 화면의 상단 파일명 입력칸에 “폴더명/파일명.확장자”를 입력하여 폴더를 생성할 수도 있다.

파일을 수정할 때는 깃허브 페이지에서 파일 내용을 조회 한 뒤 우측 상단 연필 모양의 아이콘을 눌러 수정할 수 있다.

유사 서비스

깃허브 페이지와 같이 무료로 정적 웹 사이트 호스팅을 제공하는 서비스들이 많이 있다.

Gitlab Pages

Netlify

Neocities

요약

GitHub 저장소 생성

# 로컬 저장소로 클론
git clone [email protected]:사용자이름/저장소이름.git

로컬 저장소에 index.html 등(HTML, CSS, JS) 파일추가

# 원격 저장소에 PUSH
git add .
git commit -m "commit comment"
git push

“https://github.com/사용자이름/저장소이름/settings” 에 접속
GitHub Pages > Source 항목에서 master branch로 선택 후 Save

일정 시간이 지난 후
“https://사용자이름.github.io/저장소이름/” 으로 사이트 접속

※ 저장소 이름을 “사용자이름.github.io” 으로 생성했을 경우 “https://사용자이름.github.io/” 으로 사이트 접속

참고 자료

Git : https://git-scm.com/

GitHub : https://github.com/

GitHub Help : https://help.github.com/

GitHub Pages : https://pages.github.com/

IT,프로그래밍 블로그

애널리틱스를 이용해서 웹사이트 분석하기

analytics란?

구글 애널리틱스 가입하기

애널리틱스 코드 삽입하기

TIP: 구글 애널리틱스 상세 유입 경로 보기

관련글

검색엔진최적화(Search Engine Optimization, SEO)

SEO란?

sitemap.xml

robot.txt

타이틀 & 메타디스크립션 태그

오픈그래프 태그

대표 주소 설정

이미지 태그 최적화

모바일 최적화

HTTPS 보안 프로토콜 사용하기

웹페이지 로딩 속도 개선

동적 페이지 피하기

다국어 페이지 최적화

검색엔진 순위 (2020년 2월)

요약

참고자료

관련글

구름 IDE로 Jekyll 클라우드 개발환경 세팅하기

Cloud IDE 란?

구름 IDE 가입

구름 IDE 가격정책

컨테이너 생성

Jekyll 설치

내 깃허브 Jekyll 저장소 가져오기

지킬 서버 실행

깃 사용자 정보 설정

깃허브 배포

유사 서비스

참고자료

관련글

Redmine 설치 및 플러그인 적용

Redmine

Bitnami

Bitnami Redmine 다운로드

CentOS Linux 7에 Bitnami Redmine 설치

Redmine 실행/중지

SMTP 설정

Plugin 설치

레드마인 플러그인 : Progressive Projects List 설치

레드마인 플러그인 : CKEditor 설치

CKEditor 플러그인 설치하기 : Paste image as base64 설치

Plugin 삭제

Redmine Log 보기

Redmine 테마 설치

다른 프로젝트 관리도구

참고자료

관련글

유용한 사이트 모음

포털 사이트

정보 사이트

도구 사이트

이미지 관련

개발 관련

기타

심심풀이 사이트

학습 사이트

자격증

공모전/경진대회

교육

취업 사이트

게임 사이트

싱글플레이

멀티플레이

자료 사이트

돈버는 사이트

Jekyll을 이용한 무료 블로그 만들기

지킬(Jekyll) 이란?

Ruby 설치

Jekyll 설치

Jekyll 기본 사용법

Jekyll 폴더 구조

깃허브(Github) 가입

Jekyll 테마를 이용해 깃허브 페이지에 지킬 블로그 만들기

이건 `<h1>` 태그와 같습니다.

이건 `<h2>` 태그와 같습니다.

이건 `<h3>` 태그와 같습니다.