Portfolio

# vuepress×gitpages 基本

# 前提

  • github アカウント所有
  • bash 環境での操作
  • nodejs インストール済み

# github 上での操作

# github にログイン

github (opens new window)

# 以下名称でリポジトリ作成

[自分のユーザ名].github.io

WARNING

free 版のユーザはパブリックリポジトリを選択しなければ後述の手順で web サイトを公開できないので注意

# ローカル PC での操作

# 準備

gitpush 用モジュールをグローバルインストール

npm install -g gh-pages

ローカル（ここでは自分のホームディレクトリ配下）にプロジェクトフォルダ作成し移動

mkdir ~/website && cd ~/website

github 上で作ったリポジトリをクローンし移動

git clone https://github.com/[自分のユーザ名]/[自分のユーザ名].github.io
cd [自分のユーザ名].github.io

# セットアップ

プロジェクト作成、vuepress 及びプラグインインストール

npm init -y
npm install vuepress
npm install @vuepress/plugin-back-to-top @vuepress/plugin-active-header-links @vuepress/plugin-google-analytics

vuepress 用スクリプト設定

vi package.json

  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src",
    "deploy": "gh-pages -d src/.vuepress/dist -b master"
  },

ignore 設定

echo 'node_modules' >> .gitignore
echo 'src/.vuepress/dist/' >> .gitignore

必要ディレクトリ、ファイル作成

mkdir -p src/.vuepress/styles/ src/.vuepress/components
touch src/.vuepress/config.js src/.vuepress/styles/palette.styl src/.vuepress/styles/index.styl src/.vuepress/components/DocHeader.vue
echo '# top' > src/README.md

# ローカル動作確認

開発環境で確認

npm run dev

（接続 URL）

http://localhost:8080/ (opens new window)

問題なければビルドを実施

npm run build

WARNING

github pages に独自ドメインを設定している場合で、本ページ記載の手順で本番へ反映させると、独自ドメインの設定が外れてしまう。 そのため、独自ドメインを設定している場合は、以下のような形で build コマンドを修正し、build 時に CNAME ファイルを作成する形で対応が必要となる。

vi package.json


 



  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src && echo 「設定する独自ドメイン」 > ./src/.vuepress/dist/CNAME",
    "deploy": "gh-pages -d src/.vuepress/dist -b master"
  },

# 本番へ反映

DETAILS

github pages にて web で公開されるブランチは master としている。 リポジトリの最上位のディレクトリにビルドした index.html を置く必要があり、 vuepress の build コマンドではリポジトリ直下に index.html を吐き出すことができない為、 gh-pages を使用し、別ブランチでビルドしたソース一式を github 上の master ブランチに直接 commit をしている。 その為、基本的にローカルで master ブランチに切り替えることはない。

master へ初回 git アドコミットプッシュ

git add .
git commit -m 'init'
git push origin master

ソース変更用ブランチ作成

git branch develop
git checkout develop
git push origin develop

github へプッシュ

npm run deploy

（接続用 URL）※独自ドメインを設定してない場合。

https://[自分のユーザ名].github.io/

# サイト構成設定（例）

config.js を編集

module.exports = {
  //タイトル
  title: "test site",
  //プラグイン（お好みで）
  plugins: [
    "@vuepress/back-to-top",
    "@vuepress/plugin-active-header-links",
    [
      "@vuepress/plugin-google-analytics",
      { ga: "トラッキングID※GAスクリプトの「UA-xxxxxxxx-x」の部分" },
    ],
  ],
  themeConfig: {
    //ナビ
    nav: [
      { text: "top", link: "/" },
      { text: "contents", link: "/contents/" },
    ],
    //サイドバー
    sidebar: "auto",
    //最終更新日取得
    lastUpdated: "最終更新日",
  },
};

コンテンツ用フォルダ作成

mkdir src/contents
echo 'contents text' > src/contents/README.md

# スタイル設定（例）

palette.styl を編集

$accentColor = #aac

index.styl を編集

h1 {
  border-bottom: solid 2px #488;
}
最終更新日: 11/6/2021, 4:42:17 PM