【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ
はじめに こんにちは！株式会社Rivine のつかもとです！ 普段はエンジニアとして、主にフルリモートの開発支援案件に従事しながら Rivine の取締役としても日々粛々と働いております。 前回の記事では、 Hugo のブログ開発について執筆しましたが、 今回は、弊社ホームページの利用技術でもある 「Cloudflare Pages」 を使って ハンズオン形式にて、前回の記事で作成した Hugo のブログを公開してみたいと思います。 ※ 本記事タイトルの「5分もあれば十分だ」という表現について ※ 5分もあれば十分だ という少しネタを交えた表現をしておりますが、トータルの作業時間については、各開発環境やネットワーク環境、作業スピードによって変動するかと思います。 あくまで、筆者が本記事の手順を滞りなく、スムーズに作業した上での 目安時間 だとご認識いただけますと幸いです。 今回公開するブロ
【ほぼ0円！】Hugo + Cloudflare Pages + AWS でホームページをリニューアル
はじめに はじめまして！株式会社Rivine のつかもとです！ この度 Zenn 初投稿 & 弊社 Zenn Publication の初記事となります。どうぞお手柔らかに・・ 2022 年 11 月より 株式会社Rivine を設立し、エンジニア＆取締役として働いております。 「テクノロジーで、もっと生きやすい世の中へ」をモットーに主に受託開発と開発支援（SES / ラボ型開発）を行っております。 Rivine と書いて、リヴァインと読みます。名前だけでも覚えて帰ってください・・🙏 さて本題ですが、弊社は昨年 11 月に法人設立後、早くも今年の 4 月に自社ホームページをリニューアルしました。今回は主にリニューアルの概要について、少しお話しをさせていただきます。 ※ 本記事タイトルの「ほぼ0円！」という表現について ※ ほぼ0 円 や ほぼ無料 という表現には「ドメインの更新料」は含ん
Hugo
Hugoを使った小説同人サイトの運営 小説の目録ページ 07 Jan, 2024 tech 当サイトではHugoを使った個人サイトの作り方として制作ログを作ってきましたが、運営するうちに目次ページなどももっと小説サイトらしく使いやすくしたい！ と思うようになりました。今回は目録ページについてで... Hugo を使った個人サイトの作り方 11 OGP、ツイッターカード、favicon 23 Mar, 2023 tech 前回はHugoの分類機能（Taxonomy）の仕上げを行いました。今回はOGP、ツイッターカード、faviconなど、今どきのサイトで必要とされる外部へのアピール機能を設定します。 OGP(Open Graph Protcol)... Hugo を使った個人サイトの作り方 12 SEO対策(RSS,Sitemap)と公開 23 Mar, 2023 tech 前回はOGP、ツ
3ファイル追加してGitHub ActionsでHugoにレコメンド記事を表示する | Democratizing Data
こんにちは、早いものでもう40の大台が迫ってくる誕生日を迎えました。前日にブースターショットを打ったので、一日中ほとんど寝込んでいました。必要な人のために、例のリストを置いておきます。 さて、Hugoにはキーワードベースの関連記事の表示をする機能があります。 しかし、キーワードベースの関連記事も悪くはないのですが、折角なので自分で関連記事のレコメンドをしてみたくないですか？ そう思っていたら、 takuti さんの Prelims というオープンソースを見つけました。 Prelimsは、Hugo（やJekyll）のFront matterと呼ばれるメタデータの部分にキーワードやレコメンド記事を足してくれるものになります。 レコメンドの方式自体は、今実装されているのは古典的なTF-IDFを用いたコンテンツベースの類似文書を出してくる方式ですが、Front matterを後から処理してレコメン
HugoとAWSによるブログ構築
今年もあと僅か。 来年こそは記録をつける癖が付きますように。という願いを込めてブログを構築。 要件 静的サイト 記事はmarkdown形式 gitで管理 masterにpushしたら静的サイトを自動でリリース サーバを持たない 独自ドメイン HTTPS お財布に優しい 方式 Hugoで静的サイトを作成 GitHub上のリポジトリでソースを管理 CircleCIで自動ビルド AWS S3へ静的サイトを配置 AWS Route53でドメイン管理 AWS CloudFrontで独自ドメインかつHTTPSで静的サイトを配信 静的サイトでカスタムドメイン＆HTTPS化を実現する場合、GitHub PagesとCDNの組み合わせという方式もあるが今回はなるべくAWSを活用したかった為この構成とした。 構築の流れ 構築は以下の流れで実施。 Hugoで静的サイトを作成 S3の準備 自動リリースジョブ作成
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
Hugo プロジェクトを Cloudflare Pages へデプロイ
が無料で利用可能。個人利用なら十分。 Netlify など他のホスティングサービスの無料枠と比べても格安の部類に入る。 例えば Netlify だと認証周りは有料だが Cloudflare Pages なら Cloudflare Access が無料で利用可能な点は注目すべきところのように感じる。 デプロイ方法GitHub リポジトリを連携させ、ビルドコマンドとビルド出力ディレクトリを指定するだけで簡単。 フレームワークプリセットが用意されているのでその中から選択することもできる。 例えば Hugo を選択すると上記の設定から --minify を抜いたものがセットされる。 Production 環境デフォルトブランチのコミットは Production 環境としてデプロイされる。 このサイトの場合 https://peaceiris.pages.dev コミットごとに https://d1
NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO
最近話題のVercelを試してみました。競合のNetlifyと同様に、ビルドとホスティング他をまとめてやってくれます。Netlifyと比べて1人で開発をするならほぼフル機能が使えますし、無料プランのままでも100回/日までデプロイできるのが利点です。 前提 Next.jsと親和性の高いVercelですが、今回アプリはGatsby + Contentfulで構築しています。 詳しくは過去に書いた記事がありますので、下記の「1. Contentfulの準備」「2. Gatsbyアプリの立ち上げ」を参考にしてください。 CircleCI × Contentful × S3で作るJamstackなブログ環境。 また、Githubリポジトリを作成し、masterにソースコードをプッシュしておきます。 Vercelにアプリをデプロイする https://vercel.comにアクセスし、「Sta
Azure Pipelines で Hugo サイトのビルド＆デプロイ
Git リポジトリ内の Hugo コンテンツが更新されたときに、自動的に hugo コマンドで Web サイトをビルドし、hugo deploy コマンドでデプロイするように設定してみます。 前提知識Azure Pipelines の基本的な使い方は下記ページを参考にしてください。 Azure Pipelines の使い方 (Hello World)hugo deploy コマンドによる Hugo サイトのデプロイについては下記ページを参考にしてください。 hugo deploy コマンドで Azure などのクラウドサービス上にデプロイする | まくまくHugo/Goノート事前準備ここでは、Azure Pipelines の設定の説明をしますので、下記の作成・準備は終わっているものとします。 Hugo コンテンツ用の Git リポジトリAzure Repos や GitHub の Git
Hugo を CodeBuild で実行して S3 でホスティング - naonya3.me
Hugo を CodeBuild で実行して S3 でホスティング November 09, 2018 このブログは GitHub Pages で公開していたが、デプロイを AWS の CodeBuild で行うついでに S3 でホスティングすることにした。 CodePipeline を利用して GitHub への push をトリガーに CodeBuild を実行する。 基本的には用意されているコンテナに Hugo のバイナリをダウンロードしてサイトを build 後にawsコマンドで S3 にpublicディレクトリをアップロードするだけ。 あとは S3 の公開設定やら CloudFront(CDN) 設定やらをやり、ついでに SSL 対応しておしまい。 一点 CloudFront の設定でハマった。 サブディレクトリの root、つまりhttp://example.com/sub/の
静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る | さくらのナレッジ
最近ではWebサイトを構築する際にWordPressなどのCMS（コンテンツ管理システム）を利用することが多いが、今日でも静的なHTMLファイルを使ったサイト構築には多くのメリットがある。今回は、こうしたHTMLファイルベースのサイト構築を支援するHTMLファイル生成ツール「Hugo」を紹介する。 静的ファイルでサイトを作るための支援ツール「Hugo」 コンテンツの作成や編集の容易さから、昨今ではWebサイトを構築する際にCMSを利用する例が多い。ただ、CMSを使用するにはCMS自体のインストールや設定、データベースの準備などが必要であるため、更新頻度の低いサイトやページ数の少ないサイトでは静的なHTMLファイルを使って構築したほうがコストが低くなる場合がある。 とはいえ、HTMLファイルをいちいち手動で作成するのは楽ではない。そのため、HTMLファイルを半自動生成するようなツールが数多く
Hugo v0.60.0 更新後、Markdown に HTML を入れている場合。
Hugo v0.60.0 が公開されましたが、 Markdown のレタリングエンジンが変わったために 表示が変わっている場合があります。 Hugo v0.60.0 より Markdown のレタリングエンジン goldmark が採用されています。 これにより、Markdown の解釈が変わったものがあります。 例えば行末に \ を入れると改行するのですが…… test**test**\ **test**test このように \ の前に強調の ** がある場合、\ が変換されずに出力されてしまいます。 <p>test<strong>test</strong>\ <strong>test</strong>test</p> これで .md ファイルを多く修正する状態が発生してしまう恐れがあるため、 Hugo の issue に報告しました。 それよりも大事な事がありまして、 .md ファイル
平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ – すきせか
ぼくの職場の新人さん向けに、サイト制作（とくに静的サイト）を作るのに便利なサービスをまとめたので記事にしました。 もう少しあるので、あとで加筆修正するかもしれません。 静的サイトジェネレーター『Hugo』『Middleman』などお好みで StaticSiteGen 静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。 このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。 ホスティング『Netlify』 Netlify: All-in
AWSを使ってHugoを自動デプロイする - bokunonikki.net
今までは、手動でデプロイしていましたが、やはりナウイ感じにしようと思いAWSのサービスを使ってgit pushすると自動でデプロイできるように設定します。 今回は、CodeBuild,CodePipelineの設定をメモしておきます。 使うもの CodeCommit(フルマネージド型のソースコントロールサービス) CodeBuild(完全マネージ型ビルドサービス) CodePipeline(継続的デリバリーとリリースの自動化) CodeBuildの設定 まずはbuildspec.ymlを作成します。buildspec.ymlはフォルダ直下におきます。 僕の場合は、以下のようにしました。CloudFrontのキャッシュ削除もしようと思ったのですが、CloudFrontはキャッシュを削除する度にお金がかかるのでやめました。 オペレーティングシステムはUbuntuです。 version: 0.2
HugoをS3+CloudFront上にSSLでホストする · UGarchive
はじめに 随分と更新を放置していましたが、今回ブログの構築方法を大幅に刷新したので備忘録も兼ねて変更点などを記します。 最初にこのブログを始めたときはVPS上でWordPressを使っていましたが、しばらくしてPHPとMySQLの管理が面倒になったのでGhostを試しました。WordPressもそうですが、基本的に両者ともブラウザ上で下書きを作成するためレスポンスがあまり良くない場合があります。また当時Ghostは開発初期だったので機能が乏しくカスタマイズも難しいところがありました。 そんなとき耳にしたのが静的サイトジェネレーターです。MarkdownなどのテキストファイルからHTMLを生成しインターネット上に公開するだけなのでデータベースの作成も必要ありません。さらに、プレーンテキストで下書きが保存されるためGitなどを用いたバージョン管理も容易です。 そうしてしばらくPelicanを使
Hugo で作ったサイトを CloudFront + S3 で公開する - michimani.net
2018-10-25 Gatsby と同様に、CodeCommit に push したら CodeBuild でビルドして S3 にデプロイして公開される、というところまでを自動化します。 概要 基本的には Gatsby の場合 と同じなので、異なる部分について書いていきます。 やること S3 のバケットポリシーを変更 CloudFront の Origin Domain Name を変更 CodeBuild の環境、 Buildspec を変更 1. S3 のバケットポリシーを変更 まず、S3 のバケットポリシーを下記のように変更します。 { "Version": "2012-10-17", "Statement": [ { "Sid": "AddPerm", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:Ge
【HUGO】爆速で静的Webページ作成してFirebaseにデプロイしてみた | DevelopersIO
社内でおすすめのWEBフレームワーク・ツールを教えてくださいとゆるく聞いたところこちらのツールを教えてもらったので触ってみました。 HUGOとは HUGOは静的なWebサイトを爆速で作成できるツールで、Goで書かれています。 (Gopherかわいい) The world’s fastest framework for building websites Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. 公式ページ 訳：静的WEBサイトが楽しくカンタンに作れちゃう世界最速のフレームワークだぜ！ 良さそうですね！早速使ってみましょう。 インストール こ
hugo 周辺環境刷新とVSCodeとの連携 - チラシのすきま
パソコンのクリーンインストールを機に、hugoのためのスクリプト実行環境である Bash on Ubuntu on Windows（名称が Windows Subsystem for Linux に変更）を入れ替えたのですが、環境構築手順も変わっていたり、LinuxからWindowsのEXEファイルを実行できるようになっていたり、久しぶりにhugoのバージョンを上げたら、仕様が変更されていた部分があったので、今回の記事に諸々まとめました。 更新履歴 変更01: 2018/09/02 hugo v0.42からテーマファイルの指定方法が変更されていた件について、あらためて検証をおこなったので、記事を変更。 WSLの導入 コントロールパネル -> プログラムと機能 -> Windowsの機能の有効化または無効化 -> Windows Subsystem for Linuxにチェックが付いているこ
VSCodeとHugoでブログ
HugoでVSCodeを書く際に便利になるといいなと思って設定したので内容を書いておきます。 投稿の追加 hugoコマンドを実行しても良いと思いますが、すでに投稿したファイルをコピーした方が早い気がします。 画像の添付 投稿するときに画像を添付したい場合があると思うので、それをやりやすくします。 まず、プロジェクトルートにimagesという名前のシンボリックリンクを追加して、リンク先を画像の保存先に指定します。 次に、Paste Imageというプラグインを追加して、マークダウンの文章中に画像をペーストできるようにします。 そのままでもそこそこ便利だと思いますが、Hugoで使いやすくするために以下の設定をします。 VSCodeのワークスペースの設定 { "folders": [ { "path": "." } ], "settings": { "pasteImage.path": "${p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.chick-p.work/blog/2019/20191221_hugo-on-aws-amplify-console/
