はじめに

皆さん始めまして. qwjyhという名前とかで活動しているものです. 特に書くことはないけど、なんとなくブログが欲しかったところで、無料でブログが作れるサービスを見つけたので始めてみました. とりあえず、このブログはどのようにしてできているのか、そのシステムについて書いてみます. あ、初志貫徹は最も苦手なことの一つなので、すぐにやめるかもしれないし、お金をかけることも嫌なので、ドメインまだ取得してないので、このままでは未来永劫読者0人ですね. 何やってるんだろ.

サービス

おもに利用しているサービスは、

  • Hugo
  • Netlify
  • GitHub

の3つで、これらはすべて基本無料です.

それぞれ簡単に説明すると、

HugoNetlifyGitHub
静的なサイトを生成してくれる静的サイトのホスティングサービスおなじみのコードシェアプラットフォーム

ちなみに、私はプログラミングの経験は言うまでもなく、特にweb系の知識・経験が全くない状態で始めました*1. なので、説明などは雑かもしれませんがその点ご了承ください.

作り方

環境

  • Windows 10 Home 1909 まだWSL2は使えません

手順

かいつまんで

事前準備(WSL環境)

  1. VS Codeをインストール
  2. WSLを有効化(WSL1)
  3. Ubuntu 18.04LTSをストアからインストール
  4. VS CodeをWSLにリモート接続させる

これらは、もともと競技プログラミング用にWindowsでC++の開発環境を整える過程でやっていたものです*2. いい記事があると思うので、それを参考にしてください. これによって、Windows上で疑似的にLinux環境*3を使えるようになり、また、編集などはVS Codeの通常の環境と同様に行うことができるようになります.

GitHubとNetlifyの準備

  1. GitHub, Netlifyのアカウントを作る
  2. Netlifyのチュートリアルは簡単なのでやっておいて損はない

Hugoのインストール, テーマの設定

HugoのチュートリアルはMac OS環境で説明されていて、インストールのページでもWindowsはなんかややこしそうだったので、WSL上でのLinuxで開発に取り組みます.

  1. Homebrewのインストール
  2. Hugoのインストール(チュートリアルと同じようにできます)
  3. (チュートリアルを1通りやるのもいいと思う)
  4. 新しくサイトを作る
  5. 新しく作ったディレクトリに移動してGitを初期化
  6. GitHubで新しいリポジトリを作って*4接続
  7. テーマを探す(Hugoのwebページにある)
  8. git submoduleでテーマをインストール(テーマの説明ページに方法が書いてあった)
  9. ウェブページを追加してローカルで起動してみる
  10. config.tomlの設定(名前とか、テーマそれぞれの固有の設定もある*5)
  11. チェックしたら、hugo -DでPublicsフォルダを生成
  12. gitのコミットとpush
  13. Netlifyの設定(GitHubのリポジトリを指定、URLも変えたければここで)
  14. config.toml(もしくはそれに類するもの)のbase urlをNetlifyのURLに変更

これでできてるはず

記事の追加

ここでは記事を追加する方法について

記事はhugo new <ディレクトリ>/<ファイル名>.mdで追加できます、ディレクトリはposts. そして、そのmdファイルの中に記事の名前や日時、草稿か否かなどの情報や、テーマで追加されるタグや目次の作成などの切り替えを指定します.

そのあとに、普通のMarkdownに従って文章を書けばそれが勝手に記事になります. ただ、markdownのsyntaxについては、テーマにもよるので*6, 詳しいことは、テーマのdemoページやGitHubのReadmeなどをみて、調べる必要があります.

記事が完成したら、draftをoffにして、hugo -Dしたあとに、GitHubにpushすれば、すぐに*7自動的にNetlifyのほうに反映されます.

これからの方針

現在私がやっているのはここまでで、今後は画像の挿入などに対応させたいと思っています. あと数式を使いたくなるかもしれないので、その時はほかのテーマへの乗り換えも視野に入れたいなと考えています. ま、これらが反映される確率はかなり低いと思いますが

*1 Gitの存在を知ったのは、LINEのbotを作ろうとしたときで、それ以来、DjangoとFlaskのチュートリアルを見様見真似でやったぐらいです.
*2 ちなみにほとんどやっていない. 熱しやすく、冷めやすい
*3 Linuxを使うのは、Hugoのインストールがめんどくさくなるからです.
*4 READMEがあるせいで接続ができず苦しんだ
*5 例えば私の場合は、ホームで表示するソーシャルアカウントの種類とリンクとか、タグやシェアの有効化など
*6 たとえば、KaTeXに対応したものもあった
*7 こういう系のサイトでは早いそうです. 私はほかのものを使ったことがないので、知りませんが