LoginSignup
6
1

Upptime と GitHub, GitHub Actions で Status page を作成する

Last updated at Posted at 2022-07-10

はじめに

GitHub (の Issue) や GitHub Actions, GitHub Pages 等を利用し、Status Page を公開できる Upptime を設定してみました

また、この記事は「GitHub Actions の自分流の使い方をシェアしよう」のイベント記事です

Upptime の設定を行う

Repository の作成

以下 Repository の 'Use this template" をクリック Repository を作成します
作成する場合は、 Public Repository にすることを推奨します

GitHub Pages は GitHub Free の場合利用できません
Private レポジトリのまま利用したい場合は GitHub Pro 等の契約を行ってください。

GitHub Pages の有効化

Repository の Settings -> Pages から GitHub Pages を有効化します

github.com_mziyut_upptime_settings_pages(Nest Hub).png

有効化後 gh-pages branch の内容が適用されているか確認します

PAT を設定します

Upptime を動作させるための Personal Access Token (以下、PAT) を Repository 設定に追加します
環境変数名は GH_PAT で 必要な scope は以下の通りです

  • repo
  • workflow

PAT は以下 URL から生成できます

生成した PAT は Repository Settings -> Secrets -> Actions から設定します

github.com_mziyut_upptime_settings_secrets_actions(Nest Hub).png

監視設定を追加する

.upptimerc.yml を変更し監視設定を変更します

.upptimerc.yml
diff --git a/.upptimerc.yml b/.upptimerc.yml
index ef29512..4622fc5 100644
--- a/.upptimerc.yml
+++ b/.upptimerc.yml
@@ -1,22 +1,16 @@
 # Change these first
-owner: upptime # Your GitHub organization or username, where this repository lives
-repo: upptime # The name of this repository
+owner: mziyut
+repo: upptime

 sites:
-  - name: Google
-    url: https://www.google.com
-  - name: Wikipedia
-    url: https://en.wikipedia.org
-  - name: Hacker News
-    url: https://news.ycombinator.com
-  - name: Test Broken Site
-    url: https://thissitedoesnotexist.koj.co
+  - name: mziyut.com
+    url: https://mziyut.com

 status-website:
   # Add your custom domain name, or remove the `cname` line if you don't have a domain
   # Uncomment the `baseUrl` line if you don't have a custom domain and add your repo name there
-  cname: demo.upptime.js.org
-  # baseUrl: /your-repo-name
+  # cname: demo.upptime.js.org
+  baseUrl: /upptime
   logoUrl: https://raw.githubusercontent.com/upptime/upptime.js.org/master/static/img/icon.svg
   name: Upptime
   introTitle: "**Upptime** is the open-source uptime monitor and status page, powered entirely by GitHub."

※ 一部 Typo していたため Pull request は 2 つあります

Push した差分に応じて 定義されている Workflow が実行され自動でコミットされます

Update .upptimerc.yml #1 Fix baseUrl from uptime to upptime #2
github.com_mziyut_upptime_pull_1_w=1(Nest Hub).png github.com_mziyut_upptime_pull_2_w=1(Nest Hub).png

GitHub Pages を確認する

私の場合、Custom domain 等を設定していないため 以下 URL で確認することができます

Upptime で生成したページにはアクセスすると先ほど設定したサイトの status が表示されており

mziyut.github.io_upptime_(Nest Hub).png

設定したサイトの過去記録なども確認することができます

mziyut.github.io_upptime_(Nest Hub) (1).png

最後に

Upptime と GitHub Actions を使って簡単に Status Page を生成できました
スケジュール設定や、通知設定などはこれから設定していこうと思います

Reference

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1