静的サイト

はじめまして。sawaと申します。 この記事では静的サイト作成に特化したフレームワークである「Astro」について、フロントエンドエンジニアの方向けに簡単に説明する記事です。 はじめに 企業に所属するフロントエンドエンジニア、またはマークアップエンジニアの方は下記のようなお願いをされた経験があるかもしれません。 「コーポレートサイトを作りたい！」 「ブログやお知らせなどをバックオフィスで更新したい！」 「独自のデザインにこだわりたい！」 上記のような要件で小規模な静的サイトを作成することになった場合、技術選定で迷う方も多いのではないでしょうか。 まず第一に、大規模案件で使っているようなフレーム…

こんにちは。今回は静的サイトの作り方について書いてみます。 フリー張り紙素材 はりがみやも静的サイトで、基本的にはこの記事と同じようなやり方で作られています。 【注意】 これを書いている人は趣味レベルな上、「なんだかわからんが動いたからヨシ！」という人間です。ベストプラクティスとは程遠い内容かもしれません。 とはいえ「ちゃんとやる」「完璧にやる」といろいろとハードルが高いですし。 とりあえず動かしてみたい、作ってみたいという方に読んでいただければ。 想定している読者 前書き 静的サイトとは？ 動的サイトとは？ 静的サイト作成の流れ 静的サイトジェネレーター 本記事のゴール 完成イメージ 環境の…

Bullet Group Advent Calendar 2020 19日目の記事です。 こんにちは！SREチームたかはしです！ 栄えあるアドベントカレンダーの19日目、どんな記事を書かせて頂こうか悩みましたが「terraformで s3 + cloudfront を構築し、静的サイトを公開する方法」をご紹介したいと思います！ こちら以前自分が業務上で行ったことなのですが、とてもとても楽に環境構築 & サイト公開までできて感動しました。 簡単なポートフォリオサイトの公開などで使用することもあるかと思いますので、皆さんにもお試しいただければと思います。 前提 pcにterraformがインストー…

こんにちは！オルターブースでエンジニアをしているはっしーです！ 私事ですが最近猫カフェに行ってきました！ かわいい猫たちがたくさんいて大変癒されたのですが、なかなか寄ってきてくれませんでした。課金システムでエサを買うと猫たちが寄ってきますが、課金アイテムを使わずに猫に囲まれている「無課金おじさん」がいて、うらやましい限りでした.... Copilotに猫にモテるための方法を聞いたところ、以下のアドバイスをもらえたので次回実践したいと思います。 猫カフェで猫にもてるためのコツをいくつかご紹介しますね！ 1. 静かに行動する: 猫は静かな環境を好みます。大きな声や急な動きは避け、ゆっくりとした動作…

Web アプリの設計手法である MPA と SPA についてと、 Rails ・ React での SPA の簡単な実装をまとめました。 理解すべきことは以下です。 MPA と SPA それぞれの特徴 MPA と SPA それぞれの構造 MPA と SPA それぞれを実装するために必要な技術 MPA と SPA の違い MPA と SPA それぞれのメリット・デメリット MPA と SPA の特徴 MPA（Multi-Page Application：マルチページアプリケーション） MPA は、従来の複数の HTML ページで構成される Web アプリケーションのこと。 MPA ではページ間を…

CloudFrontで設定したS3静的サイトにブラウザで接続すると、 「ERR_SSL_VERSION_OR_CIPHER_MISMATCH」 のエラーが発生しました。 原因がわからなかったのですが、CloudFrontの設定を見直すことで解決しました。 以下はブラウザでアクセスして時の画面です。 システム構成 省略しますが以下AWSサービスを組み合わせてシステムをWebサイトを構築しました。 （CloudFrontにS3の静的サイトを紐づけ、ACMのSSL証明書を設定して、ROUTE53で名前解決） ・Ｓ3（静的Webサイト用） ・CloudFront ・ACM（ＳＳＬ証明書用） ・Rout…

はじめに 恋アスが現実に！胸熱... nikkieです。 登壇資料作成にはsphinx-revealjsを愛用して静的サイトとしてホストしています1。 このたびブレイクスルーが起きました！ コードブロックをワンクリックでコピーできるボタンを設置できたのです🙌 目次 はじめに 目次 結論 初手、sphinx-copybutton！ Reveal.js CopyCode sphinx-revealjsの機構を利用する 終わりに 結論 Reveal.jsのプラグインを使って実現しました！ https://ftnext.github.io/2024-slides/pyconshizu/logging-…

はじめに 香織先輩 & ドラえもんさん、お誕生日おめでとうございます！ nikkieです。 気になっていたSphinx拡張を試しました。 目次 はじめに 目次 sphinx-copybutton 設定例 実は出会っていたsphinx-copybutton 実装を少しだけ 終わりに sphinx-copybutton ドキュメンテーションツールSphinxで、ビルドしたHTML中のコードブロックをボタン一発でコピー可能にする拡張です。 画像右上にご注目 使い方は、インストールして有効にするだけ。 $ pip install sphinx-copybutton # conf.py extensio…

デスクトップ・アプリケーションである Obsidian を使って、ローカル（自分のPC）でデジタル語彙目録を作成する方法は、だいたいの目処が立ってきました。ローカルに作成したデジタル語彙目録をWebに公開する方法も考えなくてはなりません。 Obsidian Publish によるWeb公開の実験をしてみました。内容： Obsidian Publish 困ったところ 対策は まだ実験 ハブ記事： デジタル語彙目録:: 動機と概要 Obsidian PublishObsidian はデスクトップ・アプリケーションです（モバイル版もありますが）。 Obsidian では、Markdownファイルをノ…

前提 Next.jsとmicroCMSを使用し、数百ページのWebサイトを構築している App Routerは使用していない（Next.jsの採用時にApp Routerがまだ正式採用されていなかったため） ISRも使用していない（業務要件の兼ね合いから使っていない） Amplify上で、SSGして静的サイトを構築している 課題 ページ数が増えることで、ビルドのパフォーマンスが気になってきた 当初から想定していたが、想定よりも遅いことが気になってきた microCMSの簡単なデータ構造 microCMSでは下図にある通り、各ページからヘッダーとフッターのデータを参照している。また、ヘッダーとフ…

定期的にやるやつ！ 背景・モチベーション いろいろ使いたい それぞれのサイトに適したものを考える 本題：Sveltekit → Astro の置き換え .astro のコンポーネント以外から .astro のコンポーネントは呼べない Astroアイランドを使うと <astro-island> という要素が生成される おまけ：グローバルスタイルどこに置くの問題 できた！ 背景・モチベーション （※個人的な話なので興味ない人は飛ばそう） いろいろ使いたい 個人的な思想として、個人でやっているWebサイトはそれぞれ違う技術を使いたいというモチベーションがあります。 どうしてもお仕事だと長期的な保守の…

(記事画像は適当) タイトルで言いたいことは言っている系記事。旧ブログの将来的な閉鎖の件は以前書いた通りだが、残しても問題ない記事はHugoとかのような静的サイトジェネレーターとかを使って変換→gudako.netドメイン(hd-archives.gudako.net(未確定)みたいな感じ)で公開してもいいかもしれないな。まぁその前に準備中のままなgudako.netをマトモにしておきたいわけだが(簡易的な骨組みはできてはいる)。

業務でプロダクトのドキュメントを Hugo で作成したので、メモを残しておきます。 Hugo とは 使用したテーマ（Hextra） 構築 セットアップ Hugo インストール プロジェクト作成 コンテンツ追加 Hugo の config 設定 コンテンツを充実させる ドキュメントタイプのレイアウトにする ショートコードによるコンテンツ埋め込み コールアウト カード Youtube 固定された文言を変更する GitLab Pages へのデプロイ おわりに

1. CloudFlareとは みなさん、こんにちは。パートナービジネス（AG-Boost）事業部でエンジニアの清水です。 今日はCloudFlareに興味があり使ってみたところAWSとの違いに感動したのでそのことについて書きます。 CloudFlareは、ウェブサイトをより速く、安全にするためのサービスを提供している企業です。 CDNというイメージがありますが、AWSの「S3」に対応する「R2」や「CloudFront」「Route53」「S3」全ての機能を持ったPagesなどWebサービスを運用するための機能全般的に揃っています。 国内の大手企業でWebエンジニアをスタートした人はAWSか…

FlaskにはWebサイト・アプリ全体に適用できるキャッシュ機構としてFlask-Cachingがありますが、最近よく見かけるAstroなどの静的サイト生成みたいに、最初から静的HTMLを生成しておいてFlask側で読み込むだけにした場合、Flask-Cachingを有効にしたWebアプリと比べて、どのくらい処理が高速になるか、簡単に実験してみました。 準備: まずはFlaskアプリで自動生成しているWebページをhtmlファイルとして取得します。 テスト用に1～100までの連番ページを以下のコードでゲットしていきます。 import requests import os base_url =…