ウラカタ勉強会 2016年9月度 静的サイトジェネレータを 利用してみよう！

Transcript

1. 静的サイトジェネレータを 利用してみよう！ ウラカタ勉強会 2016年9月度
2. 自己紹介 エンジニアの加藤大典です。 普段は主にPHPerとしてを開発を行なったり、 制作チームが捗るように、 制作環境の導入お手伝いとかしてます。 先日、スマホを水没させてスマホのない生活 を強いられています(´・ω・`)
3. 今日は Atomエディタの機能を利用しながら、Node.js で利用でき る静的サイトジェネレーター（GitBook, Hexo）を利用して みたいと思います。
4. 静的サイトジェネレーター Top Open-Source Static Site Generators - StaticGen https://www.staticgen.com/
5. GitBook 一番人気！ Modern book format and toolchain using Git and Markdown https://github.com/GitbookIO/gitbook 本来は GitBook でドキュメントを公開するためのもの。純 粋な静的サイトを作るのには向きませんが、PDF出力がで きたりするのでちょっとしたマニュアルなどに向きます。
6. GitBook インストール $ npm install gitbook-cli -g 雛形の作成 $ gitbook init
7. GitBook サーバー機能 $ gitbook serve
8. GitBook ページの追加 summary.md に Markdown のファイルを追加する HTMLの出力 $ gitbook build
9. GitBook PDFの出力には calibre をインストール $ brew cask install calibre PDF出力 $ gitbook pdf
10. GitBookのPDF • cover.jpg が表紙として使用される • デフォルトサイズA4縦で作成される • デフォルトでシステムフォントが使用される模様 • 外部URLだった画像は埋め込まれている • MarkdownではHTMLタグを使用可能
11. Hexo 2番人気！ A fast, simple & powerful blog framework https://hexo.io/ 読み方は ヘクソ？ WordPressのようなブログサイトが作れます
12. Hexo インストール $ npm install hexo-cli -g $ hexo init $ npm install
13. Hexo サーバの起動 $ hexo server
14. Hexo 投稿の作成 $ hexo new hirame source/_posts/hirame.md が作成されます
15. Hexo hexo-browsersync でブラウザの自動更新 $ npm install hexo-browsersync --save
16. Hexo 静的ファイルの作成 $ hexo generate public/ 以下に静的ファイルが出力されます
17. Hexo タグ、カテゴリは投稿に設定します categories: 海の魚 tags: - 高級魚 - 赤い魚
18. Hexo 設定ファイルは _config.yml • サイト名 • 公開URL、パーマリンクの形式 • ディレクトリ構成 • ページャー • テーマ など
19. Hexo 投稿ファイルのファイル名を日付ベースに変更 _config.yml new_post_name: :year-:month-:day-:title.md $ hexo new tai source/_posts/2016-09-29-tai.md が作成される
20. Hexo サイトマップを付けてみる $ npm install hexo-generator-sitemap --save
21. Hexo 固定ページの作成 $ hexo new page about source/about/index.md が作成される
22. Hexo メニューの追加 themes/landscape/_config.yml menu: Home: / Archives: /archives About: /about.html rss: /atom.xml
23. Hexo いろいろなテーマ https://hexo.io/themes/
24. Hexo テーマ Anisinaをインストールしてみる https://github.com/haojen/hexo-theme-Anisina $ git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/anisina
25. GitHubで公開 GitHubリポジトリは静的ファイルが公開できます • https://アカウント名.github.io/ • https://アカウント名.github.io/リポジトリ名/ ドキュメントルートは以下が選べます • gh-page ブランチ • master ブランチ • master ブランチの docs/ 以下
26. Hexo プラグインのインストール $ npm install hexo-deployer-git --save _config.yml deploy: type: git repo: branch: master
27. Hexo デプロイ $ hexo deploy
28. https://atom.io/ Atom
29. Markdown Preview 静的サイトの作成ではMarkdownを主に使用します。Atomの Markdown プレビュー機能が便利です。 • コアパッケージに含まれています • Ctl-Shift-m でプレビュー表示
30. Atom Html Preview さらっとHTMLを確認するときは便利 • Ctl-Shift-h でプレビュー表示 • CSSなどがサイトルートパス / または // で記述されていると 読み込めない。 https://atom.io/packages/atom-html-preview
31. Pdf View • Atomは標準ではPDFを開けないので、プラグインを入れる と便利。 • なんかちゃんと動いてないところもあるきがするけど、たま にサイズの大きいものを誤って開こうとしてがAtomが応答 無し。。なんてことも回避できる https://atom.io/packages/pdf-view
32. PlatformIO IDE Terminal ターミナルをAtomエディタに組み込めるので、Node.jsのコマン ド入力、出力結果確認には非常に便利です。 Settings > Core > Working Directory は Project のままで良い ですが、複数のプロジェクトやサブディレクトリに対応できる Active file がおすすめです。 https://atom.io/packages/pdf-view
33. スニペット • snippets.cson（File > Snippets）で定義します • スニペットが定義されているファイルで、prefix マッチした文 字列を入力するとスニペットが展開されます • セレクタの種類はファイルを開いて Alt-⌘-p • body に $1 などを登録するとカーソルジャンプ • Markdown は language-gfm プラグインを確認すると定義 されているスニペットが確認できます
34. ありがとうございました