masterブランチにpushしたのにGitHubPagesが404の時に確認すること

GitHubPages、とっても便利ですが、デプロイしたはずのページで404が出ることがありその時に確認した内容をまとめました。

【1】公開設定をしているか確認する。

GitHubPagesは、masterブランチの静的ファイルを自動で公開してくれますが、公開したいリポジトリにGitHubPagesを使用する設定をしないと公開してくれません。デフォルトは非公開です。 なので、リポジトリのSettingsのGitHubPages項目内のSourceがnoneになっていないか確認しましょう。noneの場合は非公開に設定されてますので、master branchまたはmaster branch /docs folderを選択しましょう。静的ファイルがdocsディレクトリに入っていない場合は前者を設定して下さい。

【2】 index.htmlが配置されているか確認する。

今度書く

【3】pushしているか確認する。

commitだけしてpushを忘れていませんか?リモートリポジトリのmasterブランチのcommit履歴を確認して、pushされているか見ましょう。pushコマンドは打ったけどエンターキー押し忘れてるかもしれません。

【4】pushした内容がpendingになっていないか確認する。

GitHub上でmasterブランチのコミット履歴をみれますが、GitHubPagesへのデプロイ処理が完了するとコミットメッセージの右側に緑色のチェックが付きます。ここが黄色い丸だと、デプロイ処理中ですので、緑色のチェックが付いているか確認しましょう。黄色い丸だった場合は、緑色のチェックが付くまで待ちましょう。

【5】ブラウザのキャッシュを削除する。

今度書く

【6】ちょっと時間を置いてみる。

ここまできたら私には分かりませんので、少し時間を置いてから、意図した表示がされるか確認してみてください。

webpack4とbabelだけのプロジェクトのwebpack.config.jsを置いておきます

最近Nuxt.jsを使った自由帳みたいなGitHubリポジトリにコミットしてたんですが、Nuxt.jsのプロジェクトにbabelを導入できる気がしなかったので(情弱)、純粋にwebpackとbabelだけを使ったプロジェクトを作って動かしてみました。

webpackは前の会社で使ったことがあったんですが、その時webpack.config.jsでハマりまくって、今回ももちろんはまりました。似たような人きっといると思うので貼っておきます。

ちなみに

  • path:絶対パスを定義しています。configファイル内は相対パスを書きたかったので定義しました。
  • entry:エントリーポイントの設定。エントリーポイントはモジュール間の依存関係の解析を開始する地点のことです。javaでいうとmainメソッドがあるクラスのファイル名を定義します。
  • output:トランスパイルしたファイルを吐き出すディレクトリを定義します。filenameは、トランスパイル後のファイル名です。[name]ってやるとトランスパイル前のファイル名と同じになります。
  • moduleのrules:babelを使うよって定義します。
  • moduleのrulesのexclude:ローダーの処理対象から外すディレクトリを指定します。
  • resolveのextension:ビルド対象のファイルの拡張子を設定します。
  • mode:developmemtやproductionと設定でき、それぞれを設定することで利用できる機能があったりします。

webpack.config.js

const path = require('path');

module.exports = {
    entry:{
        'application':'./source/es2015/application'
    },
    output:{
        path:path.join(__dirname, '/distribution/javascript'),
        filename:'[name].js'
    },
    module: {
        rules: [
          {
            test:/¥.js/,
            exclude:/node_modules/,
            use: 'babel'
          },
        ]
      },
      resolve: {
        extensions: ['.js'],
      },
    mode:'development',
};

.babelrc

{
    "presets":["es2015"]
}

参考にした記事

webpack+babel環境でフロントエンドもES6開発を参考にして進めたものの、webpackのバージョン4を使用していたためwebpack.config.js内の記法が異なったため、webpack4に更新した時にこけた所まとめ【意訳】Webpackの混乱ポイントを参考にしてwebpack.config.jsの修正や.babelrcの追加を行いました。

CSSで使用するクラス名の頭文字を数字にするとクラス名として認識されなかった

これだと認識されなくて、

<html>
 <div class="5game">
 </div>
</html>

<style>
.5game{
 background:yellow;
}
</style>

これだと認識された。クラス名の最初の文字は数字にできないんですね。

<html>
 <div class="fivegame">
 </div>
</html>

<style>
.fivegame{
 background:yellow;
}
</style>

未コミットのファイルはどうでもいいからチェックアウトしたい

git checkout --force ブランチ名

でできた。 なお、チェックアウト前のブランチの、未コミットのファイルの変更は破棄されてしまうので注意。変更はどうでもいいからチェックアウトしたいときに楽できます。

コマンドから起動したwebpack dev server をstopさせる

WindowsでもMacでもcontrol + Cで止められます。commandではなくcontrolです。(重要)command+Cでやっててできねぇ〜〜〜ってやってた。

C#で調歩転送方式の時の転送速度を求めるソース書いた

暇だったのでpaiza.ioで書いた。変数名はどうしようもなかったから諦めた。パースして詰め直しているところがいけてない。

using System;

public class TensouSokudoLogic{
    
    const string QUESTION = "転送速度:";
    const string UNIT = "秒";
    
    public static void Main(){
        //入力値:信号速度(bps)、調歩同期方式の1文字あたりのビット数、送信する文字数を半角スペース区切りで渡す
        string input = System.Console.ReadLine();
        string[] inputs = input.Split(' ');
        
        if(inputs.Length != 3){
            System.Console.WriteLine("input literals are not enough or too many.");
            return;
        }
        
        decimal[] parseInputs;
        try{
            parseInputs = new decimal[]{
              decimal.Parse(inputs[0]),
              decimal.Parse(inputs[1]),
              decimal.Parse(inputs[2])
            };
        }catch(Exception e){
            System.Console.WriteLine("may be you failed to parse input literals.");
            return;
        }
        
        System.Console.WriteLine(QUESTION + TensouSokudoLogic.getTensouJikanPerSecound(parseInputs[0], parseInputs[1], parseInputs[2]) + UNIT);
    }
    
    public static decimal getTensouJikanPerSecound(decimal shingouSokudo, decimal mojiBit, decimal soushinMojiCount){
        decimal mojiBitFromChouhoDoukiHoushiki = 1 + mojiBit + 1;
        decimal answer = ( soushinMojiCount * mojiBitFromChouhoDoukiHoushiki ) / shingouSokudo;
        return answer;
    }
}