ブログ設置までのまとめ

このブログ設置までの手順。

# 前提

  • Mac
    • Win でもいける
  • Git
    • 最新版
  • npm
    • 最新版
  • GitHub
    • 新規リポジトリ作成済み

# vuepress インストール

VuePress コマンド。

npm i -g vuepress

# gh-pages インストール

GitHub-pages のためのデプロイコマンド。

npm i -g gh-pages

# theme「oueue」インストール

作るの面倒なので適当なテーマを持ってくる。
今回はこれ

git clone git@github.com:tolking/vuepress-theme-ououe-template.git
cd vuepress-theme-ououe-template

# 自分のリポジトリ用に初期化。

rm -rf .git
git init

ついでに公開用ブランチ(master)と編集用ブランチ(dev)に分ける。まず master を認識させる。

git add .;git commit -m "first commit";git push

次に dev ブランチを作る。master のファイルをすべて削除し、commit しておく。

git switch -c dev
git switch master
ls | grep -v -E '.git' | xargs rm -r
git add .;git commit -m "rm other files";git push

dev ブランチは公開用に push しないが設定などのバックアップを取る意味でも通常の push は行うこと。

# dev / build

package.jsonに下記の記述を追加。

  "scripts": {
    // ...
    // -dでpushするディレクトリを指定
    // -bでリモートのどのブランチにpushするかを指定
    "push": "gh-pages -d dist -b master",
    // yarn用デプロイ
    "deploy": "yarn build && yarn push",
    // npm用デプロイ
    "ndeploy": "npm run build && npm run push"
  }

yarn なら

yarn deploy

npm なら

npm run ndeploy

でビルドしつつ本番公開用の master に push できるようになる。

# 設定などをいじってみる

./vuepress/config.jsでは簡易的にもろもろの値を設定できる。head 内の外部ファイルの読み込みなども指定できる。

module.exports = {
  title: "ほげほげ",
  description: "なんたらかんたら",
  base: "",
  dest: "dist/",
  theme: "ououe",
  head: [
    [
      "link",
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css?family=M+PLUS+1p"
      }
    ]
  ],
  themeConfig: {
    defaultTheme: {
      dark: [10, 12]
    },
    showThemeButton: false,
    cover: "/images/cover.jpg",
    //logo: '/logo.png',
    search: false,
    backgroundImage: false,
    pageGroup: 12,
    postTime: {
      createTime: false,
      lastUpdated: false
    },
    nav: [
      {
        text: "Top",
        link: "/"
      },
      {
        text: "Posts",
        link: "/posts/"
      },
      {
        text: "Tags",
        link: "/tag/"
      },
      {
        text: "About",
        link: "/about/"
      }
    ],
    footer: [
      {
        text: "Github",
        link: "https://github.com/g-empr"
      }
    ]
  }
};

./vuepress/styles/index.styl は全体のカスタムスタイルを記述する stylus ファイル。
テーマ自体の css をいじらなくてもここである程度見た目を変えることができる。

body
  background #fff

あとは好きにいじってデプロイして完成。

-完-

WSLやっとセットアップ

WSLやっとセットアップ

/mnt/c、お前だったのか。タスクを busy にしていたのは。

新ブログ設置

新ブログ設置

ブログ新規開設。(3 度目)