eyecatch

作成日:2020-05-01 / 更新日:2020-05-09

世の中にブログは数多くありますが、その仕組みとして一番を多く稼働しているのはwordpressではないでしょうか。商用から個人まで、星の数ほどのブログがwordpressで稼働しているように思います。 いろいろなプラグインもあって使いやすいのですが、いろいろと面倒なことも多いです。

個人的に気になるのは、DB利用という点。セキュリティインシデント対応(脆弱性対応)など、それなりの頻度で実施しておかないと、乗っ取りされる可能性もあり、気になるポイントです。

WARNING

正直、脆弱性対応を放置している人も多いと思うのですが、何か問題がおこると乗っ取りなどもあり得る話なので、そうなってしまうと後の祭り。 こまめに脆弱性対応はやるべき事項かと思います。

そこで、静的ファイル(htmlやcss)のみで稼働させる静的サイトジェネレーターを探していました。 世の中にはいろいろとあることがわかったのですが、試していく中で最終的に、vuepresにたどり着きました。

# 圧倒的なWordPressのシェアだが…

ホームページやブログなどを運営するにあたってhtml,cssのファイルだけで稼働させることができるツールが静的サイトジェネレーターです。 セキュリティリスクが増えてきている昨今において、ずいぶんメジャーになってきた感じはしていますが、WordPressのシェアは圧倒的のようです。 ブログのコンテンツ管理(CMS)のシェア(2020/1時点)のトップ3は

  • wordpress 63.2%
  • Joomla 4.2%
  • Shopify 4.0%

となっています。圧倒的なシェアですね。 出典:w3techs

とはいえ、有名すぎるが故、DBを利用したサイトであるが故、セキュリティリスクはそれなりに高くなってしまっていると思います。

WordPressがもっている、セキュリティリスクを低減させることに加えて、

  • 高速にサイトを表示させる
  • WordPressのような自由にカスタマイズは可能
  • 書くことに専念できる ようなツールがないかと思い、探していたところ、静的サイトジェネレーターに出会ったわけです。

# 静的サイトジェネレーター

# 種類

静的サイトジェネレーターは世の中にはたくさん出回っています。 有名どころだと以下のあたりですかね。

  • Hexo (ヘクソ)
  • Gatsby (ギャツビー)
  • React Static (リアクト スタティック)
  • Jekyll (ジキル)
  • Next.js(ネクスト)

このサイトにはたくさんの静的サイトジェネレーターが紹介されています。 今人気のツールもよくわかります。

# 特徴

いくつか特徴があると思いますが、さきほども書いたとおり

  • 高速にサイトを表示させる
  • WordPressのような自由にカスタマイズは可能
  • 書くことに専念できる

あたりが特徴でしょうか。 一番いいなと思ったのが、「書くことに専念できる」の点なのですが、ポイントは「専念」です。 WordPressの場合、文章を書いて、その文字の強調など修飾をする場合、修飾のためにマウスなどを使って特別に操作しなければいけませんが、静的サイトジェネレーターの場合は大部分が markdown にてコンテンツを記載します。 markdownは修飾する際の記載を簡易的に記載することでその記述性を高めるための記載方法なので、キーボード上で修飾も簡単にかけるのはかなり大きい利点です。

キーボードとマウスが行ったり来たりするとどうしても時間がとられますので、ずっとキーボード上で操作できるのが、慣れてくると最適になります。

マウスも直感的でいいのですが、仕事でも素早く作業をする場合はなるべくキーボード上で済ませられるようにショートカットなどを多用している人も多いと思います。ブログのコンテンツ管理も同じ理論ですね。

# Vuepressを選んだ理由

数ある静的サイトジェネレーターの中からvuepresを選んだのはいくつか理由があるのですが、最終的には「これでやりたかったことができたから」です。 他もいろいろ試したのですが・・・やりたいことがうまくいかず・・・挫折しました。

自分でコンテンツ管理をしている手元のPCはWindows、実際にジェネレーターを設置しているのはAWS-cloud9です。手元PCでももちろんジェネレートすることは可能なのですが、AWSの勉強かねてcloud9を利用しています。 他の静的サイトジェネレーターも試してみたのですが、どうもmacユーザの記事が多く、なかなかWindowsでうまくいかなかったので、断念しました。

今は

  • 手元PCを開発環境として、コンテンツ管理
  • AWS-cloud9を本番環境として静的コンテンツへのジェネレート
  • AWS-s3にてコンテンツ配信 という流れで運用しています。

まだまだ手作業が多いので将来的には自動化を進めていきたいと思っている今日この頃。

# vuepress導入

# 前提

npmは導入済とします。 ちなみにvuepress導入ではyarnを利用することが推奨されていますが、npmでも導入は可能でした。以下npmにて導入作業します。

# package.jsonの作成

vuepressを導入するフォルダを作ります。(なんでもいいですがvuepressのようなのがわかりやすいでしょうか)

そのフォルダ内にpackage.jsonのファイルを作って、以下のように書きます。 バージョンは作成時点のものです。

  • vuepress 1.4.0 を利用しています
{
"name": "vuepress-tech",  //ご自由に変更ください
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src --dest dist",
    "eject": "vuepress eject src"
},
"author": "",
"license": "ISC",
"dependencies": {
    "@vuepress/plugin-blog": "^1.9.2",
    "vuepress": "^1.4.0",
    "@vuepress/plugin-google-analytics": "^1.4.1"
}
}

# インストール

コマンドプロンプトで

cd vuepress

としたのち、

npm install

とすると、package.json内に記載したパッケージがインストールされます。

しばらく終了を待ちます。

# データ格納フォルダを作成

vuepress内にコンテンツになるファイルを入れるフォルダを用意します。ここではsrcとしています。 他にも2つフォルダをsrc内に作ります。

  • posts:コンテンツそのものを入れるフォルダ
  • .vuepress:vuepressのカスタマイズ情報を格納するフォルダ
mkdir src
cd src
mkdir posts
mkdir .vuepress

# config.js を作成し、カスタマイズ

.vuepressの中に必要なファイルがconfig.jsです。ここにはカスタマイズ要件を記載していきます。

このファイル次第でサイトの形は大きく変わります(たぶん) 最初に設定するのは、以下な感じでしょうか。(このサイトのconfig.jsからよけな部分を省いたものです)

module.exports = {
  title: 'にちたの-Tech', //mysite title//
  description: '日常を楽しく暮らすためのサイト', //mysite description//
  locales: {'/': {lang: 'ja-JP'}, }, //langage japanese
  themeConfig: {
    sidebar: "auto",
    sidebarDepth: 2,
    displayAllHeaders: true,
  },
  plugins: [
    ['@vuepress/blog',
      {sitemap:
        {hostname: 'http://tech.nichitano.net'
        },
      },
    ],
  ],
  }

これで初期設定は完成。

# index.mdの作成

残りはコンテンツです。 初期ページであるindex.mdを作ります。 作成場所はsrcの直下です。

---
title: にちたの-tech
home: true
actionText:  start
actionLink: /test.html
footer: MIT Licensed | Copyright © 2019- nichitano
---

これだとfrontmatterだけですが、動きます(たぶん)

# コンテンツの作成

私の場合はposts配下にコンテンツを置くことにしました。 なので、postsの下にtest.mdを作成して

---
title: てすと
date: 2020-05-01
---
テスト記事

で保存。

# テスト環境で稼働させてみる

コマンドプロンプトで

npm run dev

と実施すると

success [hh:mm:ss] Build xxxxx finished in xxxxx ms!
> VuePress dev server listening at http://localhost:8080/

という感じでローカルサーバが起動するはず。

なので、ブラウザでhttp://localhost:8080/にアクセスし、稼働確認します。

確認が終わったコマンドプロンプトでctrl+C でローカルサーバを停止するのをお忘れなく。

# 静的サイトにジェネレートする

最後に静的サイトの部品をジェネレートします。

npm run build

distというフォルダがvuepress配下に作成されるはずで、これが静的サイトの部品群です。

# 参考