More Related Content
Recently uploaded
Recently uploaded (12)
Featured
Featured (20)
Static Site Generatorライクな自作フレームワーク「Ususama」はWordPressと連携して新着情報を生成できるようです
- 1. Static Site GeneratorライクなStatic Site Generatorライクな ⾃作フレームワーク⾃作フレームワーク 「Ususama」は「Ususama」は WordPressと連携してWordPressと連携して 新着情報を⽣成できるようです新着情報を⽣成できるようです 2019/12/7(⼟) アルム＝バンド
- 2. ⾃⼰紹介⾃⼰紹介 HN: アルム＝バンド SNS等 @Bredtn_1et arm-band Qrunch: armband
- 3. アジェンダアジェンダ 1. 経緯 WordCamp Tokyo 2019 にて 補⾜: Static Site Generator 2. Ususamaについて Ususamaとは︖ 新着情報管理 3. 連携の仕組みについて アイディア 補⾜: Github Actions 4. 実装・実験
- 4. 1. 経緯1. 経緯
- 5. WordCamp Tokyo 2019 にてWordCamp Tokyo 2019 にて セッション: WPの運⽤保守 WPから静的サイトを⽣成(Shifter, Static Site Generator) スポンサーブース: マネージドクラウドサービス等
- 7. 補⾜: Static Site Generator補⾜: Static Site Generator デザインテンプレート ＋ .mdのコンテンツから静的サイトを⽣成 ⽣成(ビルド)環境が必要 例: Jekyll(Ruby), Hugo(Go), Hexo(Node.js), Gatsby(React.js) メリット: フロントエンドとバックエンドの分離 レスポンス速度 (リクエスト毎の動的⽣成ではないため) セキュリティ (バックエンドの隠蔽) デメリット: 動的コンテンツは⼯夫が必要 メールフォーム、関連記事へのリンク、ランキング、etc.
- 9. Ususamaとは︖Ususamaとは︖ 中⼩規模の静的サイト⽤ ⾃作フレームワーク コア: Gulpタスクの集合 ejs, Scss: コンパイル ＋ minify JS: minify 画像: 圧縮 ブラウザ: 表⽰・⾃動リロード Bootstrap4をテンプレートとして使⽤ 標準で新着情報管理の仕組みをサポート
- 10. 新着情報管理(デフォルト)新着情報管理(デフォルト) src/contents/ 下にナンバリングされた.mdファイルを配置 1ファイルから1記事 (htmlファイル) を⽣成 同時にnews<X>.htmlに⼀覧ページを⽣成 YAML Front-matter 対応 ejsやScssのテンプレート ＋ .mdのコンテンツで静的サイトを⽣成 Static Site Generatorの領域に踏み込みつつある…… --- layout: article.ejs title: ver.6.4.0-4.3.1 url: releasenote_ver_6_4_0-4_3_1 date: 2019-11-27T20:32:43+09:00 thumbnail: eyecatch.jpg excerpt: WordPress連 携 機 能 (β版 )を 追 加 --- WordPress連 携 機 能 (β版 )を 追 加 し ま し た 。 詳 し く は [専 用 ペ ー ジ ](../../wordpress.html)を 参 照 。
- 11. この「新着情報」をMarkdownからではなく、この「新着情報」をMarkdownからではなく、 WordPressの「投稿」から⽣成できないか︖WordPressの「投稿」から⽣成できないか︖
- 13. アイディア: 全体のフローアイディア: 全体のフロー ユーザが記事を投稿 ⾃動ビルド&デプロイしてサイトに反映 1. ユーザがWPに記事を投稿 アクションフックでイベントを拾って2.へ投げる 2. (どこかの環境にある) Ususamaへ ⾃動ビルドするようにイベント発⽕ 環境: Github Actions 3. Ususamaのejsコンパイル時にWPのデータを取得 WP REST API 4. Ususamaがビルドし終わったらWebサーバに⾃動デプロイ デプロイタスクはNode.jsのスクリプト(理由は後述)
- 14. アイディア: 全体のフロー(図)アイディア: 全体のフロー(図)
- 15. 補⾜: Github Actions補⾜: Github Actions GithubのCI/CD (Continuous Integration/Continuous Delivery) のための新サービス 11/13に正式リリース push等のイベントをトリガーにして、 Github上でタスクを実⾏ 例: mergeされたらDockerコンテナでビルドし、 テストを実⾏し、クラウドへデプロイする イベントトリガーに外部からイベントを受け取る repository_dispatchがある HTTP POSTでパラメータを投げ付けると発⽕
- 16. 4. 実装・実験4. 実装・実験
- 17. 実装.1 (WPからGithub Actionsのキック)実装.1 (WPからGithub Actionsのキック)
- 18. Githubの設定.1 (Personal access tokensの⽣成)Githubの設定.1 (Personal access tokensの⽣成) Github Actionsを外部からキックする認証情報(トークン) repo権限を付与
- 20. WPプラグイン (Karura-en)WPプラグイン (Karura-en) WPに⾃作プラグインをインストール・有効化 (Karura-en / 迦楼羅焔) ユーザID、リポジトリ名、Personal access tokensを設定 作り⽅は「 」の流⽤ 記事の更新・削除のアクションフックでPOSTする Githubの草を表⽰するウィジェットプラグイン
- 21. 実装.2 (Github ActionsでUsusamaを実⾏)実装.2 (Github ActionsでUsusamaを実⾏)
- 22. .github/workflows/build_deploy.yml.github/workflows/build_deploy.yml .github/workflows/にYAMLファイルを設置してリポジトリに pushすると動く onでrepository_dispatchを記述 jobs.build.steps[2].runに実⾏したいコマンドを記述 name: BuildandDeploy on: [repository_dispatch] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x] steps: ## 中 略 - name: npm install, build, and deploy run: | npm i -D npm run build npm run sowaka ${{ SECRETS.ftp_user }} ${{ SECRETS.ftp_passwor
- 23. 実装.3 (デプロイ)実装.3 (デプロイ)
- 24. .github/workflows/build_deploy.yml.github/workflows/build_deploy.yml Node.jsのJSとしてデプロイのスクリプトを記述 jobs.build.steps[2].runに上述スクリプトの実⾏を含める SECRETSでリポジトリに登録したSecretsをパラメータとして渡す npm scriptのパラメータ渡しよりもシンプルなのでNode.jsベース ## 略 - name: npm install, build, and deploy run: | npm i -D npm run build npm run sowaka ${{ SECRETS.ftp_user }} ${{ SECRETS.ftp_passwor
- 27. Github Actions実⾏Github Actions実⾏ リポジトリの「Actions」タブでタスクの成否/進捗度合を確認 少し時間がかかる
- 28. 🎉実験成功︕🎉🎉実験成功︕🎉
- 29. まとめまとめ 「 Ususama ＋ WordPress + Github Actions」 の組み合わせでWP更新と連動して ⾃動デプロイできるようになった
- 30. 課題.1課題.1 まだ実験的な機能 WPに制約が多い 抽出は「投稿」のデータのみ 固定ページの場合、URLやテンプレートをどうするか 画像はCDN前提 投稿内の画像取得・属性書換が上⼿く⾏かなかった ( srcset属 性 の 指 定 ) サイト内リンク⾮対応 パーマリンクが「投稿名」で⽇本語⼊⼒の場合ェ…… 現状は投稿ID+⽇付という形で回避 カテゴリアーカイブ⾮対応
- 31. 課題.2課題.2 パスワードやトークンの保存場所 FTPアカウント: Github Secrets Personal access tokens: WPプラグイン DB︖phpファイル︖