NetlifyとHexoで静的サイトをデプロイする
今回は、静的サイトのホスティングサービスNetlifyと静的サイトジェネレーターHexoを用いて、静的サイトのデプロイを行います。
静的サイトとは
静的サイトとは、サイトの全てのページがHTMLで用意されているウェブサイトのことを指します。
対して動的サイトは、ユーザーがアクセスしてからページを生成するウェブサイトのことを指します。
動的サイトはウェブサイト上で、様々なユーザーのアクションによってページが変化させることができます。
SNSなどはその典型的な例で、ユーザーが投稿した瞬間に、他のユーザーもそれを見ることができ、どんどんサイトのページが変化していきます。
静的サイトは、アクセスされる前にHTMLファイルを用意しているため、表示速度は圧倒的です。
そして、静的サイトが最近になってまた注目されている理由として、不要なものは要らないという考えと、サイトで変更を行うのではなくテキストファイルから変更を行えるため、変更する作業は気軽にローカルから行えたり、コードレビューのような形式で行えるというのが挙げられます。
静的サイトを公開する手順としては、静的サイトの作成をして、それをデプロイするという流れになります。
そのままのHTMLファイルを作成して、公開していくということもできますが、ページ数が多くなっていくと、デザインなどをいじりたくなった際にかなりアップデートが大変となり、管理が難しくなってしまいます。
そこで、静的サイトジェネレーターというものを使って静的サイトを作っていきます。
静的サイトジェネレーターは、様々な言語で開発されていて、１００種類以上存在します。
以下のサイトで、一覧を見ることができます。
StaticGen | Top Open Source Static Site Generators
それでは、実際に作成していきます。
Hexoを用いて静的サイトの作成
今回はnode.jsで動くHexoを使って、静的サイトを生成します。
Hexoは、静的サイトの中でも、ブログに特化したフレームワークです。
Hexoをインストール
Hexoのインストールするのに、npm(Node.jsのパッケージマネージャー)を使用します。
今回使用するnpmのバージョンは5.6.0です。
npm install -g hexo-cli
hexo -vで様々なバージョン情報が表示されたら、インストール成功です。
静的サイトの生成
静的サイトのディレクトリを置きたい場所まで移動して、以下のコマンドを入力します。
今回はhexo-netlify-sampleという名前のリポジトリを作成します。
hexo init hexo-netlify-sample
作成したディレクトリ下に移動し、npm installで必要なパッケージのインストールを行います。
cd hexo-netlify-sample/
npm install
これで、雛形が作成されました。
hexo-netlify-sample > ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
それでは、ローカルサーバーを立ち上げます。
hexo server
http://localhost:4000 からアクセスすることができます。
そうすると以下のような画面が表示されます。
このページは、静的サイトジェネレーターによってMarkdownファイルから作成されています。
Markdownファイルはhexo-netlify-sample/source/_postに格納されています。
現在は、hexoがMarkdownファイルを読み取ってページを表示していますが、実際にデプロイする際には静的ファイル(HTMLファイルなど)に出力する必要があります。
hexo generateコマンドで、静的を出力することができ、ルートディレクトリにpublicというディレクトリが作成され、そこに格納されます。
それでは、静的サイトに必要なファイルは作成できたので、これからはデプロイに取り掛かります。
今回利用する静的サイトのホスティングサービスであるNetlifyは、zipファイルからデプロイしたりもできますが、Gitリポジトリを使う方が楽に管理できるため、今回作成したリポジトリをGitリポジトリにして、リポジトリホスティングサービスを通してデプロイします。
リモートリポジトリの作成
Netlifyのデプロイには、GitHub,GitLab,Bitbucketが使えますが、今回はGitHubを使います。
GitHubの公式ページから、New Repositoryを選択し、以下のように、初期コミットをローカルで行いため、READMEとgitignoreとlicenseを外して、作成ボタンを押します。
後は、ローカルで、コミットまで行います。
hexo-netlify-sample > git init
hexo-netlify-sample > git add .
hexo-netlify-sample > git commit -m 'initial commit'
リモートリポジトリにプッシュします。
リモートリポジトリの登録は、以下のコマンドで行います。
git remote add origin git@github.com:ユーザー名/リポジトリの名前.git
ここでは、git@github.com:m4ppi/hexo-netlify-sample.gitですが適宜置き換えてください。
git remote add origin git@github.com:m4ppi/hexo-netlify-sample.git
そして、プッシュをすれば、リポジトリに追加したファイルが、リモートにも反映されます。
git push -u origin master
Netlifyを使ってデプロイする
無事にリモートリポジトリを作成できたら、後はNetlifyでデプロイを行います。
Netlify 公式サイトにアクセスして、GitHubを選択し、ログインを行います。
New site from Git押して、先ほど作成したリポジトリを選択して、Hexoでは以下のように入力します。
後はデプロイされるのを待つだけです。
そうすると、このようなURLが表示された画面が表示されます。
このURLがデプロイしたサイトのURLです。
https://sad-lichterman-8e1ec5.netlify.com
ここからドメインの設定や、HTTPS化なども行ったりもできます。
このように、Netlifyを用いるとリポジトリを作成後、簡単にデプロイすることができます。
今回は静的サイトジェネレーターとして、Hexoを用いましたが、他の様々な静的サイトジェネレーターがあるので気になった方は試してみてはいかがでしょうか？
