Gitlab Pages と Wordpress で 静的HTMLサイト公開環境を作ろう

はじめに

Wordpressで作成したホームページから静的HTMLサイトを作成し、Gitlab Pagesで公開したい。

公開日

2024年09月16日

開発環境

• Gitlab
• Rancher Desktop(Docker)
• Wordpress(Local@Docker)
• WSL(#データ取得用)
• OS:windows11
• Auther:Baker S(GitlabもHTMLもBeginner)
• Supporter:Baker T(Ex.)

Wordpressを作成

以下のDocker compose YAMLを利用し、
ローカル環境でWordpressを構築しホームページを作成した。
ホームページ作成手順に関しての説明は本稿で取り扱はないことをご留意されたい。

(公式サイトのDocker compose YAMLを利用）

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html

  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

GitLabにプッシュするフォルダ構成

GitLabにプッシュするフォルダ構成は次の通りです。

.
├── mirror.sh # Wordpressのサイト情報を取得するスクリプト
├── .gitlab-ci.yml # GitLab PagesのデプロイYAML
└── site # 取得した情報を保存するフォルダ

mirror.shをWSLで実行してsiteにサイト情報を保存します。

wgetでサイト情報取得

wgetコマンドで作成したWordpressの画面（HTML）を取得します。
mirror.shを実行します。

mirror.sh

#!/bin/sh

cd site

wget \
    --mirror \
    --convert-links  \
    --adjust-extension \
    --page-requisites  \
    --retry-connrefused  \
    --exclude-directories=comments \
    --execute robots=off \
    http://localhost:8080/

site/localhost:8080/にサイト情報が入ります。
localhost:8080/が不要なのでファイルを移動して、直下にsite/入れるようにします。

GitLabにデプロイ(GitLab Pages)

.gitlab-ci.ymlを作成してGitLabにpushするとGitLab Pagesが生成されます。
次のように.gitlab-ci.ymlを書いてください。

.gitlab-ci.yml

stages:
  - deploy

pages:
  image: alpine:latest
  stage: deploy
  script:
    - mkdir -p public
    - chmod -R 755 public
    - cp -r site/* public
  artifacts:
    paths:
      - public
  only:
    - main

これでWordpressのサイトがGitLab Pagesとして表示されます。