Tag: Webサイト

Webサイト制作　開発環境構築（Local環境）の流れ

備忘録です。

環境・前提

下記の環境・前提で開発しています。

  • Mac OS Monterey 12.1
  • Google Chrome  101.0.4951.54（Official Build） （arm64）
  • VSCode
  • Git管理

免責

仕事としてのWebサイト制作業務経験は多くなく、初学者です。

ドメイン名・サーバの確認

※ドメイン名とサーバがどのようにローカル環境に関わってくるか

 

ディレクトリを作成

デスクトップやDocumentsの中など、任意の場所にプロジェクトフォルダを作成します。

ネーミングは[projectname_frontend]などのようにしています。

例：

  • NPO法人Xのフロント作成の場合　… npox_frontend
  • 株式会社Yのバックエンド作成の場合　… y_backend

VSCodeで開く

VSCodeを起動し、⌘+Oから作成したプロジェクトフォルダを選択。

まだ何もない状態

New Fileを選択したらindex.htmlを作成します。

作成したhtml内で半角!を入力し、tabキーを押下するとhtmlのフォーマットが出てくるはずです。

あるいはHTMLテンプレートのBoilerplateを使っても良いと思います。

https://html5boilerplate.com/

langをjaに変更、title入力など現時点でわかる箇所を入力し、保存（⌘+S）。

全体の骨組みだけ先にマークアップしておきます。

VSCodeの場合は（htmlファイル内で）下記画像の状態でEnterキーを押すとHTMLに変換してくれます。省エネ！

VSCode成形前
VSCode成形後

ざっくり枠組み

<div id="wrap" class="st-wrap">
  <header id="header" class="sp-header">
     <h1 class="sp-header-logo">
       <a href="">
         <img src="" alt="" />
       </a>
     </h1>
     <p>test view</p>
  </header>

  <main id="container" class="sp-container"></main>

  <div class="sp-pagetop js-scrolltop" style="display: none"></div>

  <footer id="footer" class="sp-footer"></footer>
</div>
ちなみに保存したプロジェクトを素早くブラウザで確認するためのプラグインがあります。下記にまとめましたので、気になる方はぜひ。
https://nolyc.net/programming/vscode-live-server/

git管理

チームで分業したりしているとgit管理が必要になります。そうでなくても、一通りコーディングを終えた後にやっぱり前のバージョンに戻したい！という時があるので、私はどのプロジェクトでもgit管理はしておくことにしています。
会社ではbacklogを使用していますが、個人の方であればgithub（非公開）で管理するなどすれば良いと思います。
githubでのやり方は下記にまとめました。
https://nolyc.net/programming/git-connect-localtoremote/
上記記事ではSourceTreeを使用したGit管理方法を記載していますが、何もSourceTreeを使用せずともGit管理はVSCode上でできます。
https://code.visualstudio.com/docs/editor/versioncontrol
ここでは詳しい操作は省きますが、気になる方はググってみてください。
私が行った手順は以下の通りです。

VSCode上でのGit初期化

赤のアンダーラインが実行コードです

VSCode上でのGit初期化
VSCode上でのGit初期化
  1. VSCode上で⌘ + jでターミナルを開き
  2. cd ディレクトリパス（パスはVSCodeのフォルダ名を選択しOption + ⌘ ＋Cで取得できる）で該当ディレクトリに移動
  3. gitを初期化(git init)
  4. ブランチ名を変更（git branch）
  5. 現在のワークツリーの内容を全てindexに追加（git add *）
  6. コミット（git commit -m ‘first commit’）

GitHubへのリモートリポジトリへのpush方法は先ほど紹介した記事「[git]すでに作成したフォルダをgit管理してリモートと紐付け」にも書きました。

 

以降、随時アップデートしていく予定です。