MagazineTweetシェアこんにちは、エンジニアのちゃんとくです。ひょんなことからNode女学園というNode.jsを学ぶ女性のためのコミュニティを立ち上げました。イベントを数回開催しましたが、毎回のナレッジが流れていくのがもったいない......。現在公開しているページはこちら、ブログのレポジトリはこちら。Pages」で公開しています。Pagesで公開するところまでやってみます。はじめに静的サイトジェネレータって?静的サイトジェネレータは、HTML/CSS/JavaScriptで構築される静的サイトをコマンドラインで簡単に生成することができるツールです。ヘッダやフッタの共通化、簡易ルーティング、MarkdownファイルのHTML変換など面倒な部分をよしなにやってくれます。Generatorsというサイトで静的サイトジェネレータの一覧が見れます。スター順に並べてみると、Jekyll、HUGOに続いてかなり人気ですね!ちなみにdotstudioのサイトはHUGOで生成されています。こちらの入門についてはデザイナーのちゃちゃまるくんが頑張っているのでご参照ください。Pagesって?Githubが提供する、無料で静的サイトを公開できるホスティングサービスです。Pagesを作成するアカウント(またはorgnization)が作成されている前提で進めますので、お持ちでない方は登録から始めてください。https://github.com/またプロジェクトに紐付けて公開する場合は手順が異なりますが本記事では割愛します。Pages用のレポジトリを作成しましょう。Repository]を選択します。repository」のページに移動します。Pagesを作成したいアカウントやorgnizationを指定します。今回はnodegirls-jpというorgnizationを指定します。name」にはowner名.github.ioと入力します。Pagesが作成されないので注意してください。レポジトリができました!公開URLはhttps://owner名.github.ioになります。SSHのアドレスは後ほど使うのでメモしておきます。Pagesで公開するブログをHexoで作っていきます。開発環境構築Hexoの開発はNode.jsが動く環境で行います。Node.jsをインストールしましょう。Node.jsのインストールには「nvm」や「nodebrew」を使うと便利です。下記ではnodebrewを使ったインストール方法を紹介しています。続いてHexoのインストールです。下記のコマンドを実行しましょう。hexo-gオプションをつけることでグローバルにインストールすることができます。コマンドで雛形生成Hexoのコマンドでブログの雛形を生成します。[ブログ名]で作成です。今回は「nodegirls-jp」というブログ名にします。実行すると自動でnodegirls-jpディレクトリが作成されます。ディレクトリの下へ移動して見てみましょう。ファイルとフォルダが作成されています。installを実行してモジュールをインストールします。これだけで雛形が完成です!ローカルで確認するローカルサーバを立ち上げてブログを確認してみます。(この状態ではまだ公開されません。主な設定は_config.ymlというファイルに記述します。エディタで_config.ymlを開きましょう。こんな感じでブログに関する説明がずらっと記載されているので編集します。urlは先ほど作ったhttps://owner名.github.ioを設定します。authorなどはお好みで設定しましょう。日本語ブログの場合languageはja、timezoneはAsia/Tokyoがおすすめです。今回の設定はこのようにしました。下まで行くと#Deploymentの項目があります。デプロイのためにここを修正します。masterrepoには先ほど作成したレポジトリのSSHアドレスを記述します。設定をローカルで確認するとこんな感じになっています。serverで起動しなおしてみてください。公開してみよういよいよ公開してみましょう。下記コマンドでビルド、公開を一度に行ってくれます。-gここでエラーが出る場合は、以下のコマンドでデプロイツールをインストールしましょう。--save公開されたページを確認してみます。公開できました!記事を追加しよう記事を追加してみましょう。記事名というコマンドで生成できます。最初の記事なのでaboutという記事を作ってみました。デフォルトの設定ではサイトURL/YYYY/MM/DD/タイトルというURLになります。_postsの下にabout.mdが作成されました。このファイルを編集します。dataには自動で値が付与されており、tagsには任意のタグを追加できます。titleを修正して、「info」というタグを設定してみました。---の下から記事本文をマークダウンで記述します。-gでデプロイします。記事が公開できました!まとめサーバの整備やデプロイなどをほとんど意識せずに公開することができました!コマンドを使い慣れている人は本当に爆速開発だったと思います。テーマやプラグインの追加で簡単に拡張できるので、どんどんカスタマイズしてみましょう。次回はテーマを当ててブログのデザインを変更してみます。SDKを使ってJavaScriptでIoT開発してみた無料で手軽!コマンド一つで静的サイトホスティングできるSurgeを試してみた。SpreadSheetsを操作してみよう。