サボテンを使って静的ブログを作成する方法[OS X]
更新：Cactusアプリは廃止されました.
あなたがCMSを必要とせず、ただ静的なサイトやブログを入手したいのなら、Jekyllはチャンスをつかむための良いツールです。ただし、コマンドラインツールではなくGUI付きのツールを使用する場合は、チェックアウトすることをお勧めします。 カクタス.
サボテンは無料です 静的サイトジェネレータ あなたを助けることができる強力なツールを装備 ローカルでWebサイトを構築する, 最新のWebテクノロジを使用すると、より速くより簡単になります。それはあなたがあなたのプロジェクトの出発点になるでしょう。.
あなたのプロジェクトに取り組んでいる間、Cactusはそうします プロジェクトに加えたすべての変更を監視する そして ブラウザを自動的に更新する だからあなたはあなたのMacやモバイル機器で、すぐに変更を見ることができる。また、SASS / SCSSとCoffescriptをサポートしているので、このファイルに対するすべての変更も自動的に生成されます。.
はじめに
まず最初に、あなたはそのホームページからCactusをダウンロードし、そしてインストールを実行する必要があります。完了したら、開くと、4つのボタンが表示されます。[作成]、[デプロイ]、[編集]、および[プレビュー]ボタン.
新しいプロジェクトを作成するには、をクリックしてください。 作成する. そこに4つのテンプレートがあります。このチュートリアルでは、Blogテンプレートを使用します。クリック 作成する.
プロジェクトの名前を入力し、プロジェクトが存在する場所を選択するように求められます。ここで私は名前をあげます “私の素晴らしいブログ” プロジェクトのために。その後、あなたはあなたのプロジェクトがすでにCactusにあるのを見るでしょう.
ファイルの修正
ブログテンプレートを使用して生成されたプロジェクトがFinder上に存在します。ブログを作成するために必要な要素を調べます。ファイルが保存されているディレクトリに移動します。使用する主なディレクトリは次のとおりです。 テンプレート, ページ数, そして 静的 ディレクトリ。今のところ他の人をスキップしましょう.
簡単にするために、各ディレクトリの目的は次のとおりです。
- テンプレート：テンプレートとして動作するHTMLファイルが含まれています。ページ上のHTMLファイルでその上に構築されます。.
- ページ数：同じパスを持つページになるすべてのHTMLファイルを含みます。例：ここhello.htmlはhttp://yoursite.com/hello.htmlになります
- 静的：CSS、Javascript、画像などのすべての静的リソースが含まれています.
それでは、ディレクトリから3つのメインファイルを編集します。 base.html そして post.html Templatesディレクトリに index.html Pagesディレクトリに.
サボテンの用途 Djangoテンプレートエンジン テンプレート言語用。これにより、他のHTMLファイルのHTML要素を含めることができるので、コードを複製する必要はありません。ここで最も使用されている機能は テンプレートの継承 そして 変数.
それらがどのように機能するかを見るために、最初に開く base.html テンプレートディレクトリ.
％block title％ブログ％endblock％ ％ブロックの内容％メインの内容％終了ブロックの内容％ ---
base.html 「スケルトン」テンプレートとして使用する単純なHTMLファイルです。それは私たちのサイトの共通の要素が含まれています。あなたはいくつか見ることができます “ブロック” そこで;これらのブロックをオーバーライドするために子テンプレートを使用します.
今すぐ開く post.html と同じディレクトリにあります。 base.html.
％extends "base.html"％ ％block title％ title |サボテン％endblock title％ ％block content％ ---title
見出し
％block body％これが投稿内容です。 ％endblock body％ --- ％endblock content％
の post.html ブログエントリページのマークアップが含まれています。最初の行でそれを見ることができます post.html を拡張 base.html. これは、ブロックをオーバーライドすることを意味します。 base.html ここのブロックで.
ここでも変数を見つけることができます。 title そして 見出し. これらの変数の値は、後でブログの投稿で定義します。.
それでは、 ％ブロック本体％ ブロック。これは私たちのブログの投稿エントリを含む子テンプレートによって上書きされます.
ディレクトリに行く ページ/投稿. これが私たちの投稿の残りの部分です.
title：私の投稿エントリの見出し：私の投稿見出しの著者：Agus date：15-01-2015 ％extends "post.html"％ ％block body％ ％filter markdown％エリート。 Earum、Perferendis、Dolorem RerumおよびTempora Sint Nemo Illum Ab Saepe、Assnda、Amet illo deleniti Officiis、voluptatem maxime atque vero suntのいずれかです。 --- ％endfilter％ ％endblock body％
投稿エントリでは、title、headline、author、dateのように変数に値を与えます。この値は、親テンプレートで変数名を呼び出したときに渡されます。それからMarkdownでブログの内容を書きます.
今度は私達のブログの索引ページに行き、開く index.html の中に ページ数 ディレクトリ。それは私たちのブログエントリのリストと各エントリへのリンクを含みます。メインコードは以下のようになります。
％extends "base.html"％ ％ブロックの内容％ --
- ％投稿内の投稿％
- 記事のタイトル
post.headline
％endfor％
この時点で、2つのメインページを含む簡単なブログがあります。 インデックスページ ブログのエントリが含まれている ブログエントリーページ 自体.
Cactusウィンドウに行き、プレビューボタンをクリックしてサーバーを起動します。それは自動的にブラウザを開き、あなたのウェブサイトを開くでしょう.
SCSSを使用してブログをスタイリングする
Cactusの素晴らしい機能は、そのままSASS / SCSSで動作することです。ただ あなたの.sassまたは.scssファイルを落としなさい に 静的 ディレクトリとファイルを編集して保存するたびに、Cactusは自動的にCSSを生成します。.
ここで私たちのブログのスタイルを整えるためにbootstrap-sassを使った例を挙げましょう。あなたがbowerを使っていると仮定すると、ターミナルを開いて、そして 静的 私たちのプロジェクトのディレクトリ cd コマンド。それからこのコマンドを使ってbootstrap-sassをインストールしてください：
$ bowerインストールbootstrap-sass-official
ダウンロードが完了すると、あなたは bower_components を含む静的ディレクトリ内のディレクトリ ブートストラップサス公式.
今このディレクトリに行きます： 静的/ CSS. scssファイルを作成し、名前を付けます syle-bs.scss そしてこのコードを挿入してください.
@import "…/ bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap";
コードがすることはそれがbootstrap-sassからすべてをインポートすることです。 style-bs.scssを保存すると、ブートストラップからのすべてのスタイルを含む同じディレクトリにstyle-bs.cssが生成されます。.
プロジェクトをデプロイする
最後に、プロジェクトの準備が整ったら、プロジェクトを実際のバージョンに簡単にデプロイできます。 Amazon S3を使用する.
