AMiT

『貴方の創造』が『世界を創る』

  1. Minecraftサーバー
  2. サイトを編集する

サイトを編集する

AMiTはGitHubでサイトを管理しており、ソースコードや編集履歴も閲覧可能です。

また、PullRequestなどを利用した編集も受け付けており、あなた自身の手でページを追加や編集ができます。

もちろんあなたの作った村を紹介するページを作成しても構いません。

ここではAMiTのWebサイトを編集する方法を説明します。

編集のやり方 (簡易版)

AMiTのWebサイトは次の技術で作られています。

  • Git
  • Hugo
  • Markdown

Wikiなどの仕組みに比べるとやや上級者向けです。

初心者の方はGitHubの機能を最大限に活用して、簡単な使い方で試してみましょう。

失敗しても怒ったりしないので、いろいろ試してみてください。

GitHubのアカウントを用意する

最初に、GitHubのアカウントを作成しましょう。

アカウントを作成したら、このサイトを管理するリポジトリにアクセスしましょう。

いろいろなファイルをクリックしてみて、どこにどういう物があるのか確かめてみましょう。

ページは主にcontentディレクトリに入っています。

ページを編集する

編集したいページを見つけたら、それを開いて鉛筆のマークを探しましょう。
001

クリックすると編集画面が開きます。気になる部分を書き換えましょう。
002

変更を保存します。そのまま保存しても構いませんが、何をどのように変更したのか簡単な説明があるともっと良いでしょう。
003

PullRequestを作成してください。
004

PullRequestが作成されれば完了です。PullRequestの一覧から自分のPullRequestが作成されているか確認しましょう。

管理人が編集内容を確認してサイトに反映するのでしばらくお待ちください。

ページを作成する

先ほどは既存のファイルを編集する方法でしたが、もう一歩進んで新しいファイルを作成してみましょう。

「Create new file」を選択します。
005

ファイル名やページの内容などを記載します。「Preview」でプレビューも確認できますよ。
006

ファイル名には.mdの拡張子を付けてください。また、スラッシュで区切るとディレクトリを作成できます。

ここから先は編集の時と同じです。コミット(保存して)PullRequest、とにかく基本はこの2つです。

ファイルをアップロードする

慣れてくると画像が使いたくなってくるでしょう。そういう時はファイルのアップロード機能を使います。

「Upload files」を選択します。
005

ファイルをアップロードしましょう。画像だけではなく、記事(Markdown)やディレクトリもそのままアップロードできます。
007

後は編集の時と同じ、コミットしてPullRequest!

画像をアップロードする際には注意点があります。後述の「編集の時の注意点」をご覧ください。

画像をPullRequestで添付する

「画像を添付したいんだけど、圧縮のやり方が分からない」「フォトショとかああいうソフト持ってないから綺麗に解像度変更できない」というときは、画像をPullRequestの画面から添付してください。

投稿画面にドラッグアンドドロップすると添付できます。
012
013

画像を添付しておいてもらえれば、管理人が適切な処理を施してサイトに追加します。

(もちろん、やり方のわかる方は自分で処理してコミットの中に含めてしまっても構いません)

どうしても分からない時は

パソコンが苦手な人でも大丈夫です。

「このページに書いてあることがさっぱり分からない」という人はGitHub上でissueから編集内容を投稿してください。

管理人が対応します。

編集のやり方 (上級者向け)

ある程度コマンドなどの理解ができる人は上級者向けの編集方法も試してみましょう。

記事の都合もあるので簡単な説明にとどめています。分からない人は「Git 使い方」「GitHub PullRequest」「Markdown 書き方」「Hugo 使い方」などの単語で調べてみましょう。

もちろん簡易版のやり方で編集したのでも問題ありません。やっていることは同じです。

必要なもの

AMiTのWebサイトを編集するためには次の物が必要です。

  • Git (コマンドでの使い方を解説しますが、SourcetreeのようなGUIクライアントでも構いません)
  • Hugo (extended版が必要)
  • Markdownに対応したエディター (Visual Studio Codeを推奨)
  • ブラウザ (Google Chromeを推奨)

インストールと使い方

エディター(Visual Studio Code)やブラウザはダウンロードしてインストールするだけなので簡単でしょう。

Git(コマンド版)はインストーラーなどがありますが、実際に使用するのはコマンドからです。(Windowsの場合は「Git Bash」から使用)

Hugoはコマンドから使うソフトウェアで、なおかつインストーラーがないので難しく感じるかもしれません。

Hugoは、extended版(ファイル名にextendedと付いているもの)をダウンロードしてください。

その後、zipなどを解凍して中に含まれるhugo.exe(他のOSではhugo)をコマンドから呼び出します。

たとえば、C:\hugo\hugo.exeにあるのなら、コマンドからC:\hugo\hugo.exe --helpのように使用します。

GitHubでforkしてcloneする

まずはこのサイトのリポジトリをforkしましょう。
008

forkしたリポジトリから「Clone or download」ボタンを選択して、clone用のURLを取得しましょう。 009

通常はhttps://github.com/<あなたのアカウント名>/amit.jyn.jp.gitになっているはずです。

このURLでcloneしましょう。コマンドからGitを使用する場合はgit clone <URL>です。

cd amit.jyn.jpでcloneしたディレクトリに移動して、git submodule initgit submodule updateを実行します。

これはテンプレートを初期化するコマンドです。

新しい記事を作成する

何を作業するときは、まずはコマンドのカレントディレクトリを移動する必要があります。

cd <リポジトリのあるディレクトリ>を実行して最初にディレクトリを移動しましょう。(Windowsの場合はShift+右クリックで「PowerShellウインドウをここで開く」を使用しても構いません)

cdで移動できたら、次はhugo new ファイル名.mdで新しいファイルを作成しましょう。

作成したファイルをエディターで編集します。ちなみに編集中はhugo serverでプレビューができるので活用しましょう。

commitしてpushする

記事が作成できたらcommitしてpushしましょう。(本当はブランチを作成した方がいいのですが、説明が長くなるので省略)

git add .でファイルを追加した後に、git commit -m "コミットメッセージ"を実行してコミットします。

pushするにはgit push origin masterを実行します。

プルリクエストを作成する

GitHubの画面からフォークしたリポジトリを開いてPullRequestの一覧を表示します。
010

「New pull request」を選択。
011

PullRequestを作成してください。
004

PullRequestが作成されれば完了です。PullRequestの一覧から自分のPullRequestが作成されているか確認しましょう。

編集の時の注意点

編集の際にいくつか注意事項を。

多少は間違っていても構いません、こちらで修正するので気軽に編集に参加してください。

ファイル名

各種ファイルは必ず英数小文字とハイフンで作成してください。

日本語などの含まれるファイルは正しく表示できない可能性があります。

h2からはじめる

Markdownには#の数に応じてh1、h2……と見出しを付けられますが、記事はh2(##)で書き始めて、h1(#)は使わないようにしてください。

h1はページのタイトルに使われるためです。

画像の解像度

画像は横幅640pxのpngやjpegが無難なのでおススメです。

もちろんそれ以上大きくても構いませんが、大きすぎても意味がない事をお忘れなく。(スマホなどの画面幅が小さいデバイスでは画面幅に合わせて画像が小さくなります)

容量が大きくなるので適切な大きさに縮小してもらえると助かります。

画像の圧縮

画像を追加する際は必ずTinyPNGなどで圧縮してから追加してください。

Photoshop CCなどをお持ちの方は「書き出し」を利用したのでも構いません。その際の推奨設定は以下の通りです。

PNG

  • ファイルサイズ小(8-bit): 有効
  • メタデータ: なし
  • 色空間情報: sRGBに変換

JPG

  • 画質: 80前後
  • メタデータ: なし
  • 色空間情報: sRGBに変換

画像解像度の変更も同時に行う場合は画像サイズを変更→圧縮の順番で行いましょう。(すでに圧縮されている画像を解像度変更すると、ソフトウェアによっては再び容量が肥大化したりします)

API

顔画像を取得するためのAPIがあります。

https://amit.jyn.jp/api/headskin?user=ユーザー名にアクセスするとユーザーの顔画像が取得できます。

PNG形式、48x48ピクセルです。imgでそのままページ内に貼り付けできます。

自己紹介やメンバーの一覧など使うと良いでしょう。

(APIはサイト内であれば自由に使って構いませんが、目的外の用途では利用しないでください)

投稿者: HimaJyun
投稿日時: 
更新日時: 
変更履歴: GitHubで見る