GitHubページ - CSSの相対URLの問題

Question

ジキルを使用してgithubページのサイトを設定しようとしています。私のアプローチは、_siteの内容をリポジトリのルートにアップロードし、相対URLを介して資産を参照することです。

は、以下のフォルダを呼び出している、関連するコードの一部抜粋です：

CSS：

@font-face { 
    font-family: supermario; 
    src: url('/dpd/font/fontfamily.ttf'); 
} 

.scenery { 
    position: absolute; 
    background:url('/img/image1.gif'); 
} 

.image2 { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 40px; 
    background-image:url('/img/image2.png'); 
} 

.icon2 { 
    background-image:url('/img/icon2.png'); 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    bottom: $floorheight; 
    background-position-x: 350px; 
    z-index: 5; 
    transform: scaleX(-1); 
} 

HTML：

<link rel="stylesheet" href="build/css/styles.css"> 
<script src="dpd/jquery-3.2.1.min.js"></script> 

<script src="build/js/app.js"></script> 

私のHTML要素が正しいURL構造をロードしています。 404エラーを生成しているように

myusername.github.io/img/icon1.png 
myusername.github.io/img/icon2.png 

そして、：私のCSSのURLが正しくロードされていない

myusername.github.io/repository-name/build/js/app.js 
myusername.github.io/repository-name/build/css/styles.css 

...彼らは次のようになります。以下のようになります。

編集：私はジキルの実行に役立ちますgulptaskを持っている - それはそうのようになります。

//server + file watching 
gulp.task('serve', function() { 

    browserSync.init({ 
     server: "_site" 
    }); 

    gulp.watch("dev/scss/*.scss", ['styles', 'jekyll']); 
    gulp.watch('dev/js/*.js', ['scripts', 'jekyll']); 
    gulp.watch('_includes/*.html', ['jekyll']).on('change', browserSync.reload); 
    gulp.watch('_site').on('change', browserSync.reload); 

}); 


gulp.task('jekyll', function(gulpCallBack){ 
    var spawn = require('child_process').spawn; 
    // After build: cleanup HTML 
    var jekyll = spawn('jekyll', ['build'], {stdio: 'inherit'}); 

    jekyll.on('exit', function(code) { 
     gulpCallBack(code === 0 ? null : 'ERROR: Jekyll process exited with code: '+code); 
    }); 
}); 

私は解決策を改善しませんでしたいくつか試してみました：

1. 相対パスに変更を../
2. 、それがどのように見えるので、スラッシュを削除：ルートディレクトリにimgフォルダを移動background-image:url('/img/icon.png');
3. プロジェクトの内容

私には余計な手順がありますか？誰にもこれをより良くするための提案はありますか？ _config.ymlで

<link rel="stylesheet" href="{{'/build/css/styles.css'|absolute_url}}"> 
<script src="{{'/dpd/jquery-3.2.1.min.js'|absolute_url}}"></script> 

<script src="{{ '/build/js/app.js'|absolute_url}}"></script> 

その後：あなたはmyusername.github.io/repository-name/..のようなURLを持って考えると

Answer 1

、あなたがabsolute_urlを使用して相対パスを修正する必要があると_config.ymlでbase_urlを追加

baseurl: '/repository-name' 

CSSであなたのイメージのパスを修正するには/repository-name/css/...のようなURLを使用して "手動で"調整するか、absolute_urlを使用して、再度Jekyllに3つの012を追加するファイルを処理させますのように、最初のCSSファイルでは、

--- 
--- 
.image2 { 
    background-image:url({{'/img/image2.png'|absolute_url}}); 
}