VuePress → GitHub Actions → GitHub Pagesで個人ブログ作る

# ポイント

VuePressで個人ブログを作った
GitHub Pagesで静的ページホスティング
GitHub Actionsで自動ビルド、push

# 動機

個人ブログを書きたくなった。特にネタはないけど。
markdownで記事が書けるタイプのウェブサイトビルダーならHugo (opens new window)とかHexo (opens new window)とかあるけど、Vue.jsが好きなので、そのプラグインであるVuePress (opens new window)を導入することにした。

ホスティングサービスは今のところネタも無いし多くのアクセス数も見込めないしということで、手っ取り早くGitHub Pagesで。

で、VuePressはHugoと比べてビルドがそこまで爆速ではないし、毎回記事修正するたびにビルドするのも手間なのでGitHub Actionsで自動化したくなった。

# VuePressでサイト作る

Introduction | VuePress (opens new window)

基本は公式のドキュメントどおりに作れば出来ます。説明終わり。

# サイトテーマ

サードパーティが提供しているいろんなサイトテーマがある。

このサイトはmeteorlxy (opens new window)を基本に作られているが、ところどころテーマのコンポーネントをカスタマイズした。

例えば記事本文上下の記事メタ情報領域や共有ボタン、コメント機能の埋め込みとか。また中華フォントから別のフォントに変更したり、翻訳ファイルを一部カスタマイズした。

以下を参考

テーマコンポーネントのカスタマイズ
- Theme Inheritance (opens new window)
翻訳のカスタマイズ
- Translate to your own language (opens new window)

# ブログに必要そうなプラグインを導入

# テーマにfont-awesomeを使う

Vueでfont-awesomeを使うにはコンポーネントを用意するのが良さそう。別記事でまとめる予定。

# markdownで記事を書く

markdown-it (opens new window)が入っているので、基本はその記法でok.

さらにmarkdownで書いた記事の中にVueコンポーネントを埋め込んだり出来るし、独自のカスタムコンテナを用意できる。

markdown記事内でVueコンポーネントを使う
- Using Vue in Markdown (opens new window)
カスタムコンテナを作る
- vuepress-plugin-container (opens new window)

# GitHub Pagesで公開

GitHub Pages について (opens new window)

公式ドキュメントを参考にして、ビルド内容をdocsに吐き出して、githubのレポジトリで設定したらok

ねんがんの　こじんぶろぐを　かいせつしたぞ！

# GitHub Actionsで自動ビルド、push

workflowはこんな感じ。

.github/workflows/main.yml

on:
  push:
    branches:
    - develop

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v1
    - name: Get yarn cache
      id: yarn-cache
      run: echo "::set-output name=dir::$(yarn cache dir)"
    - uses: actions/cache@v1
      with:
        path: ${{ steps.yarn-cache.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
        restore-keys: |
          ${{ runner.os }}-yarn-
    - name: Install Dependancies
      run: yarn --frozen-lockfile
    - name: Login To Github
      run: ./lib/git-login.sh
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        GITHUB_BRANCH: "master"
        GITHUB_USERNAME: "your-github-name"
        GITHUB_USEREMAIL: "your-github-email"
    - name: build to docs
      run: yarn build && echo 'your-domain' > docs/CNAME
    - name: Push To Github
      run: ./lib/git-push.sh

# 手順の概要

node-setup
nodeモジュールのキャッシュを探る
nodeモジュールインストール

gitログイン

git-login.sh

echo "set git config."
git config --global user.name "${GITHUB_USERNAME}"
git config --global user.email "${GITHUB_USEREMAIL}"

git remote set-url origin https://${GITHUB_USERNAME}:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git

git checkout -b ${GITHUB_BRANCH}
git branch -a

ls -la

サイトをビルド

dist以下を追跡し、master branchにforce push

git-push.sh

echo "git push."
git status
git add ./docs
git commit -m '[updater] update pdf.'
git push -f origin HEAD

GitHub Pagesは主ブランチの内容をホスティングするみたいなので、基本はmaster以外のブランチで作業して、masterにビルド内容をforce pushすることになった。致し方なし。

ともあれ、これでmdで記事書いてpushするだけで自動的にホスティングするようになった。めでたい。

# future works

このサイトは随時テーマやコンテナをカスタマイズする予定。

あとGitHub Pagesにこだわる必要もないので、そのうちホスティングサービスを別のに変えるかもしれない。