簡単セットアップ!Netlifyにステージング環境を追加する方法
今回は Netlify にステージング環境を追加する方法 について解説したいと思います!
Netlify では、簡単にステージング環境を追加する事ができます。
GitHub と連携する場合であれば、GitHub にステージング用のブランチを追加して、Netlify の設定ページで公開用ブランチを追加するだけでステージング環境が出来てしまします。
おまけに、デフォルトでプルリクごとのプレビューも自動で用意されている という( ゚Д゚)ガクガク
それでは、早速、Netlify にステージング環境を追加する方法を解説していきます。
目次
- 目次
- はじめに
- 簡単な流れ
- GitHub リポジトリに staging ブランチを追加
- Netlify で staging ブランチの公開設定
- 全てのブランチを公開する場合
- 個別にブランチの公開設定をする場合
- ステージング用のページを確認!
- プルリクのプレビューチェックもできる!
- まとめ
Netlify + GitHub 環境で簡単にサイトを公開する方法
今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います!
「 Netlify 」は静的コンテンツのホスティングサービスです。
GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。
サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。
その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。
目次
- 目次
- 簡単な流れ
- 公開用の GitHub リポジトリの作成
- リポジトリ作成 & クローン
- 公開用のブランチを作成
- 公開用ファイルを追加
- コミット & プッシュ
- Netlify で公開設定
- Netlify に登録
- サイトの公開
- Netlify のインストール
- 公開リポジトリの選択
- 公開したいリポジトリが表示さない場合は...
- デプロイ設定
- 公開するブランチの選択
- 公開用ディレクトリの設定
- サイト公開
- 公開サイトの確認
- 内容の変更チェック
- 公開URLの調整
- まとめ
npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc.
npm パッケージの公開用テンプレート を作ってみました。
本記事ではテンプレートの内容について、簡単に解説したいと思います。
以下は、2020/07/09 時点でテンプレートに含まれる内容です。
- TypeScript
- CI/CD (publish by GitHub Actions)
- Jest
- ESLint
- Prettier
- EditorConfig
- husky
※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。
続きを読む【GitLab】GitHubリポジトリをGitLabプロジェクトにインポートする方法
今回は GitLab プロジェクトに GitHub リポジトリをインポートする方法 を紹介したいと思います。
大雑把な流れとしては、「 GitHub でインポート用のアクセストークンを生成 > GitLab でインポート設定」 といった流れです。
GitLab でインポート設定は GitHub で生成したアクセストークンを入力するだけなので、とくに難しい設定はありません。
目次
- 目次
- GitHub でインポート用のアクセストークンを生成する
- GitLab でインポートの設定をする
- まとめ
【VS Code】Remote Development テンプレートを作ってみました!
「Visual Studio Code」の「Remote Development」用のテンプレート を作ってみたので、簡単に紹介したいと思います。
主にテンプレートの使い方について解説していきます。
続きを読む人気のディープラーニングフレームワーク3つを比較 / PyTorch, Keras, TensorFlow
ディープラーニングフレームワークを使ってみようと思い、人気の3つのフレームワークを比較 してみました。
今回は、比較した内容を簡単にまとめてみたいと思います!
比較したフレームワークは以下の3つです。
- PyTorch
- Keras
- TensorFlow
※ モバイルからだとグラフが表示されない事があります。上手く表示されない場合はPCからのアクセスを試してみたください。
続きを読む【Selenium】docker-seleniumでVNCパスワードを変更してみる!
今回は、docker-seleniumでVNCパスワードを変更する方法を紹介したいと思います。
続きを読む【Selenium】docker-seleniumでユーザデータを永続化してみる!【Chrome】
今回は、docker-seleniumでユーザデータを永続化する方法 を紹介したいと思います。
続きを読むPhpStorm(またはWebStorm)でESLint設定でリフォーマットしたい時の設定メモ
ここのところ、Nuxt.jsを試しているのですが、PhpStorm環境でコーディングしていると、コード中にESLintからのエラーメッセージがあふれます。
敬愛するPhpStormさんなら、ReformatショートカットでESLintのフォーマットでReformatしてくれるかと期待しましたが、残念ながら適用されず。
ESLintフォーマットで調整したものをうっかりReformatしてしまうと、ESLintフォーマットが破棄されてPhpStormで設定しているフォーマットでRefomatされてしまします(´・ω・`;)
なんとか、ESLintでReformatしてくれないものかと、情報を探していたら、以下のページを見つけました。
How to make WebStorm format code according to eslint?
以下、ESLintフォーマットでReformatしたい時の対処法です。
ESLintの設定
ESLintの設定をしていない場合は、ESLintの設定をする。
- 設定を開いて、
Preferences > Language & Frameworks > JavaScript > Code Quality Tools > ESLint
を開く。 - ESLintの設定が
Disable ESLint
の場合は、Automatic ESLint configuration
に設定するか、Manual ESLint configuration
で手動設定する 。
ショートカットの設定
Reformat Code
に設定されているショートカットキー(Windowsの場合はCtrl+Alt+L
)をFix ESLint Problems
に変更します。
- 設定を開いて、
Preferences > Keymap
を開く - Keymap設定内の検索で
eslint
で検索 Fix ESLint Problems
を右クリックしてAdd Keyboard Shortcut
を選択Ctrl+Alt+L
を設定Reformat Code
のショートカットの削除確認メッセージが表示されるので、Remove
を選択。
まとめ
まだ、設定してからそれほど時間がたっていませんが、とりあえず、ショートカット1つであふれかえるエラーが一瞬で消えるのは気持ちがいいです(੭ु´・ω・`)੭ु⁾⁾
Next.js テンプレートを作ってみました | with TypeScript, Jest, Cypress, Sentry, GTM, ESLint, etc.
Next.js 用のテンプレート を作ってみたので、テンプレートの内容について、簡単に解説したいと思います。
2020/06/02 時点でテンプレートに含まれる内容は以下の通りです。
- Next.js
- TypeScript
- Googleタグマネージャー
- CI/CD (GitHub Actions + Netlify)
- Jest (+ Enzyme)
- Cypress
- ESLint
- Prettier
- stylelint
- EditorConfig
- husky
- Material-UI
- styled-components
- Sentry
※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。
続きを読むGoogleアナリティクスがうまく動かなかったときのメモ
「Google アナリティクス」を使おうと思ったら、うまく動かなかったので、その時の対応をメモとして残したいと思います。
続きを読むはてなブログ記事のGitHub管理環境「push-to-hatenablog」のセットアップと使い方
しばらく、はてなブログから離れていましたが、絶賛、復帰検討中です!
復帰にあたり、GitHubではてなブログの記事を管理できないかと調べていた所、blogsyncというツールを使えばうまく行きそうだったので、試しに記事管理用の環境を作ってみました。
本記事では、作成した環境push-to-hatenablogのセットアップと使い方を解説したいと思います。
push-to-hatenablogの中身については、別記事で投稿予定です。
目次
簡単な流れ
まずは、push-to-hatenablogと、その中で使用しているblogsyncについて簡単に紹介したいと思います。
その後、push-to-hatenablogのセットアップ方法と使い方について解説していきたいと思います。
「blogsync」とは?
はてなの中の人が公開されている、はてなブログ用のCLIクライアントです。
はてなブログで提供されているAtomPub APIをラップして、はてなブログの記事を投稿、更新、取得をコマンドラインから行えるツールです。
詳細は以下のリポジトリを参照してください。
「push-to-hatenablog」について
今回紹介するpush-to-hatenablogでは、ローカル環境でDockerを使って、はてなブログ記事の取得と新規投稿を行います。
また、記事管理用のGitHubリポジトリを作成し、GitHubアクションを使って、編集・プッシュされた記事の更新を行います。
必要な環境
- Docker
- docker-compose
セットアップ
記事管理用のGitHubリポジトリを追加
それでは、早速、はてな記事の管理環境をセットアップしていきます。
まずは、記事管理用のGitHubリポジトリを追加してください。
push-to-hatenablog をクローン
以下のリポジトリをクローンして、リモートリポジトリを記事管理用に作成したリポジトリに変更するか、クローンしたファイルをローカルリポジトリに移動・設置してください。
blogsync.yaml
の追加
blogsync
の設定ファイルblogsync.yaml
を追加します。
ここで追加する設定ファイルは、ローカル環境から新規記事を投稿するときに使用します。
blogsync.example.yaml
のファイル名をblogsync.yaml
に変更してください。
blogsync.example.yaml
の中身は以下の通りです。
[ブログのドメイン名]: username: [ユーザ名] password: [AtomPubのAPIキー] default: local_root: entries
[ユーザ名]
には、はてなアカウントのユーザ名を設定してください。
[AtomPubのAPIキー]
には、はてなブログ管理ページの設定/詳細設定/AtomPub
にあるAPIキーを設定してください。
blogsync.yaml
のより詳しい内容は、以下のページを参照してください。
x-motemen/blogsync #Configuration
Secretの追加
記事の更新には、GitHubアクションを利用します。
ワークフロー中で必要になるSecretを設定していきます。
※ Secretsの設定は、追加したGitHubリポジトリページのSettings/Secrets
から設定できます。詳細は以下のページを参考にしてください。
記事の更新時に以下の2つのSecretが必要となりますので、GitHubリポジトリに追加してください。
DOMAIN
DOMAIN
という名前のSecretを追加してください。値にはブログのドメイン名を設定してください。
BSY
BSY
という名前で以下のような値のSecretを追加してください。
[ブログのドメイン名]:\n username: [ユーザ名]\n password: [AtomPubのAPIキー]\n default:\n local_root: entries
ワークフロー中でblogsyncの設定ファイルを生成するために使用します。
ローカル用のblogsync.yaml
とほぼ同じ内容ですが、各行の最後に改行コード\n
を追加してあります。
ローカル用のblogsync.yaml
と同様に、[ブログのドメイン]
、[ユーザ名]
、[AtomPubのAPIキー]
を書き換えたものをSecretの値に設定してください。
「push-to-hatenablog」の使い方
記事の取得
既にはてなブログに投稿済みの記事をローカル環境にダウンロードするには、以下のコマンドを実行してください。
docker-compose run --rm blogsync pull ${domain}
${domain}
にはブログのドメイン名を指定してください。
注意事項
記事取得はmasterブランチで行うようにしてください。
記事の取得前に使用中のブランチがmasterブランチであるか確認し、ブランチがmaster以外の場合はmasterブランチに切り替えてください。
はてなブログの更新はmasterブランチからの差分ファイルを対象としています。 masterブランチをプッシュした場合は、差分ファイルがないため更新処理が行われません。
逆に、masterブランチを利用する事で更新処理を回避することもできます。
記事数が多いと、はてなブログの更新に時間がかかります。 また、記事の取得処理で取得した記事については更新の必要がないので、記事の取得はmasterブランチで行い、記事の更新処理を回避するようにしてください。
特に初回の記事取得など、記事の取得数が多い場合はmasterブランチで取得するようにしてください。
新規記事の投稿
新規記事を投稿するには以下のコマンドを実行してください。 以下のコマンドにより、はてなブログとローカル環境に記事の下書きが追加されます。
docker-compose run --rm blogsync post --title=draft --draft --custom-path=${path} ${domain} < draft.md
${domain}
にはブログのドメイン名を指定してください。
${path}
には記事のパスを指定してください。
例: it/javascript/react-introduction
${path}
に設定した記事のパスは、公開後の記事のパスに反映されます。
また、ローカル環境に追加される編集用ファイルのパスに対しても、${path}
に設定した内容が反映されます。
記事の更新
編集した記事ファイルをGitHubへプッシュすると、GitHubアクションの更新ワークフローによって、はてなブログの記事が更新されます。
GitHubアクションのワークフロー設定の内容は以下を確認してください。
mm0202/push-to-hatenablog/.github/workflows/push.yml
注意事項
記事の編集前にブランチをmaster以外のブランチに切り替えてください。
その際、masterブランチからの差分ファイルが更新対象となりますので、記事の編集はmasterブランチ以外で行う必要があります。
まとめ
以上、push-to-hatenablogのセットアップと使い方について解説しました。
私自身も使い始めたばかりですが、そこそこいい感じに使えそうな気がします。
しばらく使ってみて投稿・更新フローが固まってきたら、使用例の紹介記事を書きたいと思います。
また、近いうちにpush-to-hatenablogの中身についての解説記事も投稿予定です。
動作不良や、問題点・疑問点など有りましたら、コメントより指摘していただけると助かります!
React + Cypress で「Timed out retrying: `cy.type()` failed because this element is detached from the DOM.」みたいなエラーが出たときの対処法
React + Cypress で、テキストエリアへの入力チェックを使用としたところ、以下のようなエラーが発生しました
Timed out retrying: `cy.type()` failed because this element is detached from the DOM.
今回は上記のようのエラーが発生した場合の対処方について解説したいと思います。
続きを読む