TL;DR
運営しているサービス、fRatのランディングページをGitLab Pagesを使用して公開していますので、その方法のご紹介です。
GitLab Pagesを使えば、自動更新付き無料SSLが使えるし、無料でWebサイトを公開できます。
ポートフォリオとしてのゴリゴリのHTML/JavaScriptを使って、自由度の高いWebページを配置することもできます。
はじめに
組織や自己のブランディング、ポートフォリオ公開のために、Webサイトを公開している方は多いのではないでしょうか？
もしくは、この状況下でWebサイトを公開して、オンラインでの活動を開始しようとしている方もいらっしゃると思います。
そんなとき、自分でサーバを用意してWordpressなどを使ってサイト公開をするのも一つの手ですが、無料で、かつ自由度の高いWebサイトを公開する手段もあります。
本ドキュメントでは、無料でWebサイトを公開する方法をお伝えします。
GitLab とGitLab Pages
GitLabは、ファイルをバージョン管理してくれるWebサイトです。（もっといろいろなこともしてくれます。）
GitLabの機能の一つに、アップロードしたファイルをWebサイトとして公開してくれる、というものがあります。
本ドキュメントでは、この機能を使って、Webサイトを構築する方法をご説明します。
ページをアップロード、公開する。
GitLabでアカウントを作成、ログインしてください。
ヘッダーから「➕」マークを押して、New projectを選択します。
Project nameを入力して、Create Projectボタンを押します。
出来上がったページから、
「Set up CI/CD」を押します。
表示された入力欄で、
以下のように入力します。
image: alpine
pages:
script:
- ls
artifacts:
paths:
- public
入力したら、「Commit changes」を押します。
続けて、公開ページを作っていきます。
左メニューのRepository→Filesを押して、
タイトルちょっと下の「+」から「New directory」を選択します。
表示されるダイアログの「Directory name」にpublicと入力して、「Create directory」を押します。
続けて「＋」から New Fileを選択しFile name にindex.htmlと入力します。
あとは入力欄にHTML、JavaScript、CSSで好きなように書いていきます。もちろんJavaScriptは単独でファイルを作成していただいても結構です。
私は、Tree.jsを使用したかんたんなサンプルを作ってみました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<canvas></canvas>
<script>
const width = document.body.offsetWidth;
const height = document.body.offsetHeight;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, 5);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
function tick() {
box.rotation.y += 0.01;
box.rotation.z += 0.013;
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
tick();
</script>
<style>
body,
canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
作れたら、「Commit changes」を押します。
続きまして、Webサイトとして作ったindex.htmlを公開します。
左のメニューの「Settings」→「General」から「Visibility, project features, permissions」→「Pages」で「Everyone」を指定して、「Save changes」ボタンを押してください。
これでサイトが公開されます。
サイトのURLは左メニュー「Settings」→「Pages」の「Your pages are served under:」から確認できます。
もし、独自ドメインで運用したい場合は、同じく「Settings」→「Pages」の「New Domain」から設定できます。独自ドメインにした場合でも、Let's EncryptによるSSL証明書の発行および自動更新機能がついているのでとても便利です。
自分でサイト運用するよりも楽で安全ですよ？
自分で用意したサーバでWordPressなどを運用している方は、サーバを正しい状態に設定したり、セキュリティーパッチを当てたりと、安全な状態を保つのは大変です。Webページを公開したいだけであれば、本ページのやり方で十分です。mkdocsやHexoなどを使って、CMSでページを作ることもできます。
また、この状況下で業務をオンライン化したい方。まずはWebページで活動を公開するのに、本ページのやり方でかんたんにトライしてみてはいかがでしょう？
fRatでは、この方法でランディングページを作成するとともに、mkdocsによるHTML生成を使って、マニュアルを公開しています。
GitLab PagesでかんたんWebサイト公開、ぜひ、お試しください。
お困りの点がありましたら、@bottegauniへどうぞ。