Node.js日本ユーザーグループ公式サイト「Nodejs.jp」にプルリクエストを出してみよう！


こんにちはのびすけです。
[NodeBots](http://nodebots.io/)の[日本コミュニティ](https://nodebots.connpass.com/)のオーガナイズをしています。

Node.jsアドベントカレンダー6日目ということで、NodeBotsネタにしようかと思ってたんですけど、 ~~間に合わなそうだったので~~タイトルの内容に変更しました笑

「nodejs.jpにプルリクエストを出してみんなで更新していきましょー！」って内容です！
**プルリクエストが初めての人向け**に書いたつもりですので怖がらずに挑戦してみて下さい！

## nodejs.jpって？

`nodejs.jp`はNode.js日本ユーザーグループの公式サイトです。

[Node学園祭2016](http://nodefest.jp/2016/)の(たしか)懇親会LTのときにリニューアルが発表されました。

* 公式URL: http://nodejs.jp
* リポジトリはこちら: https://github.com/nodejsjp/nodejsjp.github.com

![](https://i.gyazo.com/7fbf6cd0d0c5da09dd3833fe3ad9e406.png)

Node.jsに関するニュースやイベント、ドキュメント、求人情報(今後期待)などが掲載されてます。

## プルリクエストを出してみんなで情報更新できます。

今までのサイトだと全く更新されてなく新しい情報などがなかったのですが、 **プルリクエストを受け付けて誰でも更新(申請)ができるようになりました。** 

> これまでもそうだったのかもしれませんが、少なくとも僕は知らなかったです笑

**Node.jsはコミュニティの力で成り立ってると言っても過言では無いのでどんどんプルリクエストを出してみましょう。**

## 実際にプルリクエストを出してみよう！

それでは実際にどうやって更新するのかを紹介します。

### 手元で動作確認するまで

* フォーク

まずは[GitHubリポジトリ](https://github.com/nodejsjp/nodejsjp.github.com)にアクセスしてフォークしましょう。

![](https://i.gyazo.com/1ac0cd32159bdfff33a9146542b42e61.png)

↓

![](https://i.gyazo.com/09d6700b818051d339ef7aae23b3539f.png)

僕の場合は https://github.com/n0bisuke/nodejsjp.github.com にフォークしました。

* クローン

フォークしたリポジトリを手元に落とします。

```
$ git clone git@github.com:n0bisuke/nodejsjp.github.com.git
```

ちなみにこのリポジトリはデフォルトが`sourceブランチ`です。

![](https://i.gyazo.com/590bd9f537c5bdd3c321cd8fb453be62.png)

* 依存モジュールのインストール

npmで依存モジュールをインストールします。

```
$ npm i
```

* サーバー起動

```
$ npm run serve
```

これでビルドなども行われて、ローカルで動作確認ができます。

http://localhost:3100/index.html

にアクセスしてみましょう。

![](https://i.gyazo.com/cfa6e331790a36b327da4e9264dd8d4c.png)

サイトが確認できればOKです。

### 記事を追加してみよう

イベント、ニュース、求人などの記事を追加できますが、今回は`イベント記事`を追加してみたいと思います。

> [2017/1/29 NodeSchool Tokyo in ヒカリエ](https://nodejs.connpass.com/event/45720/)


![](https://i.gyazo.com/5168202ff97bfdde2067d8f957d92db2.png)


* イベントページのマークダウンファイルを作る

`source/events/2016`フォルダの中に

```
08-08-nodeschool-22.md
10-21-nodeschool-23.md
11-12-nodefest.md
```

の3つのマークダウンファイルが確認できます。

2017年1月29日に[NodeSchool](http://nodeschool.io/)のイベントを作成するので

`source/events/2017`フォルダを作成し

```
01-29-nodeschool.md
```

を作成しました。

![](https://i.gyazo.com/25085f7ba839fd6e28479dd4c823e7a5.png)

* 画像を追加する

イベントページの画像をダウンロードして`source/images`フォルダ内に設置しましょう。
`nodeschool-hikarie.png`というファイル名で保存しました。

* マークダウンファイルの中身を書く

実際に書いた中身は以下の通りです。

```
---
name: NodeSchool Tokyo in ヒカリエ
image: images/nodeschool-hikarie.png
date:
  - 2017-01-29
venue:
  - 渋谷ヒカリエ17階 レバレジーズ株式会社 http://leverages.jp/
ticket:
  - name: commpassで登録してください。
    url: https://nodejs.connpass.com/event/45720/
---

NodeSchoolとは、JavaScriptに関する授業を集めた学校のようなものです。 コードを書いたり問題を解くことでJavaScriptを学べます。

NodeSchoolはグループ制のワークショップになっています。

「ワークショッパー」というアプリを教材に使います。PCは持参して下さい。 ワークショップには、参加者を助けるメンターがいます。

http://nodeschool.io/

NodeSchoolのカリキュラムを使い、Node.js初心者向けのハンズオンを行います！
イベント冒頭にて日本Node.jsユーザー会の代表である古川氏(@yosuke_furukawa)によるゲスト講演のあと、ハンズオン講師@kohei-takata氏からNode.jsの概要やハンズオンについての説明が行われます(仮)。

そして、実際に手を動かしながらNode.jsの基礎を一通り体験して頂いたあと、ご自身で簡単なアプリケーションを作って頂きます。
```

何となく見れば分かるかもしれませんが、各値は以下となっています。

```
name -> イベントのタイトル
image -> 先ほど保存した画像パス
date -> 日付
venue -> 会場
ticket -> イベント申し込みページ
```

更新したらもう一度ローカルサーバーを起動させて手元で確認しましょう。

>  http://localhost:3100/events.html

![](https://i.gyazo.com/42aa0484988f749862a8696a74243983.png)

無事に更新されてますね。

### プルリクエストを出してみよう

さて、手元での更新は確認できたのでこの状態で更新申請をすべくプルリクエストを出します。

* まずはpush

まずはフォーク後の自分のリモートリポジトリに対してpushします。

```
git add -A
git commit -m 'Event追加: 2017/1/29 NodeSchool'
git push origin source
```

コミットメッセージやプルリクのメッセージにルールなどは無いっぽいので恐れずにいきましょう

> ![](https://i.gyazo.com/a02f61dff06497afa12cb917355f4138.png)

* プルリクエスト！

`Pull requestsタブ` > `New pull request` > `Create pull request` でプルリクエストを作成しましょう。

![](https://i.gyazo.com/b05fa9aa98491a830bcf5c199b061414.gif)

実際のものがこちらです。

> https://github.com/nodejsjp/nodejsjp.github.com/pull/217

![](https://i.gyazo.com/d14ca0fedc46dac4814986b65e6e7cd7.png)

あとはドキドキしながらレビューを待ちましょう。

* 問題なければ無事にマージされます。

![](https://i.gyazo.com/abbbd448badfd5e1827802e3f31ad2b8.png)


割と速攻(10分くらい)でマージされました笑

![](https://i.gyazo.com/5f823c11068ab52e7942693b34bc8551.png)

@yosuke_furukawaさんや@kt3k@githubさんがみてくれます。

![](https://i.gyazo.com/1a3c06138ebc4184e7865ed7072f962e.png)

こんな感じでマージ後に確認すると http://nodejs.jp/events.html に自分が更新した内容が反映されてます。

やった!

## おわりに

こんな感じでコミュニティのみんなでサイトを更新していくことができます。
どんどんイベントや記事を更新してみんなでNode.jsを盛り上げていきましょう :)

![](https://i.gyazo.com/32d987191fefb90f74c9807586f60927.png)

そして、2017/1/29の[NodeSchool](http://nodejs.jp/events/2017/01-29-nodeschool.html)もぜひ遊びに来て下さい〜。

現場からは以上です。

明日は@srd7さんよろしくお願いします！

> ちなみに2016年12月時点のものなので最新は[README.md](https://github.com/nodejsjp/nodejsjp.github.com/blob/source/README.md)を確認してキャッチアップして下さい。