浜松職業能力開発短期大学校電子情報技術科で製作している「避難所てだすけくん」の Web サイトのリポジトリです。
ソースコードは Git を使ってダウンロード(クローン)します。Git がインストールされていない場合はインストールしておいてください。
以下のコマンドでクローンします。作業ディレクトリは仮に /path/to/workspace と書いているので、実際の場所を指定してください。
cd /path/to/workspace
git clone https://github.com/hinanjo-tedasukekun/hinanjo-tedasukekun.github.io.git
# /path/to/workspace/hinanjo-tedasukekun.github.io/ に
# ソースコードが含まれているので
# 以降はそこで作業します
cd hinanjo-tedasukekunこの Web サイトは Ruby 製ツールの Jekyll を使って構築されています。Ruby のインストールのほか、ライブラリのインストールが必要です。
Ruby のインストール後、以下のコマンドを実行してライブラリをインストールします。
# /path/to/workspace/hinanjo-tedasukekun.github.io/ 内で
gem install bundler # 失敗する場合は sudo gem install bundler
bundle install --path=vendor/bundle以上で準備は完了です。
はじめに、作業ディレクトリを現在アップロードされている状態と同期します。以下のコマンドで「プル」という同期作業を行います。
# /path/to/workspace/hinanjo-tedasukekun.github.io/ 内で
git pullその後、作業ディレクトリ内のファイルを編集します。ニュースのファイルは /_posts/ ディレクトリ以下のファイルを、それ以外のファイルは例えば about.html を同じディレクトリにコピーして少しずつ変えていくとよいでしょう。形式については HTML(.html)あるいは Markdown(.md;書き方の例)で書くことができますが、レイアウトの都合上 HTML にしなければならない場合が多いかもしれません。
画像は /img/ 以下に、スタイルシートは /css/ 以下に置きます。
サイトのテーマ(見た目)は「Bootstrap」というフレームワーク上に作られています。以下のページにある部品のサンプルコードを貼り付けて変えていくと、狙った見た目にしやすいです。
編集時は以下のコマンドで Web サーバーを起動しておくと確認が簡単になります。
# /path/to/workspace/hinanjo-tedasukekun.github.io/ 内で
bundle exec jekyll serve
# 終了させる場合は Ctrl + C を押すこのように Web サーバーを起動しておくと、http://localhost:4000/ より編集中のサイトを確認することができます。
変更内容がある程度固まったら「コミット」という記録作業を行います。以下のコマンドを実行します。
# 現在の状態を確認する
git status
# 赤文字で編集したファイル、追加したファイルが出てくる
# 「記録するファイル」を設定する(ステージング)
git add 編集・追加したファイル
# 再度状態を確認する
git status
# 緑文字で記録するように設定したファイルが出てくる
# 記録を行う
git commit
# vi が起動するので、1 行目に何をしたかを簡潔に書く
# :wq で保存終了すると作業内容が記録される
# 作業が記録されたことを確認する
git logGit については以下のサイトを参考にしてください。
- Gitを使ったバージョン管理【Gitの基本】 | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
- 「お使いのパソコンの環境を選んで下さい。」という欄では「コンソールを選択」を選びます。
- Git 入門
- Git - Book
Dean Attali 氏が作成した「Beautiful Jekyll」というテーマを使っています。詳しい編集方法(英語)はこのテーマのサイトにも書かれています。