create-react-appをインストールする

Node.jsがインストールされている環境で以下のコマンドを実行

1

npx create-react-app my-app

新しいプロジェクトが作成される

1

cd my-app

プロジェクトへ移動する

1

npm start

もしくは

1

yarn start

サーバーを起動
http://localhost:3000で表示されれば成功

続きを読む

Reactとは

• UIを構築するためのjsライブラリ
• コンパイルする必要がある(react-toolsなどを使う)
• JSXという記法でHTMLを書ける(JSXなしでもReactは利用できる)
• DOMを直接操作するのではなく、VirtualDOMに対して操作する
• 仮想DOMなので必要な部分だけが更新される
• React単体ではcssの機能はなく、CSS-Modulesなどを使う
• コンポーネント単位で部品を作っていく

続きを読む

Hugoとは

• 静的サイトジェネレーターで簡単にシンプルなブログが作れる
• GatsbyやHexoとは違いnode.js製ではない
• Go言語で作られている
• テーマが他の静的サイトジェネレーターより豊富
• データベース不要で、ページの表示が速い

続きを読む

git push

git push とはローカルで開発したものをリモートリポジトリに変更を反映するためのコマンド
GitHubでリポジトリを作成後手順通りpushしようとしたら、エラーや反映されてていないということが起こったのでメモしておく

続きを読む

Netlifyとは

Netlifyは静的Webホスティングサービスで、
GitHubやGitLAbなどと連携可能でGitHubなどで管理しておけば、Netlifyのサーバー上でHTMLに変換して公開してくれる
AWSとは少し違いサーバー管理不要でコンテンツを用意するだけでサイトを公開できる
URLも自動で割り当てられて、独自ドメインを設定することもできる
無料のSSL/HTTPSを提供している
無料枠はストレージ: 100GB、転送量: 100GB/月、リクエスト制限: 500 requests/分まで使用できる

続きを読む

GatsbyJSとは

• 静的サイトジェネレーターで簡単にシンプルなブログが作れる
• ReactJSを使っている
• Markdownの記事書いて、記事の作成もコマンドから行える
• node.js環境で動く
• SPA(Single Page Application)が作れる
• データベース不要で、ページの表示が速い
• GraphQLを使っている
• (starter)スターターが容易されていて、予め必要物がそろっているので色々なスターターを使えば自分好みにカスタマイズできる
  このように色々あるが、Hexoと同じような技術

続きを読む

Google Analytics とは

Google Analytics(アナリティクス)はGoogleが用意した、無料で使えるツールで、アクセスの解析ができます
簡単に言うと、訪問者数、滞在時間、どこから来たか、広告クリック数と収益、使用デバイスなどのデータを入手できる
データ計測のためにJavaScriptのコードを組み込む
スマホユーザーが多いかどうかや、訪問前のサイトを知ることで行動パターンを把握することができる

続きを読む

Google Search Console とは

Search ConsoleはGoogleが用意した、無料で使えるツールで、サイトの検索トラフィックや掲載順位を測定できる
簡単に言うと、サイトにエラーが出ていないか,サイトの表示回数、検索順位、訪問ユーザーが検索したワードやクリック数など確認できる
SEOの対策をする上でGoogleのガイドラインに適しているかどうかも大事なので、Webサイトを運営するなら必要なツール

続きを読む

GitHub プラン内容の変更

GitHubニュース記事

今までは無料ユーザーはコードを公開する必要があった
もし非公開にするならば、有料プランを選択しなければならなかったが
１月８日のアップデートにより、その制限はなくなった
最大3人の共同編集者と無制限にプライベート構成できるようになった

続きを読む

簡単なwebサーバーの作り方

1
2
3
4
5
6
7
8
9
10
11

//server.js
var http = require('http');
var server = http.createServer();
server.on('request', doRequest);
function doRequest(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.write("Hello World! sever-");
    res.end();
}
server.listen(3000, '127.0.0.1');
console.log("server runnnig");

続きを読む