Skip to content

Instantly share code, notes, and snippets.

@marocchino
Last active December 8, 2015 02:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marocchino/8a38313e055c0feec81f to your computer and use it in GitHub Desktop.
Save marocchino/8a38313e055c0feec81f to your computer and use it in GitHub Desktop.

웹 디자이너에게 유용할 만한 것들

이 글은 2015년의 루비 코리아 대림달력을 위해 작성되었습니다.

1. 현재 디렉토리를 서버로 띄우기

html 파일을 열때 절대 경로를 사용한다던가등의 이유로 재대로 안보일 때 유용합니다.

ruby -run -e httpd . -p 3000

웹페이지는 "http://localhost:3000/파일명" 에서 볼 수 있습니다.

2. 정적 파일로 작업하지만 파셜은 사용하고 싶을 때

정적 페이지지만 레이아웃을 공유하고 싶다던가 할때 레일즈를 사용하기엔 배보다 배꼽이 커지는 것 같으니 부담 스러울 때는 미들맨이나 지킬이 유용합니다.

오늘은 설정이 좀 더 단순한 미들맨을 살펴보겠습니다.

먼저 설치가 필요합니다.

$ gem install middleman
$ rbenv rehash # rbenv를 사용하시는 분만 실행하세요.
$ brew update
$ brew install openssl
$ brew link openssl --force

설치가 끝났으면 폴더를 만들고 초기화를 해줍니다.

$ mkdir my-static-app
$ cd my-static-app/
$ middleman init

이 명령을 실행하면 다음과 같은 구조로 디렉토리가 만들어 집니다.

source
ㄴlayouts
ㄴstylesheets
ㄴjavascripts
ㄴimages

서버를 시작하기전에 설정파일을 열어 라이브 리로드를 활성화시키겠습니다.

...

###
# Helpers
###

# Automatic image dimensions on image_tag helper
# activate :automatic_image_sizes

# Reload the browser automatically whenever files change
configure :development do  #
  activate :livereload     # 이부분의 주석을 해제
end                        #

# Methods defined in the helpers block are available in templates
# helpers do
#   def some_helper
#     "Helping"
#   end
# end
...

이제 서버를 실행해 봅시다.

$ bundle exec middleman server

source/index.html 를 열어 수정해 보세요!

아까 라이브 리로드를 활성화 해두었기 때문에 자동으로 브라우저가 갱신되는 것을 보실 수 있습니다.

만들어진 파일을 서버에 올리실 때는 다음 명령으로 빌드할 수 있습니다.

$ middleman build

build 폴더를 보세요!

3. hexcode로 컬러 보기

먼저 color라는 이름의 간단한 루비 스크립트를 만듭니다.

#!/usr/bin/env ruby
system "open http://www.color-hex.com/color/#{ARGV[0]}"

실행권한을 주고 실행 시켜보세요.

chmod +x color
./color 4d99d2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment