PengNote | 勉強した事や行った場所の感想を書くブログ
Terraformのディレクトリ構成を環境ディレクトリで分けるかたちで見直したTerraformでリソースを破壊せず名称の変更やモジュール化をするTerraformでGoogle Cloudのインフラ構成を管理し始めるためにやったことDBeaverからWSL上で起動しているMySQLコンテナに接続するStorybookで使っていたMSWを1系から2系にアップデートしてみたEMになる前となった後の話なるべくユーザー依存を減らしてGoogle App ScriptからGitHubAPIを利用するAWS CDKに入門し、AWS費用をSlack通知する処理を書き直したNode.jsのDockerイメージを使ってマルチステージビルドをやってみたFastifyで既存のOpen APIファイルを読み込んでSwagger UIで表示できるようにするOASの内容を元に、Orvalで型やクライアントを生成する
個人ブログに最適なオススメの Hugo テーマ｜Abstract Archives
1. はじめに Go 言語で実装されている静的ジェネレーターである Hugo は，ユーザーが自作したテーマを投稿することができる Hugo Themes が公式より提供されています。しかし，Hugo Themes にはレビュー機能やランキング機能が実装されていないので，自分に合ったテーマを探すのは時間がかかります。本記事では，筆者が独断と偏見で個人ブログに最適な Hugo テーマを選び，概要を記述します。 2. Ananke Gohugo Theme Ananke Gohugo Theme は，シングルカラムレイアウトのテーマです。公式のクイックスタートガイドで採用されているベーシックな Hugo テーマでもあります。表面上は，シンプルな構成になっていますが，ブログに必要な機能は一通り実装されているので，初心者でも簡単にブログサイトを構築することができると思います。 3. Github S
hugoを使ってこのブログを生成し直してみた
この所更新とかあまりしてませんでしたが、最近はちまちまとhugoという静的サイトジェネレーターを使ってこのgithub.ioを書き直したりしました。 表ページとか体裁が良くなったかなと思います。 実は今までサイトジェネレーターなるものは使ったことがなくて、一応はCSSもHTMLも理解は出来るので手でタグを打って記事を更新しておりました。 しかしながらちょっと何か書こうと思うとやっぱり途端にめんどくさくなって「もうええかな…」みたいになるという大きな欠点がありました。 記事だけなら良いんですがMainページやら分類ページも自分で編集しないといけないですしね… で、タグをあまり打たなくて更新できるといえば、真っ先に思い浮かぶのがWordpress等の動的なジェネレーターなわけですが、Githubのページだと当然ながらサーバが動かせないのでWordpressなどは要件から外れてしまうんですよね…
Hugo とは／Hugo をインストールする
Hugo とはHugo (https://gohugo.io/)Hugo は Jekyll や Middleman と同様の静的サイトジェネレータです。 Markdown 形式などで記述したコンテンツから、HTML ファイルを作成してくれます。 Hugo は Google の Go 言語 で作成されており、他のサイトジェネレータに比べて 動作が非常に速い という特徴を持っています（それに比べて Jekyll は特に遅いですね ^^;）。 公式サイトでも動作の高速さをアピールしており、今後もその方針は変わらなさそうなので安心です。 また、インストールに関しても、他の（Ruby 製や Python 製の）サイトジェネレータは、さまざまな外部モジュールをインストールしなければいけないので時間がかかったりすることがありますが、Hugo であれば一瞬で終わります。 例えば、Windows の実行環境
HUGOによる静的ウェブサイト環境構築
📅 Jul 13, 2019 · 📝 Jun 23, 2020 · ☕ 10 min read · ✍️ Reeve 本ブログ初投稿の記事。 今回はこのサイト自体の環境構築の話をしたい。 この記事の内容 Markdownで書いた記事を簡単に投稿できるウェブサイトを(維持費無料で)構築できる はじめに ブログを書こうとする場合、WordPressを使うのが一般的だと思う。 今までもWordPressで作成したブログは持っていたが、更新が億劫になり、完全に放置している状況になってしまった。 さくらのレンタルサーバーを借りているため、安いとは言え運用にはお金がかかる。 正直放置しているのはもったいないと感じた。 久々にWordPressにログインして、プラグインなどの更新をしたところ、記事を作成するインターフェースが大きく変化してしまった。 ここで完全にやる気を失った… 私が感じている
まくまく Hugo/Go ノート
高速な静的サイトジェネレータ Hugo の使い方です。 Go 言語に関する記事はこちらへ分離しました。 はじめにHugo とは／Hugo をインストールするHugo で新規の Web サイトを作成する記事の作成Hugo で記事を作成するHugo でドラフトページを作成するHugo でドラフトページの一覧を簡単に確認できるようにするHugo のテーマを設定するHugo で独自のテーマを作成するHugo Themes（Hugo テーマの一覧サイト）hugo コマンドと設定ファイルhugo コマンドカレントディレクトリを気にせずに hugo コマンドを実行する (hugo server -s)ポート番号を指定して Hugo サーバーを起動する (hugo server -p)Hugo サーバーで記事生成のキャッシュを無効にする (hugo server --ignoreCache)複数の Hug
Hugo
インストール バイナリインストール 以下のドキュメント参照。 Hugo | Install Hugo コンパイル 前提として、goが入っていること。 go get -v github.com/gohugoio/hugo 特定のバーションをコンパイルするときは、 上のコマンドを実行したあと、以下のようにする。 (例として、GOPATH=~/go、v0.32をコンパイルする場合) cd ~/go/src/github.com/gohugoio/hugo/ git checkout v0.32 go install 起動オプション 自分がよく使うものです。 -D: ドラフトを含める -F: 未来日を含める --bind port: 特定のポートにバインド サイトごとの設定 これは好みですが、自分は以下のようにしています。 基本項目 必ずセットするもの baseURL: サイトのURL title
Hugo で独自のショートコードを作成する
Hugo で独自のショートコードを作成すると、定型の HTML コードを記事内に簡単に埋め込めるようになります。 ショートコード作成の基本ショートコードは、layouts/shortcodes ディレクトリ内に .html 拡張子のファイルとして作成します。 layouts/shortcodes/my-shortcode.html ファイル名から拡張子を除いたものが、ショートコード名となります。 上記の例の場合、my-shortcode というショートコードを作成したことになります。 記事（Markdown ファイル）の中から、下記のように呼び出すと、上記の内容がそこに展開されます。 content/page1.md ショートコードにパラメータを渡す (.Get)単純なパラメータショートコード呼び出し時に、パラメータを渡すことができます。 下記の例では、２つのパラメータ red、32px
【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でイケてるブログを作る方法 - Qiita
今回は静的サイトジェネレーターのHugoを使って、ブログを作る方法をなるべく丁寧に解説します。 Hugoとは？ 今流行りの静的サイトジェネレーターの一つです。 中身はGO言語で作られています。 特徴はビルド速度がとても早く、ブログやポートレートサイトを作るためのテーマが揃っています。 そしてNetlifyやgithubPagesのサービスと組み合わせることによって、無料でホスティングすることもできます。 さらにnetlify CMSを使うと、WordPressのようにブラウザ上の管理画面で記事を投稿できます。 今回はシリーズでHugo + gitlab + Netlify + Netlify CMSを使い、 無料ホスティングすることを目指そうと思います。 まずはこの記事ではHugoのテーマのサンプルブログを立ち上げて、 最初の1記事を投稿するところを解説しようと思います。 作業環境はWSL
[Hugo] 記事にシェア数を表示する - atuweb 開発ブログ
やりたいこと 記事にシェア数を表示したい。 当ブログのシェア数表示 なぜ ? Hugo は静的サイトジェネレーターです。 この「静的サイト」であることが大きなメリットであり、逆に言うと制限が大きくデメリットでもあります。 具体的には、Hugo で生成したサイトには通常「検索やお問い合わせフォーム」を設置できません。 同じように、「記事ごとのシェア数というデータ」は可変なもののため、取扱が難しいのです。 実装方針 JavaScript は使用しない 静的サイトに動的機能を実装する手段として、まず思い浮かぶのは JavaScript で頑張る方法です。 しかしながら「ブログ記事閲覧のたびにシェア数を取得する」ような実装ですと、「静的だから軽い」というメリットを潰してしまい、本末転倒です。 data から情報をロードする 調べてみると、Hugo では「data ディレクトリ以下のファイルにアクセ
![[Hugo] 記事にシェア数を表示する - atuweb 開発ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a307f248fa73a443acb2268d14a64076c8e6f956/height=288;version=1;width=512/https%3A%2F%2Fatuweb.info%2Fimages%2Feyecatches%2Fhugo_lg.png)
静的サイトジェネレーターHugoの良いとこ悪いとこ | Money Forward Kessai TECH BLOG
はじめまして。フリーランスのデザイナーの石原（@is8r_）と申します。 MF KESSAIさんでは業務委託のデザイナーとして創業当初よりお手伝いさせていただいております。 書いている事 MF KESSAI TECH BLOGは、静的サイトジェネレーターHugoで構築されておりまして、制作するにあたりアレコレ知見を得ることができたのでこちらでご紹介させていただきます。 Hugoの導入を検討されている方の参考になれば幸いです。 Hugoを採用した経緯 といっても単純な話なのですが、MF KESSAIではサーバーサイドの開発にGolangを採用していて、ブログを構築するにあたり、数ある静的サイトジェネレーターの中でもGolangで動いてるのがあるぞ！という事でHugoを採用する事となりました。 技術ブログ以外のMF KESSAIのサイト、コーポレートサイトやランディングページなども同様にHug
HugoとNetlifyで、簡単に自分のブログを公開してみよう！｜株式会社しずおかオンライン
こんにちは。システムエンジニアの山下です。 今日は、プログラムを書かずに簡単に自分のブログサイトをネット上に公開してみよう！ということで、最近、巷で話題の静的サイトジェネレーターである「Hugo」と、webサイトをネット上に公開する「Netlify」を使用して、スピーディーに、簡単に、そして費用0で、ネット上にブログサイトを公開してみようと思います。 Hugoとは Go言語で作られている、静的サイトジェネレーターです。静的サイトジェネレーターとは、 HTMLやCSSで作られる静的ページを簡単に作ってしまうツールです。例えば、今回作ろうとしているブログのようなwebシステムを作るためには、大まかなに以下のような動的処理が必要になります。 ①ブログ記事を作成し、内容をデータベースに保存 ②保存されたページをデータベースから取得し画面に表示する しかしHugoのような静的サイトジェネレーターでは
Hugo で静的なサイト・ブログを構築しよう - Qiita
この記事について この記事は Hugo でブログを始めようとしている方へ向けた Hugo 入門記事となっており、Hugo による静的なブログの構築・運用方法 を簡単にですが紹介します。 Hugo の Awesome は以下をどうぞ。 Awesome Hugo - 有用なリンクまとめ - Qiita 動的サイトから静的サイトへ WordPress で構築する、というのが長らくブログ運用の主流でした。もちろん現在も多くのサイトが WordPress によって運用されていますが、最近では「 静的サイト 」という選択肢も広まってきています。(調査したわけではありませんがこの分野に関心がある人の中で実感している人は多いと思います。) 静的サイトとは HTML, CSS, JavaScript のみで構成 サーバーサイドの処理を PHP で書いたりする、というような必要はありません。私たちが気にしなけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
静的サイトジェネレータHugoを使ってブログを作ろう！！|静的サイトジェネレータHugoを使ってブログを作ろう！|Techpit
Zen
Hugo Themes Site
hugoブログの作り方
世界最速のウェブサイト構築フレームワーク
なかけんのHugoノート