かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

ソフトウェア開発系技術に興味はあるけど詳しくない人のための GitHub でサイトを公開する方法

要は GitHub pages に見た目は置いといてページをアップするための方法のメモです。OS は Windows 10 を想定してますが、まぁ OS による差異はパス区切り文字が \/ や Ctrl か Cmd くらいなもんだと思います。

インストールするもの

Visual Studio Code に追加する拡張機能(必須じゃないけどあると便利なので入れる)

VSCode を起動したら拡張機能を選んで

f:id:okazuki:20190124141942p:plain

Paste Image で検索して Install を押します。記事を書くときに書くマークダウンファイルにクリップボードから画像を貼れるやつです。

f:id:okazuki:20190124142036p:plain

あと Markdown All in One も Install しておきます。

f:id:okazuki:20190124142301p:plain

インストールしたらリロードと書いてあるところを押すか VSCode を再起動します。

GitHub のアカウント登録

アカウントを作ってログインできるようにしておきます。

github.com

記事を書く

任意の場所に空のフォルダーを作ります。フォルダーを作ったら Visual Studio Code のファイルメニューからフォルダーを開くで、そのフォルダーを開きます。

新しいファイルをぽちっと作って index.md という名前にします。 マークダウンは HTML のタグみたいな煩わしい書き方ではなく、なるべくテキストファイルとして自然な感じで文書が書けるやつです。書き方はいろいろなサイトがありますが、Markdown で検索したら以下のサイトがひっかかりました。きれいにまとまってると思います。

www.asobou.co.jp

例えば index.md の中身を以下のようにします。

# 最初のページ

ここに色々書きます。

- 箇条書き1
- 箇条書き2

## 他にも書きます

色々

以上

ちゃんとハイライトもされたりして便利。

f:id:okazuki:20190124143403p:plain

Git で管理するようにする

Git で差分管理するようにします。因みに Git と GitHub は違うものです。Git はファイルの差分や変更履歴を管理するツール。GitHub は Git で管理してるファイルをインターネット上に置かせてくれるサービス(付帯サービスもいっぱいあって便利)

VSCode のソースコントロールを開いて Git で管理するための初期化ボタンを押します。

f:id:okazuki:20190124143632p:plain

フォルダーを選択するように言われるので、今開いてるフォルダーを選択します。

f:id:okazuki:20190124143708p:plain

こうすると履歴管理してくれるようになります。早速変更されたファイルをソースコントロールに出てくる(この場合は index.md)のでメッセージを入れて Ctrl + Enter かチェックマークを押して怒られます。

f:id:okazuki:20190124144707p:plain

履歴に残す自分の名前とメアドを入れないといけません。ターミナルを起動します。

f:id:okazuki:20190124144827p:plain

ターミナルが出てくるので以下のコマンドを打ちます。

git config --global user.name "your name"
git config --global user.email yourmailaddress@example.com

この設定は最初だけなので次からは怒られません。気を取り直してもう一度。

f:id:okazuki:20190124143823p:plain

なんか出てきますが変更を反映するかって感じなので Yes か Always しておきましょう。Git に興味が出てきてちゃんと勉強したいときはステージとかなんとか勉強するといいと思います。ここらへんとかで。

backlog.com

こんな感じでファイルを作ったり変更したりして、きりがいいタイミングで変更を反映していきます。このコメントをつけて変更の履歴をつけることをコミットって言います。

公開しよう

GitHub にいって新しいリポジトリーを作ります。リポジトリーはローカルのフォルダーをアップロードするような場所のイメージです。 GitHub にログインしたら New を押して

f:id:okazuki:20190124144320p:plain

適当に名前を入れて Create repository をします。

f:id:okazuki:20190124144426p:plain

そして URL が出てくるのでコピーしておきます。

f:id:okazuki:20190124144545p:plain

ここが最大の難関かもしれませんがアップロード先の登録をコマンドでやります。ターミナルを表示させて以下のコマンドを打ちます。コマンドの後ろ側の URL は GitHub でゲットした URL です。これもリポジトリー単位に 1 回やるだけで OK です。

git remote add origin https://github.com/youraccount/yourrepositoryname.git

ソースコントロールの ... から Push を選びます。Push するとアップロードされます。

f:id:okazuki:20190124145405p:plain

最初の Push ではアップロード先に、まだ自分の作業履歴と関連付けられた履歴がないけど作る?みたいな感じのこと言われるのでさくっと OK して作りましょう。

f:id:okazuki:20190124145506p:plain

ブラウザーでリロードするとなんかアップロードされたのがわかる感じになります。

f:id:okazuki:20190124145617p:plain

これだと、まだファイルがあるだけみたいな感じなので、最後に GitHub Pages で公開します。GitHub のリポジトリーで Settings の Options を開きます。

f:id:okazuki:20190124145744p:plain

下にスクロールすると GitHub Pages という項目があります。以下のように master というのをドロップダウンから選びましょう。master ってのが Git でデフォルトで作業してる一連の流れみたいなものです。

f:id:okazuki:20190124145843p:plain

最後に Choose a theme を押して気に入った見た目のものを選びましょう。

f:id:okazuki:20190124150020p:plain

閲覧

GitHub Pages の設定のところに URL が出てるはずなので、それを押すと閲覧できます。

f:id:okazuki:20190124150154p:plain

更新

ファイルを変更します。

f:id:okazuki:20190124150228p:plain

ソースコントロールで差分をコミットします。

f:id:okazuki:20190124150301p:plain

ソースコントロールで Push します。失敗することもあります(特にこの記事の流れでやってると失敗しますが心配いりません)

f:id:okazuki:20190124150330p:plain

これはアップロードした先でテーマの設定用のファイルとかが追加されてるので、このままアップロードすると履歴が変になるからです。ということでアップロードしたい自分の手元にリモートの変更を取り込みます。ソースコントロールで Pull します。

f:id:okazuki:20190124150625p:plain

_config.yml というのが追加されます。これが先ほど GitHub の設定でテーマを選んだものとかが書かれてます。 手元のファイルがサーバーのものと合体したので Push します。

f:id:okazuki:20190124150755p:plain

GitHub Pages をリロードすると変わります。

f:id:okazuki:20190124150849p:plain

更新時にはローカルで変更。Pull を押して念のため(自分ひとりで 1 台のマシンで使ってる限りはほぼないけど)リモートの変更を取り込みます。そして Push してアップロードします。

その他、よくやること

画像を入れたい

マークダウンの書き方見てねってなりますが、最初にいれた Paste Image 拡張機能のおかげでクリップボードに画像があれば画像を入れたい場所にフォーカスを持っていって Ctrl + Alt + V で画像を表示するためのマークダウンを入れてくれます。 Windows 10 は Win + Shift + D でデスクトップの矩形切り抜きができるので作業手順とかを作るときは便利です。

Ctrl + Alt + V をすると以下のように画像が自動的に追加されて表示するための記述が挿入されます。 f:id:okazuki:20190124151216p:plain

別ページのリンク作りたい

適当に hoge.md とかでファイルを作って何か書きます。リンク元で以下のように書けばリンクになります。

[Hogeへのリンク](./hoge.md)

こんな感じになります。

f:id:okazuki:20190124151456p:plain

まとめ

とりあえず一人でコツコツ簡単なサイトを上げれるようになったので必要に応じて Git や GitHub の使い方やマークダウンを勉強する土台にするといいと思います。

GitHub を使うと他の人にしてもらった作業をレビュー記録つきで取り込んだり(プルリクエスト)、課題管理をしたり(Issues)、別のマシンで作業してそれをまた自分の別のマシンに取り込んだり(Git の分散バージョン管理あたり)いろいろ便利なことができるようになります。

マークダウンも、どんなことができるのかというのはざっと見ておくと後で捗ると思います。どう書くのかというのは使うやつから都度調べてたら覚える。