web-dev-qa-db-ja.com

css、js、背景画像を含めてjekyllサイトをローカルにデプロイするにはどうすればよいですか？

Octopressサイト（jekyllに基づく）をローカルネットワークにロードしようとしています。サーバーはありません。共有フォルダーでローカルに利用できるようにしたいだけです。

ローカルフォルダにデプロイするたびに、cssとjsおよび背景画像のリンクが壊れます。

Rsync、github、herokuなどの利用可能なオプションはすべて、sshとパスワードを必要とします。これはここで見つけることができます： http://octopress.org/docs/deploying/

これに役立つレーキオプションはありますか？

解決済み：

キキトさん、ご指導ありがとうございました。

私はそれを実装し、gitリポジトリをフォークしました。ただし、問題が1つあります。私はこの手法を使用して、Dropbox Public、ローカルディレクトリ、およびWebホストで同じサイトをホストしました。 /を追加する必要があり、リンクをクリックするとスラッシュが追加されます。リポジトリとDropboxのリンクは次のとおりです。

https://github.com/originalsurfmex/jekyll-relative-bootstrap

あなたが言うようにすべてが機能しますが、あなたや他の人がレイアウトのパーシャルとリンクを見ると、より良いアイデアが得られると思います。

cssimagestaticpublishjekyll
24
user1026169

自動方法：

css/jsファイルの場合：

{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

<link href="{{ relative }}css/main.css" rel="stylesheet" />
<script src="{{ relative }}scripts/jquery.js"></script>

他のファイルの場合：

_config.ymlセット内

url: http://www.yourdomain.com

正規リンク要素を追加します。

<link rel="canonical" href="{{ site.url }}{{ page.url }}" />

jsファイルの1つに、次を追加します。

var relative = null;
if (location.protocol==='file:') {
    relative = Array($('link[rel="canonical"]').attr('href').match(/\//g).length-2).join('../');
    if (relative == '') relative = './';
}
function to_relative(link, index) {
    if (!relative) return link;
    var hash = link ? link.match(/#.*$/) : null;
    if (hash) link = link.replace(/#.*$/, '');
    return link?(link.replace(/^\//, relative)+(index?(link.substr(-1)=='/'?'index.html':''):'')+(hash?hash[0]:'')):null;
}

$(function(){
    if (relative) {
        $('a').attr('href', function(a,b){return to_relative(b, true);});
        $('img').attr('src', function(a,b){return to_relative(b, false);});
    }
});

その他の側面については、jQueryを使用してそれらを操作します。

21
caiguanhao

問題は、リソースの一部に到達するために絶対パスを使用していることです。ネットワークのどこかにサイトを展開したい場合は、それらを相対的なものにする必要があります。

私の場合、それを必要とするページ/投稿にrootという（オプションの）設定を定義し、プロジェクトの「相対ルート」を指すようにします。たとえば、about/index.htmlにあるページでは、「上」のレベルが1つしかないため、ルートは../になります。

---
title: My Page title
root: "../"
---

ディレクトリ内のさらに離れたページには、さらに多くのドットが必要になります：../../、../../../など。ルートフォルダ内のページ（index.htmlなど）にはルートは必要ありません。

次に、その設定を使用してallパスを生成します。

そのページにアクセスしている、または自分自身を投稿していて、ローカル画像または別のページを参照する必要がある場合は、page.rootまたはpost.rootを使用します。

<img src="{{ post.root }}images/happy.png" />
<a href="{{ post.root }}2010/01/01/another_post>Relative link to another post</a>

直接参照を作成することは可能ですが（../images/happy.png）、これはサイトを作成するときにうまく機能し、各ページの明確なパスについてはまだわかりません。

_includes内の1つの部分ファイルにすべてのcssとjsが含まれています。 rootという変数を作成して、ページと投稿の両方で機能することを確認します。

{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}

<script type="text/javascript" src="{{ root }}js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" />

それはほとんどそれです。

16
kikito

特定のフォルダー用にサイトを生成する必要がある場合は、html <base />タグを使用する方が簡単な場合があります。ルートフォルダを基準にしたすべてのアセットパスを使用して、デフォルトのレイアウトに以下を追加します。

<base href="{{ site.baseurl }}" />

次に、jekyll --base-url <folder> <folder>を使用して、baseurlを正しく設定してjekyllサイトを<folder>にデプロイします。

これは、組み込みのWEBrickサーバーでも変更なしで機能することに注意してください。 jekyll --serverで開始し、カスタム--base-urlを指定しないでください。

更新：gimpfがコメントで指摘しているように、これはアンカーリンクでは期待どおりに機能しません。これらは、現在のページではなくベースURLを指します。 回避策 JavaScriptを使用しています。例： jQueryでアンカーhrefを書き直します。

$().ready(function() {
  $("a[href^='\#']").each(function(){
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});
5
kynan

これを扱う Jekyllのgithubの問題 があります。 _config.ymlを置く：

url: "<your domain>"

次に、{{ site.url }}を使用するとURLが返されます。したがって、たとえば、ページのヘッダーから/css/styles.cssファイルを参照するには次のようにします。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">  
  <head>
      <...>
      <link rel="stylesheet" href="{{ site.url }}/css/style.css" type="text/css" />
      <...>
  </head>
  <body>
     ...
  </body>
</html>
3
ivotron

代替回答-

ローカルでホストされている静的htmlについても同様の要件があり、Webサーバーなしで他のコンピューターに配布して、通常のブラウザーでファイルシステムから読み取ることができました。

さまざまな場所で難解なパス構文をいじるのではなく（このスレッドの他の回答で証明できますが）、代わりに、通常どおりJekyllが提供するlocalhost：4000にサイトを公開することで、回避策を選択しました。 wgetユーティリティを使用して静的Webサイトの静的コピーをダウンロードし、標準のWebブラウザを使用してファイルシステムから開いてナビゲートすることができました。 wgetは、パスを相対的なものにするという大変な作業を行います。

これは私が使用するwgetコマンドです-

wget \
 --recursive \
 --no-clobber \
 --page-requisites \
 --html-extension \
 --convert-links \
 --restrict-file-names=windows \
 --domains localhost http://localhost:4000
2
John K