깃허브 페이지 css 적용 안됨 - gisheobeu peiji css jeog-yong andoem

버그&에러/Java

CSS파일 적용불가 에러 현상 해결방법

2019. 3. 30. 16:05

css파일이 적용이 되지않길래 약 30분~1시간 가량을 문법적 오류만 찾고있었다...

 

css파일은 민감하기때문에 하나의 오류라도 있을시 제대로 적용이 안될때가 종종 있긴하다.

그러나, 분명히 css파일에 문법적 오류도없고 제대로 link를 이용해 가져왔는데도 불구하고 적용이 되지않을 때가 있다.

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/custom.css">          ← 바로 이부분

<title></title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="js/bootstrap.js"></script>

</head>

 

 

 

해결방법

 

<방법 1>

HTML 문서에서는 

<link rel="stylesheet" type="text/css" href="css/custom.css"> 

바로 이 부분을 웹서버에서 캐시에 올려놓고 이전버전을 계속 사용하기 때문에 에러가 발생하는것이다.

 

 

 

<link rel="stylesheet" type="text/css" href="css/custom.css?ver=1"> 와 같이 버전 정보를 같이 보내서,

 웹서버에서 새로운 css파일을 캐시에 로드하여 css파일의 수정된내용이 반영될 수 있도록 하면된다. 

 

 

<방법 2>

(크롬) 방문기록 - 인터넷 사용 기록 삭제

깃허브 페이지 css 적용 안됨 - gisheobeu peiji css jeog-yong andoem

 

공유하기

게시글 관리

구독하기okky

저작자표시 비영리 변경금지

'버그&에러 > Java' 카테고리의 다른 글

[JAVA 오류] the method split(string) in the type string is not applicable for the arguments (char)  (0)2020.02.05The Project: OOO which is referenced by the classpath, dose not exist 문제 해결  (0)2019.09.10JSP 실행중 흰화면 발생에러 & The value for the useBean class attribute ... is invalid 에러  (1)2019.03.10에러 : starting tomcat v8.5 server at localhost has encountered a problem 문제해결  (3)2019.03.10java was started but returned exit code=13 문제 해결방법 & eclipse.exe 파일 실행오류  (0)2019.03.10

tag : css, css 적용안될때, css미적용, css에러, css적용불가, link rel stylesheet

댓글 6

    비밀글

    name

    password

    homepage

    submit

    원인: 구글링을 하던 중 디자인이 유니크하고 심플한 블로그 디자인을 찾게 되어 해당 디자인으로 나만의 블로그를 만들어 보고 싶었다. 해당 블로그를 만들기 위해선 GitHub.io + jeklly theme을 활용한다는 것을 알게 되었다.

    https://dev-wd.github.io/(감명깊게 본 블로그 디자인)

    GitHub에서 Repository 생성

    New Repository 버튼을 통해 Repository를 생성하여 이름을 설정한다.

    주의) Repository명은 [본인아이디].github.io로 설정한다.

    이제 나의 Mac으로 가져와서 작업하도록 설정한다. 내 Repository의 주소를 Clone 해온다.

    복사 후 Terminal에서 Repository를 저장한 폴더로 이동 후 clone 명령어를 통해 가져온다. 성공했다면 해당 폴더에 Repository가 생성되어있을 것이다.

    cd [your repository folder]git clone [clone url]

    Jeklly Theme 설정

    자신에게 맞는 테마를 찾은 뒤 해당 테마를 위와 같이 clone 혹은 파일을 다운 받아서 내 PC의 Repository 폴더에 내용물을 복사한다.

    터미널에서 Repository로 이동한 후 해당 명령어를 통해 jeklly bundle을 설치한다.

    cd ./(your repository.gitgub.io)
    gem install bundler
    bundle install

    Bundle 오류 발생

    bundle을 설치하려고 진행 하니 다음과 같은 오류가 발생했다.

    Gem::Ext::BuildError: ERROR: Failed to build gem native extension.An error occurred while installing eventmachine (1.2.7), and Bundler
    cannot continue.
    Make sure that `gem install eventmachine -v '1.2.7' --source
    'https://rubygems.org/'` succeeds before bundling.

    원인을 구글링한 결과 Ruby가 제대로 설치되지 않은 상태여서 생기는 오류였다. ( jekyll theme는 Ruby 기반의 bundle이다. 그렇기 때문에 Ruby 설치를 먼저 진행 했어야 한다.)

    brew를 통해 ruby 설치를 진행했다.

    brew install rubybrew link --overwrite ruby

    설치 진행 후 ~/.zshrc에 환경변수도 설정한다.

    vi ~/.zshrc  echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc
    export LDFLAGS="-L/usr/local/opt/ruby/lib"
    export CPPFLAGS="-I/usr/local/opt/ruby/include"
    :wqsource ~/.zshrc

    Jeklly bundle 설치 후 로컬 샘플 블로그 확인하기

    bundle이 정상적으로 설치가 완료되면 아래 명령어를 실행하고 127.0.0.1:4000 주소를 확인한다.

     bundle exec jekyll serve

    serve 실패 오류 발생

    위의 명령어를 실행하니 다음과 같은 오류가 발생했다.

    Generating...
    Jekyll Feed: Generating feed for posts
    done in 0.27 seconds.
    Auto-regeneration: enabled for '/Users/dhoyle/myblog'
    ------------------------------------------------
    Jekyll 4.2.0 Please append --trace to the serve command
    for any additional information or backtrace.
    ------------------------------------------------
    /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/servlet.rb:3:in require': cannot load such file -- webrick (LoadError) from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/serve/servlet.rb:3:in <top (required)>'

    구글링을 한 결과 해당 github 페이지에서 해결 방법을 찾을 수 있었다.

    아래의 명령어와 같이 webrick를 추가해주니 오류가 발생하지 않았다.

    bundle add webrick

    127.0.0.1:4000 접속

    해당 url에 접속하여 로컬에서 내가 원하던 디자인의 샘플 블로그를 확인할 수 있었다.

    로컬 까지는 수월했지만…

    username.github.io로 웹 호스팅 하기

    지금까지 로컬 컴퓨터에서 블로그를 확인 했다면, 이제는 GitHub Pages에 올려볼 차례이다.

    위에서 새로 생성한 username.github.io에 remote repository를 등록한다.

    (git push -u origin master 명령어 실행 시 오류가 난다면 git pull를 사용한다.)

    cd username.github.io/
    git remote add origin {clone url}
    git push -u origin master

    git push까지 완료했으면 jeklly theme가 본인의 username.github.io repo에 업로드 된 것을 확인 할 수 있다. https://username.github.io 주소로 접속하여 블로그가 정상적으로 나오는 지 확인한다.

    해결하지 못한 문제 발생😭

    나의 https://username.github.io 주소로 접속한 결과 CSS가 적용되지 않는 문제가 있었다.

    해결방법 1) _Config.yml 파일 baseurl, url 수정

    구글링한 결과 가장 많이 나온 방법이다. github 블로그를 clone 하는 과정에서 기존의 작성된 경로와 나의 경로가 다른 경우 발생할 수 있다고 한다.

    _config.yml 파일 안에 baseurl은 공백으로, url를 본인의 블로그로 변경해준다. (출처: https://github.com/mpa139/allanlab/issues/6)

    url: "https://username.github.io"baseurl: "" 

    해결방법 2) _Config.yml 파일 remote_theme 부분 주석 해제

    _Config.yml 파일의 remote_theme 부분이 주석이 처리 되어 있다면 github server에 제대로 호스팅이 되지 않을 수 도 있다.

    cd ./(your repository.gitgub.io)
    gem install bundler
    bundle install
    0

    해결방법 3) 처음부터 다시 다른 순서로 진행해보기

    지금까지의 순서가 아닌 다른 방식으로 진행을 해보면 어떨가 해서 처음부터 다시 해보았다. jeklly theme를 fork하여 내 repository로 만든 후 위의 해결방법처럼 Config.yml 파일을 수정하였지만 CSS 파일이 이상하게 불러와지지 않았다..😞