ブログサイトを作った話 (その1)

Gatsbyでブログサイト作ろうとしたときの懊悩とか苦悶とか。

長くなりそうなのでその1。

ちょっとHexoを触ってみた

  • 静的サイトジェネレータって何者
  • 有名どころ触って感触掴みたい
  • 公式サイトおしゃれ

ブログの作り方

  • 簡単に作れる
$ npm i -g hexo-cli
$ hexo init <folder>
$ cd <folder>
$ npm i

ディレクトリ構成

.
├── _config.yml   // 設定ファイル
├── package.json
├── scaffolds     // なんだこれ
├── source
|   ├── _drafts   // 草稿
|   └── _posts    // ブログポスト
└── themes

テーマ

  • 公式テーマ色々ある
  • GitHubで公開されてるものも使えるみたい

ブログポストの作り方

  • これも簡単
  • layoutはpost、page、draft (記事、固定ページ、草稿)
# 記事生成
$ hexo new [layout] <title>
# mdファイル編集しながら確認...
$ hexo server
# 記事のページ生成 (md -> HTMLの変換?)
$ hexo generate
# デプロイ
$ hexo deploy

設定ファイル

  • _config.yml
  • 簡単で書きやすい
  • new_post_name: :year/:month/:day/:title.md_posts/year/month/day/title.mdを生成とか
  • とにかく書きやすい

Gatybyに決めた

  • Hexoで静的サイトジェネレータの雰囲気がつかめた
  • のでもっかい調べる StaticGen
  • Ctrl(Command)+F JavaScript
  • Templates: Reactとかある…
  • でもHexoとかより圧倒的に星少ない…
  • そういえば最近O’REILLYの入門 React買った
  • やるしかない (絶対茨の道)
  • Ctrl(Command)+F React
  • GatsbyとPhenomicの2つ
  • 星多いしGatsbyにしよう

Gatsbyを触ってみた

  • まずはGithubのREADMEを読む
  • ファッツ
  • 取り敢えずGetting started
$ npm i -g gatsby
$ gatsby new my-site
$ cd my-site
$ gatsby develop # サーバー起動

Server started successfully!

Listening at:

   http://0.0.0.0:8000
  • http://localhost:8000見に行く
  • やったね!サイトできてる!
  • …で?
  • しょぼい
  • gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blogで公式?のテンプレートをもとにサイト作れる
  • それでもしょぼい
  • READMEだけじゃ無理ぽよなのでGatybeに関するブログとか探す

Gatsbyについて調べた

  • 「Gatsby 静的サイトジェネレータ」
  • MOONGIFT貴様いつも役に立たないな ( 冗談ダヨ)
  • てかすっくね…
  • React.js製の静的サイトジェネレーターGatsbyに移行した
  • めっちゃ参考になる… (というかほぼ丸パクリ)
  • 薄々感じてたけどGatsbyはテーマとか少なそう(というかほぼない)なので自分で全部作ることになりそう…

方針が決まった