Hexoを使ってみた

2020年09月11日

フロントエンド

今回は、静的サイトジェネレーターのひとつであるHexoを使って日記的なサイトを作ってみたので簡単な紹介とHexoの使い方などまとめていこうと思います。制作したサイトのURLはこちらです。URL(https://kokediary.netlify.app/)

Hexoを使ってサイトを作ってみた理由

なぜ今回Hexoを使ってサイトを作ろうと考えたのかについてまとめていきます。

そもそも一度、静的サイトジェネレーターを使って簡単にでもサイトを作ってみたいなと考えていました。しかし、最近の有名所でいうとReact製のGatsbyやVue.js製のVuePressなどですが、ReactともVue.jsも正直よくわからないですしJavaScriptを理解しきれてないので難しいかなと思いました。そこでポートフォリオで使ったEJSでかけるHexoという静的サイトジェネレーターがあること知り、それなら今の状態でもできるかなとやってみることにしました。

なぜ日記的なサイトを作ったのかについては、ただブログを作ってもWordPressで作ったこのブログもあるというのと、毎日の小さい考えや発見などをメモ的な感じで少しまとめておきたいというのが前々からあり、細かいことをまとめるにはこのブログには適してないと考えたので、毎日、少しだけ文章を書いて更新できるサイトを作りたいと思ったからです。毎日の習慣になるものが欲しかったというのもありますね。

Hexoとは?

HexoはNode.js製の静的サイトジェネレーターでMarkdownで記事を作成して、HTMLへ変換できます。EJSで使える関数が用意されています。

Hexoのインストール

node.jsのインストール

まずはNode.jsをインストールする必要があります。gulpの環境構築の記事で説明したのと手順は変わりません

公式サイトでNode.jsのインストーラーをダウンロードします。その後はインストーラーを起動して、手順にしたがってインストールします。

インストールしたらちゃんとできているのか確認のためにターミナルを開いて、node -vと実行します。うまくインストールされているとNode.jsのバージョンが表示されるはずです。

Hexoのインストール

またターミナルを開いて以下のコマンドを入力します。

npm install -g hexo-cli

これでHexoのインストールは完了です。

Hexoでサイトを制作

まずは、任意のディレクトリに制作するサイトのフォルダを作成しましょう。好きなフォルダ名にしてください。

hexo init フォルダ名

これでHexoのブログとして動きます。

一度、ブログとしてちゃんと動いているかを確認するためにディレクトリに移動します。移動したら以下のコマンドを入力してHexoのローカルサーバーを起動します。

hexo s

入力したらブラウザのURLバーにhttp://localhost:4000/を入力して、Hexoのデフォルトで入っているテーマが表示されればちゃんと動いています。

一応これでブログとして機能するようになりましたが、デフォルトのテーマのままですし、このテーマをカスタマイズしてもいいですが、せっかくなので自分でテーマを作ってみたいですよね。とはいえ、WordPressなどよりも情報は少なめですし、なかなか1から作っていくのは難しいですよね。なのである程度設定やテンプレートを生成してくれるジェネレーターを使用しましょう。hexo-generator-index2というのがいいらしいのでこちらを採用します。ジェネレーターを使わないといろいろな機能を自分で実装していかないといけないので面倒らしいです。

ジェネレーターの使い、設定をしていくとthemesフォルダの中に新しいフォルダが生成されるはずです。生成されたらプロジェクトフォルダの一番上の階層にある_config.ymlファイルに色々と設定していきます。

まず、一番上に# Siteと書いてある部分があります。その下にサイトの情報を記述していきます。titileやdescriptionなどをしっかり書きましょう。その次にすぐ下に# URLという項目があり、urlと書いてある場所に制作しているサイトのURLを記述しましょう。urlをちゃんと設定しないとうまく公開できないこともあるので気をつけてください。ここまできたら一気に一番下に行き、# Extensionsと書いてある場所があるはずです。そこのtheme:landscapeと書いてある項目のlandscapeの部分をジェネレーターで生成した、themesフォルダの中のフォルダ名にしましょう。ここまできたらローカルサーバーを起動して確認しましょう。CSSが当たっていないタイトルとひとつだけ記事が表示されればOKです。ここからCSSなどで見た目を整えて自分の好きなように作っていきましょう。

ある程度自分でカスタマイズして形になったら早速公開していきましょう。公開するときは前回の記事で紹介したGitHub PagesとNetlifyがおすすめです。静的サイトなのでこの2つでも問題なく動きます。今回、私は特にプラグインなどを入れずにそのまま公開できるNetlifyを利用しました。公開の手順については前回の記事にまとめてありますのでそちらをご覧ください。

記事の追加

記事の追加についてまとめていきます。

記事を追加したいときは以下のコマンドを入力します。

hexo new post "記事のファイル名"

一番上の階層にあるsourceフォルダの中の_posts内に新しいMarkdownファイルが生成されているはずです。記事自体を削除したいときはこのMarkdownファイルを削除してください。

まとめ

初めて静的サイトジェネレーターを使ってみました。新しいことをやっているときは、実際に作業している時間より調べている時間の方が長くなってしまいますね。今回でいうとジェネレーターがあるというところまでいくのにかなり時間がかかってしまいました。また作ったサイトは毎日の日記的な感じでできたことや新しい発見など個人的なことを少しの文章だけでも書いていき、習慣にしていければと思います。

Pocket

related

gulpでsassのコンパイルするための環境構築

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じ

フロントエンド

2020.08.22

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

フォーム作成の備忘録

今回は、HTMLとCSSでは結構難しい分類にはいるフォームのコーディングを自分の復習がてらまとめていこうと思います。フォームの表示がちゃんとできるようにということをまとめていくので実際に入力された内容

フロントエンド

2020.03.31

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き