# vuepress ブログテーマ基本（gitlab pages にホスティング）

# 前提

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

# gitlab 上での操作

# gitlab にログイン

gitlab (opens new window)

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

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

なお、リポジトリは private でも特に問題ない

# ローカル PC での操作

# 準備

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

git clone https://gitlab.com/[自分のユーザ名]/blog.git && cd blog

# セットアップ

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

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

vuepress 用スクリプト設定

vi package.json

  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
  },

ignore 設定

echo 'node_modules' >> .gitignore
echo 'public' >> .gitignore

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

mkdir -p docs/.vuepress docs/_posts
vi docs/.vuepress/config.js

module.exports = {
  dest: "public",
  hostname: "http://localhost",
  id: "post",
  dirname: "_posts",
  path: "/docs",
  title: "ブログ",
  theme: "@vuepress/theme-blog",

  themeConfig: {
    nav: [
      {
        text: "トップ",
        link: "/",
      },
      {
        text: "タグ",
        link: "/tag/",
      },
    ],
    footer: {
      copyright: [
        {
          text: " Copyright ©",
          link: "",
        },
      ],
      contact: [
        {
          type: "github",
          link: "",
        },
        {
          type: "twitter",
          link: "",
        },
      ],
    },
  },
};

# 記事コンテンツ作成

以下のようなメタ情報をヘッダーに入れた、任意のファイル名の md ファイルを_posts 配下に入れる
（タグやパーマリンクが作成され、トップページに記事へのリンクが表示される）

vi docs/_posts/test.md

---
title: 記事タイトル
date: 2020-01-01
tags:
  - tag1
  - tag2
author: myuser
location: tokyo
---

# test

hogehoge

# ローカル動作確認

npm run dev

（接続 URL）

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

# CI/CD 用ファイル作成

vi .gitlab-ci.yml

config.js の設定内容

image: node:current-alpine

pages:
  stage: deploy
  cache:
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - public
  only:
    - master

# 本番へ反映

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

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

CI/CD が動くので gitlab 上からステータスなどを確認する。正常終了していたら以下にて接続確認

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

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

WARNING

この時点では自分しかサイトを見えない。（gitlab にログインしているブラウザ以外からは見えない）

そのため、web 上に公開したい場合は、設定メニューよりページを公開する作業が必要となる。

https://docs.gitlab.com/ee/user/project/pages/pages_access_control.html

# 独自ドメイン

独自ドメインの設定については公式のページを参照

https://www.gitlab.jp/blog/2020/06/29/how-to-use-gitlab-pages/