Webサイトを作りたい
こんにちは、非リア系 Python大好き高校生のLaddgeです。
今回は、Webサイト構築の手間を削減するために、SSG(静的サイトジェネレーター)を自作したので、それを紹介したいと思います。
なぜか僕は急にWebサイトを作りたくなったのですが、さて、どうやって作ろう。
WordPressは構築が簡単だけど、データベース(MySQL)が必要なので鯖を借りる必要がある。
そこで、最近注目されてるSSGを試してみようと思ったんです。
SSGとは
まずは、SSGとは何なのか、何がすごいのかを説明します。
SSGは、Static Site Generator の略で、「静的サイトジェネレーター」という意味です。
「静的サイト」というのは、元々用意されているhtmlなどのファイルを返すだけのサイトのことです。
つまり、SSGはWebサイトの元になるファイル群から、Webサイトとして公開されるファイルを生成するもの、ということです。
意味がわかりませんね。(オイ)
SSGと対をなすものとして、SSR (Server Side Rendering) が挙げられます。
こちらは、「動的サイト」を作るのに使われます。
WordPress などもこれに含まれます。
こちらは、閲覧者のリクエストに応じてその場でページが生成されます。
つまり、SSGとSSRではサイトが生成されるタイミングが違うというわけです。
では、それぞれのメリット・デメリットを比較してみましょう。
| SSG | SSR | |
|---|---|---|
| メリット | ・ページの表示が早い ・サーバーがいらない (Github Pagesなどで公開できる) ・データベースがいらないのでセキュリティが強い ・git管理が楽 |
・表現力豊か ・非エンジニアでも扱いやすい ・アップロードやコメントなどの機能をつけられる |
| デメリット | ・表現力に制限アリ ・非エンジニアには難しい |
・サーバーやデータベースが必要 ・セキュリティが比較的弱い ・読み込みが重くなることがある |
こんな感じで、どちらにもそれぞれの良さがあります。
全体的に、SSGは小規模、SSRは大規模なサイト向きだと思います。
有名なSSG
世の中でよく使われいるSSGとして、
- Hugo
- Jekyll
- Nuxt.js
などが有名です。
これらは本当によくできていて、静的サイトなのに検索ができたり、めちゃくちゃかっこいいテーマが用意されていたりと、めっちゃ便利です。
じゃあそれ使えばいいじゃんって思ったかもしれません。
ところが、僕みたいなわがままなアホには、これらのSSGは高機能すぎるんです。
学校の文化祭のホームページとか作りたくて、そのためにイチから設計したくなったんです。
「しゃあねぇ、大好きなPythonでSSG作るか、、」
SSGの作り方
SSGとして最低限必要な機能は、ソースからページを生成する機能です。
ソース…… おいしそうですね。
多くのSSGでは、MarkDownとテンプレートをもとにページを生成するという手法をとっています。
MarkDownについての説明はめんどいので割愛します。
今回は僕もこの手法を使おうと思います。
そして、次が今回僕が作るやつの画期的なところです。
他の一般的なSSGは、決まったディレクトリにMarkDownのファイルを配置して、そのディレクトリに応じてテンプレートが選択され、HTMLが生成されるのですが、ここをもっと自由にしたい。
そこで、ソースコードを入れておくディレクトリに、生成後と全く同じディレクトリ構造でファイルを置くようにしました。
どのテンプレートを使うかは、MarkDownの中で指定しちゃおう。
これで、どんなサイトにも対応できます。
あとはまあ適当にプログラミングして、できました。
完成品
完成品をGithubで公開しました。
ぜひ使ってみてください。
使い方
ここに書くと長くなるので、GithubのREADMEを読んでください。
感想
今回これを作ってみて、改めて既存のSSGの凄さを思い知りました。
勉強します。