こんにちは。電通デジタルでEMをしている河内です。エンジニアにおける採用・評価、スクラムマスターなどを担当しています。今回はすこし実装プラクティスから離れた話題になりますがお付き合いくださいませ。 弊社もご多分に漏れず完全テレワークを実施しており、かれこれ4か月が経ちます。その中で見えてきた課題とエンジニアチームとしてどう対峙したか、そしてそこで得た気づきを綴っていきたいと思います。この内容は、過去に開催したオンラインイベントでお話した内容になります。 テレワーク環境で私たちのエンジニア部門で急務と感じた課題テレワークが開始された2月後半、プログラミングやシステム開発プロジェクトを生業とする私たちの部では「リモート？全然OK。支障無いっす。」とタカを括っておりました。しかし開始されて間もなく、やっぱり慣れていない事が判明・・・。テレワークを経験されている読者の多くの方が感じていることと同様
「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サイトと同様の高速
Modern Web Development on the JAMstack を読んでまとめた - console.lealog();
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ
このブログがFediverseに対応しました
Twitter が日々壊れゆくなか、周りの人が Misskey や Mastodon や Threads に住居を移すようになりました。 私も移住先を検討してみたものの、移住先のプラットフォームだっていつまで持つか分からないし、複数のプラットフォームにアウトプットを分散させるのも良くないなぁと思い、 最終的にマイクロブログがだめならブログでいいじゃんと自分を納得させるに至りました。 せっかくなら ActivityPub に対応して、Fediverse の人からリモートフォローできるようにして、反応が見れたら嬉しいよねということで色々と調べて対応させることができました。 本ブログは「@blog.tyage.net@blog.tyage.net」でリモートフォローすることが可能です。 このブログは hugo で生成しており、静的ファイルのみ配信しています。 それは変えたくなかったため、Acti
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
yyyy-MM-dd HH:mm:ssのような書式ではなく2006-01-02 15:04:05である。この数値でなければ正しく表示されない。は？ なにこれ？ ひどくない？ 手順 Go言語をインストールする hugoをインストールする プロジェクト作成＆pulpテーマ適用 以下のように設定ファイルを編集する コード 日付の表示形式をyyyy-MM-ddに変更したい。以下のようにする。 config.toml [params] listPageDateFormat = "2006-01-02 15:04:05" singlePageDateFormat = "2006-01-02 15:04:05" 具体的な日時に見えるでしょ？ これ、フォーマットなんだぜ……。 ハァ？ と思うでよね？ ふつうyyyy-MM-dd HH:mm:ssとか%Y-%m-%d %H:%M:%Sとか、そーゆー感じなのに
静的サイトジェネレータ「Hugo」と技術文書公開向けテーマ「Docsy」でOSSサイトを作る | さくらのナレッジ
最近ではWebサイトを構築する際にWordPressなどのCMS（コンテンツ管理システム）を利用することが多いが、今日でも静的なHTMLファイルを使ったサイト構築には多くのメリットがある。今回は、こうしたHTMLファイルベースのサイト構築を支援するHTMLファイル生成ツール「Hugo」を紹介する。 静的ファイルでサイトを作るための支援ツール「Hugo」 コンテンツの作成や編集の容易さから、昨今ではWebサイトを構築する際にCMSを利用する例が多い。ただ、CMSを使用するにはCMS自体のインストールや設定、データベースの準備などが必要であるため、更新頻度の低いサイトやページ数の少ないサイトでは静的なHTMLファイルを使って構築したほうがコストが低くなる場合がある。 とはいえ、HTMLファイルをいちいち手動で作成するのは楽ではない。そのため、HTMLファイルを半自動生成するようなツールが数多く
κeenです。 GitHub Pagesからこんにちは。 私はこのGitHub Pagesのブログの他にGitLab Pagesのブログも持ってるんですが、それが使いやすいので宣伝します。 GitLab Pagesを使うと Markdownでブログがかける Markdownのまま git push で記事の公開ができる コンテンツの管理が(GitHub Pagesより)楽 サイトでHTMLやJavaScriptが使い放題 になります。 JavaScriptが自由に使えるということは私のようにreveal.jsなどのスライドエンジンを使ってMarkdownでスライドを書いて公開することもできます。 ブログに自由度が欲しいという方におすすめです。 GitHub PagesとGitLab Pages GitHub PagesとGitLab Pagesはだいたい似たようなことができます。 ユーザの
ゲーム内お知らせをHugo+Netlify CMS+CircleCIで作りました - KAYAC engineers' blog
鎌倉は寒いです。みなさんはいかがですか。ソーシャルゲーム事業部のゲーム技研チームの谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの10日目の記事です。9日目はデーモン管理をdaemontoolsからsystemdに移行させるでした。 ゲーム内お知らせとは みなさんは、スマートフォンのゲームをされますか。ええ、そこのあなたはよくされる。しかし、そちらの方はあんまりされない。なるほどなるほど。 では分かる人にはおさらいとして、あまりピンとこない方にはそんなことがあるのか〜となってもらうために説明させていただきます。 我々カヤックでゲームを運営している人々が「お知らせ」を指した場合、ゲーム内のある機能を示しています。他のゲームではニュースなどとも呼ばれています。 カヤックで作っているゲーム「ぼくらの甲子園！ポケット」(以下ぼく
社内でおすすめの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サイトが楽しくカンタンに作れちゃう世界最速のフレームワークだぜ！ 良さそうですね！早速使ってみましょう。 インストール こ
はじめに はじめまして！株式会社Rivine のつかもとです！ この度 Zenn 初投稿 & 弊社 Zenn Publication の初記事となります。どうぞお手柔らかに・・ 2022 年 11 月より 株式会社Rivine を設立し、エンジニア＆取締役として働いております。 「テクノロジーで、もっと生きやすい世の中へ」をモットーに主に受託開発と開発支援（SES / ラボ型開発）を行っております。 Rivine と書いて、リヴァインと読みます。名前だけでも覚えて帰ってください・・🙏 さて本題ですが、弊社は昨年 11 月に法人設立後、早くも今年の 4 月に自社ホームページをリニューアルしました。今回は主にリニューアルの概要について、少しお話しをさせていただきます。 ※ 本記事タイトルの「ほぼ0円！」という表現について ※ ほぼ0 円 や ほぼ無料 という表現には「ドメインの更新料」は含ん
本格的にブログを作るならWordPress、というのが合言葉になりつつありますが、みなさんWordPress好きですか？わたしはめっちゃ嫌いです。理由は以下の通り。 使いづらい（管理画面わけわかめ、重い、定期アップデートが面倒） コスパが悪い（無料テンプレートが雑魚、有料コンテンツが多い） 自由度が大して高くない（最新サービスの反映が遅い、フォークできない）かと言ってフルスクラッチでブログを作るのは悪手です。ページを増やすたびにhtmlファイルを作って、記事一覧をひとつずつずらして...この面倒くさい作業をぜんぶやってくれるのがWordPressや静的サイトジェネレーターです。 （追記）フロントエンドエンジニアやWebデザイナーの方でもWordPressやめて静的サイトジェネレーターに移行したよ！という声も多く。誰でも簡単に便利に、が謳い文句のWordPressの便利さ簡単さが何回使っても
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
はてなブログで運用してたブログ「ゆーすけべー日記」をGitHub Pagesへ移行した。ドメインも昔使ってたyusukebe.comにした。 静的ファイルのジェネレーターとしてHugoを使ってる。 結局、Hugoいじってる https://t.co/NAKS6k3W1M — Yusuke Wada (@yusukebe) January 15, 2020 今まで使ってた、はてなブログに大きな不満があったわけじゃなかったが、気分一新しようとしていた。ちなみに上記のツイートにあるようにMediumとnoteを試してみたが、今回のユースケースには合わなかった。 というのもコードを貼り付けたいという重要な要件に対して、 Medium Markdownに対応している なので``` と書きはじめてコードを貼り付けることができる ただWYSIWYGすぎて書いた瞬間からHTMLに変換されるのが使いにくかっ
多言語サイトで言語ごとの内容を同期するのが楽になった話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発部テクニカルコミュニケーションチームの澤井です。 サイボウズでは昨年、ヘルプサイトの記事更新の高速化や翻訳の効率化を目的として、ヘルプ基盤を変更しました。詳しい内容は以下のページで紹介しています。 プロダクトのヘルプサイトをマークダウンに移行した話 ドキュメントサイトの管理にはNetlify＋静的サイトジェネレーターが便利 これらの変更により、特にサイトの多言語化業務においてさまざまな改善効果を実感しているので、今回はその紹介をしたいと思います。 多言語サイト運用で課題となっていたこと サイボウズのヘルプサイトのページ数は1万を超え、日英中3言語で展開しています。また、開発サイクルが短くなっていることから、日本語の記事更新はほぼ毎日行われています。各言語でなるべく早く最新のコンテンツを公開するにあたり、以下のような課題がありました。 差分管理が大変 翻訳結果の取り込みに時間
GitHub Action Hero: Shohei Ueda
CommunityOpen SourceGitHub Action Hero: Shohei UedaWe spoke with our latest GitHub Action Hero, Shohei Ueda, about the story behind Hugo setup, mdbook Action, and a few other projects. With GitHub Actions, you’re able to automate more of your workflow by connecting the tools you know and love—giving you more freedom to spend time innovating. You can deploy to any cloud, build containers, automate
GitHub Actions の登場により GitHub Pages へのデプロイがとても簡単になりました。手順を書いた YAML ファイルを Push するだけでビルド・デプロイの CI/CD を構築できます。この記事では GitHub Actions を用いて GitHub Pages へのデプロイを自動化する方法を紹介します。 Hugo のブログ・サイトの場合 具体的には以下のような YAML ファイルをデフォルトブランチに .github/workflows/gh-pages.yml として Push するだけで GitHub Pages へのデプロイが始まり、サイトが公開されます。 name: GitHub Pages on: push: branches: - main # Set a branch name to trigger deployment pull_request
Zenn & Hugo in Obsidian : OHZフローによるナレッジベースとアウトプットコンテンツの完全統括
はじめに Zenn や Hugo を Obsidian で利用して運用するためのアイデアとその方法をまとめました。スクラップ上でまとめたもの を記事化してます (追加の内容あり)。 日本ではまだ広く知られていない PKM 周りの概念や新たなツールの紹介も含むの分かりづらいところや説明が長くなってしまう部分もありますが興味を持っていただければ幸いです。 また、ここで紹介するやり方は Obsidian の公式で紹介されてないような応用的な使い方になるので潜在的な問題があるかもしれません。自己責任の元で適宜各ディレクトリのバックアップを行いながら環境構築をしてください。(自分の環境では現在のところ特に問題は発生していません)
HugoでもTwitterCard画像を自動生成したい
最近、Twitterを眺めているとイイ感じのサムネが設定されたブログ記事を見かけるようになった。 OGP1やTwitterCardl2にはそのような生成機能が無いので各々画像を生成しているのだと思われるが、 Hugoにもそのような機能は無い。ということで、この土日にGoで画像生成するコマンドを書いた。 どう生成するか考えるHugoは静的サイトジェネレータなので、一般的なブログサービスのように動的なことは考えず、 単純にサイト生成時に画像も生成すれば良いだろう。 では、どう生成すべきか？ImageMagicを使う方法や、Hugoでサムネ用ページを生成しそれをCode 1のように Headless Chrome を使ってスクショを撮る方法が考えられる。しかし、サムネをスクショするだけに起動するには少々重い。 docker run --rm -u $(id -u $USER) --cap-add
3ファイル追加してGitHub ActionsでHugoにレコメンド記事を表示する | Democratizing Data
こんにちは、早いものでもう40の大台が迫ってくる誕生日を迎えました。前日にブースターショットを打ったので、一日中ほとんど寝込んでいました。必要な人のために、例のリストを置いておきます。 さて、Hugoにはキーワードベースの関連記事の表示をする機能があります。 しかし、キーワードベースの関連記事も悪くはないのですが、折角なので自分で関連記事のレコメンドをしてみたくないですか？ そう思っていたら、 takuti さんの Prelims というオープンソースを見つけました。 Prelimsは、Hugo（やJekyll）のFront matterと呼ばれるメタデータの部分にキーワードやレコメンド記事を足してくれるものになります。 レコメンドの方式自体は、今実装されているのは古典的なTF-IDFを用いたコンテンツベースの類似文書を出してくる方式ですが、Front matterを後から処理してレコメン
Docsy
Learn More Get started A Hugo theme for creating great technical documentation sites Docsy is a theme for the Hugo static site generator that’s specifically designed for technical documentation sets. Our aim is to help you get a working documentation site up and running as easily as possible, so you can concentrate on creating great content for your users.
はじめに こんにちは！株式会社Rivine のつかもとです！ 普段はエンジニアとして、主にフルリモートの開発支援案件に従事しながら Rivine の取締役としても日々粛々と働いております。 前回の記事では、 Hugo のブログ開発について執筆しましたが、 今回は、弊社ホームページの利用技術でもある 「Cloudflare Pages」 を使って ハンズオン形式にて、前回の記事で作成した Hugo のブログを公開してみたいと思います。 ※ 本記事タイトルの「5分もあれば十分だ」という表現について ※ 5分もあれば十分だ という少しネタを交えた表現をしておりますが、トータルの作業時間については、各開発環境やネットワーク環境、作業スピードによって変動するかと思います。 あくまで、筆者が本記事の手順を滞りなく、スムーズに作業した上での 目安時間 だとご認識いただけますと幸いです。 今回公開するブロ
GitHub - peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
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を使って爆速でブログを作成する
hugoとは？ hugo(ヒューゴ）とは、goで作られたwebサイトを作成するフレームワークです。 公式サイトのトップページで「ウェブサイトを構築するための世界最速のフレームワーク」書いてあるように速さを売りにした静的サイトジェネレーターのようです。 公式ページ 使用できるテーマも数多く揃えられており、柔軟性もあるとのことだったので今回はhugoを使って実際にブログを作成してみました。 先に触ってみた感想なのですが、下記画像のように本当に多くのテーマが用意されており選ぶだけで楽しかったです。また、テーマのカスタマイズも簡単に行なえ自分好みにできるので結構体験良かったです。 テーマ一覧 もととなるテーマも豊富にあり、結構簡単にカスタマイズもできるので、企業サイトやショップサイト、LPやオウンドメディアとか作るのもいいかもしれないですね。 blogの作成 今回はhugoで静的サイトを作り、ロリ
Hugo v0.62.0 クリスマスエディションが今年もリリースされました。 Hugo v0.62.0 release notes 今回の目玉機能 Markdown Render Hooks の使い方を解説します。 Hooks は Markdown parser に Goldmark を利用している時に利用可能で、最新の Hugo はデフォルト Markdown parser が Goldmark です。 Markdown Render Hooks - Configure Markup | Hugo Markdown Render Hooks はリンクや画像に対してある属性を付けたい、など共通の処理を施したい時に重宝します。ショートコードを作らなければならない場面がぐっと減るでしょう。ショートコードではなく、普通のマークダウンを維持できるので、エディターや Headless CMS のプレ
Hugo v0.60以上を使うと、Markdown中のHTMLタグが「raw HTML omitted」となって消えてしまう - My External Storage
2020/03/07時点で最新のHugo v0.66.0でhugoコマンドを使ってMarkdownファイルからHTMLを生成した。 すると、Markdown中に含まれていたHTMLタグがすべて<!-- raw HTML omitted -->と出力され消えるようになってしまった。 結論から言うと、Hugo v0.60.0からは設定で明示的に「HTMLタグをそのまま出力する」オプションを設定する必要があった。 TL;DR Hugoを最新版のv0.66.0にしたらMarkdown文書中のHTMLタグが出力されなくなってしまった 生成後のHTMLファイルをみると、<!-- raw HTML omitted -->になっていた。 Hugo v0.60.0から利用されているGoldmarkというMarkdown Parserのデフォルト設定はHTMLタグを出力しない Markdown中のHTMLタグ
この記事は最終更新日から一定の時間が経過しています。情報が古くなっている可能性があるため注意してください。 2年前に静的サイトジェネレータ（SSG）を比較しました。やはり動的プログラム（代表例 WordPress）のようにセキュリティリスクとイタチごっこになる仕組みと違って、純粋なHTMLページでしかないSSGは運用面の負担が少なくていいなと身にしみて感じます。 静的サイトジェネレーターの比較とHugoに決めた理由（2019年版） | Web勉強ノートブック 以前結論を出した通り静的サイトジェネレーター Hugo で全く問題なかったのですが、サイトのレイアウトを変更しようと思ったこのタイミングで他の技術にも触れておこうと思い最近の動向（2021年10月時点）をチェックしましたので、改めてアップデートしたいと思います。 なお、静的サイトジェネレーター全体の動向比較というよりも、特定の条件に絞
はじめに Qiita初投稿のはるうさぎと申します。粗相がございましたらご指摘いただけると幸いです。 今回は、うつ病患者に向けて何かサービスを作りたいと言うことで、とりあえず簡単にサイトだけでも作ろうと思いました。 が、調べてみるとNetlifyCMSに関する日本語記事が少ない、あるいは古いなあと感じました。 それなら自分が書いてやろう！と意気込んだ次第でございます。 NetlifyCMSを知人から教えてもらったのですが、なんのこっちゃやら。なので一個ずつみていきますよ！ Netlifyとは Netlifyは最近よく耳にしますよね。 みなさんご存知の通り、高機能ホスティングサービスです。 まあ簡単に言うと、サーバーを借りれるんです。無料で、しかも高速。便利！いえい！ CMSとは Contents Management System（コンテンツ・マネジメント・システム）の頭文字を取ったものです
ここでは、Hugo サイトに全文検索の機能を付ける方法を説明します。 全文検索を実現する方法としては、Google カスタム検索を導入する方法もありますが、Google カスタム検索は、インターネット上に公開する Web サイトにしか適用できません。 ここで紹介する JavaScript を利用した全文検索は、ローカルで運用する Web サイトでも利用できますし、インクリメンタルサーチも実現することができます（実際のサイトの例）。 図: 全文検索＋インクリメンタルサーチの完成イメージ大まかに、下記のようなコードを含む HTML ファイルを出力できれば、サイト内の全文検索を実現することができます。 検索用 JavaScript データ (const data = [...])検索用 HTML フォーム (<input>)検索用 JavaScript 関数 (function search()
「静的サイトジェネレーター」を使用すると、WordPressなどのように動的にページを生成することなく、表示が高速で安定したサイトを運用することができます。また、最近増えてきている静的サイト用のホスティングサービスを利用すれば、別途Webサーバーを準備しなくてもサイトを公開することが可能です。 今回は「Hugo」というオープンソースの静的サイトジェネレーターを用いて、サイトの作成と公開を行う手順についてご紹介します。 静的サイトジェネレーターによるサイト運用のメリット・デメリット まず、静的サイトジェネレーターでWebサイトを運用する場合のメリットとデメリットについて整理してみました。 静的サイトジェネレーターによるサイト運用のメリット 表示速度が早い いわゆる動的サイトでは、アクセスの都度サーバー側でページ生成をするため、ページの表示に時間がかかる場合がありますが、静的サイトではあらかじ
Hugoで、ショートコードを使ってかつ、Data Templatesを使わないで、 Amazon紹介リンクを表示する、というのを試している。 embed.lyだとAmazon商品ページがうまく埋め込めない この前、embed.lyで外部コンテンツを埋め込んでいると書いたけど、 Amazonの商品ページに限ってたまにうまく表示がいかない問題があった。 全部、embed.lyで埋め込んでみる - ゆーすけべー日記 これ、よく考えてみたら、embed.lyがフェッチしているのはAmazon.co.jpのサイト本体である。 Amazonサイトはどうやら同一クライント、もしくはそれに準ずるもののアクセスが連続で来た場合などエラーを返すことがあるらしい。 なので、この目的ではProduct Advertising APIを使うのが適している。 HugoのData Templates？ ただ、Hugoで
ぼくの職場の新人さん向けに、サイト制作（とくに静的サイト）を作るのに便利なサービスをまとめたので記事にしました。 もう少しあるので、あとで加筆修正するかもしれません。 静的サイトジェネレーター『Hugo』『Middleman』などお好みで StaticSiteGen 静的サイトジェネレーターは、結局生成されるのはhtml+css+jsなので、好みの物を使えばいいと思います。 このブログではHugoを利用していて、確かにビルドはめっちゃくちゃ早いですが、スクラッチで制作・開発するなら慣れているRuby+Middlemanのほうがサクっと作れます。そんな感じで使い分けても良いと思います。SPA(Single Page Application)に近いものを作るなら、VueとかReactなどを採用したフレームワークを使えばいいですし。 ホスティング『Netlify』 Netlify: All-in
Hugoでブログを書いていてずっと欲しかったブログカードをshortcodeで実装してみました。 はてなブログでURLを「埋め込み」形式で貼り付けたときのイメージを目指します。 以下の流れでやっていきます。 指定したURLのogp情報を取得するNetlify Functionを作成Netlify Functionから取得したogp情報を元にブログカードを生成するshortcodeを作成ブログ記事からshortcodeを呼び出す取得する情報当ブログにも設置していますがheadタグ下のmetaタグから必要な情報を取得します。 記事の「タイトル」「アイキャッチ画像」「記事の説明」が今回取得したいものになります。 Twitter Cardからも欲しい情報は取得できますが今回はogpタグから取得します。 <meta name="description" content="Mac OSのDockerで
--- title: ファイル名 date: 2020-01-05 tags: - blog - WIP - {カーソル位置がここからはじまる} --- {タブストップ} VSNote用のコードスニペットの作成 markdown用のスニペットを追加 macの場合、以下のように選択してmarkdown用のスニペットを編集する。 VSCode > Code > Preferences > User Snipets > markdown VSCode内にmarkdown.jsが開かれるので以下のようにスニペットを記述する。 "vsnote_template_blog": { "prefix": "vsnote_template_blog", "body": [ "---", "title: $TM_FILENAME_BASE", "date: $CURRENT_YEAR-$CURRENT_MON
Hugo の OGP 画像を自動生成できる「tcardgen」を試した - kakakakakku blog
Twitter などソーシャル上でブログ記事に興味を持ってもらうために「OGP 画像」を設定することは重要で，必ず何かしらを設定するようにしている．代表的なブログプラットフォームだと，デフォルト画像だけじゃなく，記事からリッチな OGP 画像を自動生成できたりもする． アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ Qiita記事のOGPイメージが新しくなりました - Qiita Blog Hugo だと 「ブログメンタリング」をしていると Hugo を使っている人も多く「OGP 画像を必ず付けましょう！」とアドバイスをすることがある．Hugo だとテンプレートに og:image が含まれていることはあるけど，デフォルト画像になってしまうため，記事から OGP 画像を自動生成したい Hugo ユーザーもいると思う． Twitter Card Image Generator
この「Kwappa研究開発室」は2008年にココログで書き始めたものです。2011年の正月にVPS上のWordPressに移転し、以降はずっとそこでホスティングしてきました。 技術以外のブログや静的サイトも全部ここでホスティングして、さらにはSlack Botや定時タスクを動かしたり…と長年お世話になっていたのですが、さすがにこのクラウド時代に自前でホスティングを維持するのもしんどいものです。ましてや、今の職場はAWSでおなじみの会社ですし、もうちょっとモダンにしたいという気持ちも日に日に強まっていました。 そんなタイミングでVPSから年間契約更新の連絡が来たので、これをきっかけに引っ越すことにしました。 移転の要件www.kwappa.netApache + PHP + MySQL/blog 以下にWordPressを設置randd.kwappa.net同じVPSに別のWordPress
ブログエントリの OGP 画像は、これまでエントリ中に画像を使っていればそれを指定して、特に指定できる画像がなければアバタの画像を出すようにしていたのだけど、アバダは何も表せてないので何かいいものはないかなあと思っていた。 第一候補は @ladicle の tcardgen でこのツールを使うと次の感じでエントリのタイトルやタグを入れて OGP 画像を生成できる。 これもすっごいよいのだけど、なんか他にないかなあと思っていたところ、エントリのスクリーンショットがそのまま出ていればどんなページなのか分かってよい感じなのでは？と思い、やってみた。結果としては次のような感じで個人的には気に入っている。 ブログエントリの ogp イメージにスクショを設定するようにしてみた。スクショは pageres-cli で生成してる。どうだろうか。 https://t.co/rOe8awTNow — すぱぶら
GitHub - peaceiris/actions-hugo: GitHub Actions for Hugo ⚡️ Setup Hugo quickly and build your site fast. Hugo extended, Hugo Modules, Linux (Ubuntu), macOS, and Windows are supported.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
が無料で利用可能。個人利用なら十分。 Netlify など他のホスティングサービスの無料枠と比べても格安の部類に入る。 例えば Netlify だと認証周りは有料だが Cloudflare Pages なら Cloudflare Access が無料で利用可能な点は注目すべきところのように感じる。 デプロイ方法GitHub リポジトリを連携させ、ビルドコマンドとビルド出力ディレクトリを指定するだけで簡単。 フレームワークプリセットが用意されているのでその中から選択することもできる。 例えば Hugo を選択すると上記の設定から --minify を抜いたものがセットされる。 Production 環境デフォルトブランチのコミットは Production 環境としてデプロイされる。 このサイトの場合 https://peaceiris.pages.dev コミットごとに https://d1
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テレワークで始めたドキュメント駆動業務｜Dentsu Digital Tech Blog
hugoの日付書式がクソすぎる（悪いのはgo言語です） - やってみる
BlogやるならGitLab Pagesがおすすめ | κeenのHappy Hacκing Blog
【HUGO】爆速で静的Webページ作成してFirebaseにデプロイしてみた | DevelopersIO
【ほぼ0円！】Hugo + Cloudflare Pages + AWS でホームページをリニューアル
WordPressが使いにくいなら静的サイトジェネレーターを使えばいいじゃない｜meow｜note
はてなブログからGitHub Pages+Hugoへ移行した - ゆーすけべー日記
GitHub Actions による GitHub Pages への自動デプロイ - Qiita
【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ
Hugo v0.60.0 更新後、Markdown に HTML を入れている場合。
Hugo Markdown Render Hooks 入門 - Qiita
静的サイトジェネレーターを比較して再びHugoにした理由（2021年版）
【Hugo】Netlify CMSを使ってブログを作ってみた【初心者向け】 - Qiita
Hugo に全文検索（インクリメンタルサーチ）の機能を付ける
Hugo 静的サイトジェネレーターによるサイト構築と公開 | パソコン工房 NEXMAG
Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする - ゆーすけべー日記
平成最終版。僕が静的サイトを作る時に使う便利ツールやサービスまとめ – すきせか
Netlify Functionsでブログカードを埋め込むHugoのshortcodeを実装しました - A1 Blog
VSCode + VSNote + Hugoでより快適にmarkdownを書くためのテンプレート設定
WordPressのBlogをHugoとNetlifyに移行する
ブログの OGP 画像にエントリのスクリーンショットを使うようにした
Hugo プロジェクトを Cloudflare Pages へデプロイ
syunimu1124.hatenablog.com
ztmhiro.com
topics.smt.docomo.ne.jp
maps.app.goo.gl
yotemira.tnc.co.jp
www.sanspo.com