おしらせ（記事）ページの追加 - ousf/ousfhp GitHub Wiki

おしらせ（記事）ページの追加方法です。

確認

  1. Githubアプリの画面上の「Fetch Origin」をクリックします。クリックしてしばらくしても、「Fetch Origin」のままなら完了。「Pull origin」になった場合はもう一度クリックすると「Fetch Origin」になると思います。

新規記事の作成

  1. ousfhpをダウンロードしたフォルダを開き（Ctrl+Shift+Fで開くことができます）、その中の「posts」フォルダに入ります。
  2. 適当な名前でフォルダを新規作成します。できるだけ今から制作する記事に関連した、ユニークな（他と被らなさそうな） 日本語を使用しない名前にして下さい。（例：「C98oshirase」）。決まらなければ日付でもいいです。（例：20201112）
  3. 上項で作成したフォルダに入り、記事作成用のファイルを新規作成します。記事作成には「.md」形式のファイルを使います。「article.md」というように任意の名前をつけて新規作成してください。
  4. 制作したファイルを「メモ帳」などのエディタで開いて、記述していきます。

mdファイルの書き方

メタデータの記述

まずは記事のメタデータ（情報）を記述していきます。冒頭に以下の文字列をコピー・ペーストしてください。

---
date: "2020-03-21"
title: "阪大SF研のホームページを開設しました"
type: blog
path: "hpkaisetsu"
---

これは初回に投稿した記事のメタデータですが、これを改変していきます。
date: "2020-03-21" の部分には記事の投稿日を記述します。[西暦]-[月]-[日]というフォーマットで記述して下さい。
title: "阪大SF研のホームページを開設いたしました"の部分には記事のタイトルを記述します。
type: blog の部分は改変する必要はありません。いじらないでください。（変更すると記事が正常に表示されません）
path: "hpkaisetsu" の部分に記述した文字列は実際のURLの一部となります。（この場合、https://ousf.net/post/hpkaisetsuとなります。他との衝突を割けるため、前章第２項で作成したフォルダ名と同一にすると良いでしょう。

基本的な書き方

それでは、記事の内容を書いていきます。前章で記述したメタデータの下（---の下の行）から書いていくこととなります。
基本的には普通に文章を書いていけば良いのですが、一点注意したいのは、mdファイル内で改行しても実際には改行されないということです。
どういうことかといいますと、mdファイル内に

記事の内容一行目
記事の内容二行目

と記述しても、実際には

記事の内容一行目記事の内容二行目

という風に見えてしまいます。

では、改行するにはどうすればいいかというと、改行したい文の最後に 「半角スペースを２つ挿入」 します。

記事の内容一行目  ←半角スペース２つ
記事の内容二行目

という感じですね。

見出しをつける

記事内に見出しをつけたいときは、以下のように記述します。

# 見出し

#のあとに必ず半角スペースを挿入する ことに注意して下さい。

空白行を挿入したい

文章を書く上で、空白行を挿入したいこともあると思います。

記事の内容一行目

記事の内容二行目

半角スペースを２つ挿入する方法ではこの表示ができません。そのため、こういう表示をする場合はmdファイルに以下のように記述して下さい。

記事の内容一行目  ←半角スペース２つ
                ←(改行)
<br>
                ←(改行)
記事の内容二行目

画像を挿入したい。

画像を挿入したい場合、記事のmdファイルを入れているフォルダと同じフォルダに、挿入したい画像を配置して下さい。できればファイル名には日本語を使用しないで下さい。
その後、mdファイルの画像を挿入したい位置に以下のように記述して下さい。

![画像の説明](./ファイル名)

例えば、pic1.jpgという部室の画像を挿入したいとすれば、以下のように記述します。

![部室の画像](./pic1.jpg)

画像の説明は思いつかなければ適当でもいいです。

リンクを配置したい

他のWebサイトへのリンクを文章内に配置したいこともあると思います。普通にURLを貼り付けても正常に表示はされるのですが、「詳細はこちら」みたいな感じでクリックできるようにしたい場合は以下のように記述します。

[リンク名](URL)

例：

今後、情報発信は主としてこのホームページと Twitter アカウント( [@ousf1](https://twitter.com/ousf1) )を使用していく予定です。

表示： 今後、情報発信は主としてこのホームページと Twitter アカウント( @ousf1 )を使用していく予定です。

記事をアップロードする

記事が書けたら保存し、GitHubのアプリに戻ります。左ペインのChangesの欄に、今回追加したファイルの内容などが表示されているはずなので、左ペインにある項目全てにチェックがついていることを確認し、その下のボタン「Commit to master」をクリックします。 そしたら、上の「Fetch origin」となっている部分が「Push origin」になっているはずなので、そこをクリックします。
処理が終わったら、「Fetch Origin」に戻っているはずです。これで記事の追加・更新は終了です。
５分ほどしたらHPに反映されているはずです。