arrow-right hamburger logo-mark social-facebook social-github social-twitter
2017.10.31

Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.3

ちゃんとく

Node.js Magazine

こんにちは、エンジニアのちゃんとくです。ひょんなことからNode女学園というNode.jsを学ぶ女性のためのコミュニティを立ち上げました。

このシリーズではNode女学園のブログを作りながら、Node.js製の静的サイトジェネレータ「Hexo」の使い方を紹介していきます!

前回はデザインを当ててブログのカスタマイズをしてみました。

Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.2

今回はルートを追加してブログ記事以外のページを作ってみます。

今回やること

現在はコマンドで記事を追加するとサイトURL/:YYYY/:MM/:DDという記事が作成されるようになっています。

これを変更して、

というのをやってみます。

新しいルートを追加

ルートの追加は、hexo new page "[新しいルート]"というコマンドで簡単にできます。

コマンドを実行すると/sourceの下に新しいディレクトリが作成されます。

作成されたabout/index.mdにページ内容を記載します。

ローカルサーバを起動してhttp://localhost:4000/about/ を見てみます。 新しいページができました!

メニューに追加

今のままではどこからもリンクがないのでメニューのHomeの横に追加してみます。

/themes/pacman/_config.ymlmenu:に表示名とPATHを記載します。 Archivesはしばらく不要なので消しました。ついでにEventsとStaffページも追加してみます。

表示を確認します。 メニューができました!各リンクが正しいかも確認しておきましょう。

blog記事のURLを変更する

続いてブログ記事がサイトURL/blog/:titleとなるように変更していきます。

プロジェクト/_config.ymlを変更しましょう。 permalink:/:title/に変更します。

new_post_name:の項目をblog/:title.mdに変更します。

新しい記事を作成してみます。 /source/blogの下に記事が追加されるようになりました。

トップページを確認してみましょう。 http://localhost:4000 にはブログ一覧が表示されます。

記事をクリックして飛んでみます。 サイトURL/blog/:titleの形で記事が発行されました!

hexo deploy -gでデプロイです。

まとめ

今回もコマンドと設定ファイルの編集で簡単にルーティングをすることができました。

かなりサイトらしくなってきましたね!

次回はサイドバーをカスタマイズしてみたいと思います。