前回の「Static Site Generator」エントリの続きです。 Static Site Generator の Hugo を使ってみました。 ビルドが爆速なのがすごく良いんですが、いくつかはまったのでまとめておきます。 実際には12個もはまってないんですが。 1. デフォルトのテーマ(theme)が設定されていないのでいきなり起動しても何も表示されない Hexoの場合 # hexo コマンドのインストール npm install hexo-cli -g # 新しいサイトを作成 hexo init blog && cd blog && npm install # ビルドしてサーバを起動 hexo server とするだけで、デフォルトで設定されたlandscapeというthemeで起動し、 http://localhost:4000/ を開けばトップページが見れます。 Hugoの場
長らく VPS を使って WordPress で運用してきたこのブログですが、WordPress の更新もきつくなってきたのでここらで静的サイトに移行しようということで、重い腰を上げてHugoに移行してみました。合わせてホスティング先をAmazon S3にしました。 移行手順 メモ程度に残しておきます。 StaticPress で既存のブログコンテンツを HTML に吐き出す StaticPressという WordPress を静的コンテンツに変換するプラグインがあります。最初はこれを使ってホスティングしようかと思っていたのですが、WordPress の面倒をローカルですらみたくなかったので諦めました。ただ、ここで一度吐き出しておいた HTML から移行を行いました。 HTML をパースして必要な部分のみ Hugo 形式に変換 サイドバーとかは不要なので、コンテンツの本文相当の部分とコメン
2011 年 8 月 25 日から数えて 3 年と半年、このブログは WordPress で運営してきたのですが、この記事から Hugo という静的サイトジェネレータで運用します。 当初は WordPress も PHP も分からない微生物専攻の大学生だったのが、最近では WordPress テーマ/プラグイン作成をする仕事をしていて、時間の流れは不思議だと感じるこの頃。そして、WordPress のことが大まかに掴めたからこそ、他のブログツールを勉強したいなと思いました。 調べてみたらフロントエンドエンジニア界隈で、Go 言語で作られた Hugo という静的サイトジェネレータがなんか流行りっぽいので、それに移行しました。 Octopress から Hugo へ移行した | SOTA Jekyll が許されるのは小学生までだよね - MOL WordPress からの移行方法 まだ、公式に
このブログは静的サイトジェネレータ Hugo によって生成された静的ファイルをアップロードして作られています。今回、ホスティング先を Sakura Internet から Amazon S3 (Simple Storage Service) に変更しました。 この記事では、導入する際に行った Amazon S3 の静的サイト設定、Route53 によるドメイン管理についてメモします。 Amazon S3 https://aws.amazon.com/jp/s3/ クレジットカード番号の登録、電話番号認証を行って、アカウントを作成しました。[ストレージ & コンテンツ配信] → [S3] → [バケットの作成] からバケット名 rakuishi.com を作成しました。 ちなみに、アカウント作成直後では「反映まで最大 24 時間かかることがあります」と言われ、設定できませんでしたが、寝て起き
基礎知識 HugoのテンプレートエンジンはGo言語標準の Package template(html/template) 変数 :=で変数に値を代入 BaseUrl(設定ファイルで設定)をテンプレート中の複数箇所で使う場合に変数に入れたりする。 {{ $baseUrl := .Site.BaseUrl }} 記事のフロントマターの値を取得 フロントマターとは、各記事の冒頭にtoml等で書く記事のメタデータ {{ .Params.Title }} 設定ファイル(config.toml)の値を取得 {{ .Site.Params.CopyrightHTML }} グローバル変数にアクセス $を付けると、場所関係なくグローバル変数にアクセスできる {{ $.Site.Title }} コメント html生成時に破棄される {{/* a comment */}} こんな書き方は不可(エラー) {{
以前書いた「デザイナーも静的サイトジェネレーターが使えた方がよいのではないか」の記事が最近よく見られているので、追い記事を書いてみようかと思います。 静的サイトジェネレーターはお客様サイトに使えるのか 前回記事で紹介したように、このブログは「middleman」というツールを使って静的サイトとして運用しています。なので、ファイルも HTML / CSS / JavaScript のみとシンプルです。 静的サイトのメリットは、CMS で必要な DB や サーバ側のシステムがいらず、セキュリティリスクが少ないことと、実体のあるファイルを読み込むため動的サイトよりも早いことです。 また、一定のスキルと知識があってターミナルを使うことに抵抗のない Web デザイナーさんであれば、静的サイトを構築する様々な便利ツールがあるので難しくはありません。 ただこれだと、お客様に静的サイトジェネレーターなどを
このブログをWordPressからHugoに移行しました。HugoというのはGo言語で作られた静的サイトジェネレータでして、簡単に言うと静的なhtmlファイルを吐きだしてくれるツールです。 Hugoにした理由WordPressは人気あるし利用者も多いので情報も多くて運用しやすかったのですが、セキュリティとかDBとかサーバ周りのトラブルが多いのが個人的にはネックだったんですよね。静的サイトジェネレータを使えばそれらの不満点を一気に解消できるというのが移行の一番の理由。 Hugoにしたのはわりと最近名前をよく聞いていたのと、ざっと調べたところ日本語の情報もそれなりに見つけることができたから。ビルドが速いっていうのも魅力だった。あと友達のrakuishiくんが使っていたのも後押しになりました。 このブログはテーマも自作したのですが、テーマを作る上でrakuishiくんのブログとrakuishiく
これまでWebDesign Dackelという WordPress で構築したブログをやっていましたが、幾つか理由があって新しくブログを始めることにしました。 前ブログは消さずに更新を止めるだけにする予定です。 なぜ移行したか? 大した理由では無いですが、以下が移行の理由です。 ブログ名を変えたくなった。ただ変更する位なら新規で作りたい 社会人になるのと同時に始めて丁度 3 年が経ち、色々と見直していきたくなった 技術的な記事以外のものも気軽に書けるような環境にしたかった (ブログ名に「DESIGN」とか入れちゃった…) WordPress のブログ運用に飽きた ブログを書く環境を最適化したい… Ghost、又はJekyll等の静的サイトジェネレータに変えたい 特別 WordPress が嫌いなわけでは無くて、ブログをやってみて管理画面もコメント欄も要らないやって思うようになりました。 そ
このブログで何度か紹介している scaffdog を Rust で書き直し、シングルバイナリとして利用可能なように実装を進めています。その yak shaving 中に表題の Crate を作りました… 2023年10月末に約6年間在籍した CyberAgent を退職し、1ヶ月間の有給消化期間を経て12月に Knowledge Work へ入社しました。Knowledge Work へは、フロントエ… 先日、GitHub Actions の JavaScript アクションを公開した旨の記事を公開しました。 複数リポジトリ間でファイルを同期する GitHub Actions の JavaScript…
こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo のテンプレートの書き方について。 Hugo では、テンプレートの記述に Go 言語の html/template ライブラリを使用しています。 その文法や変数の扱い方等を簡単にご説明したいと思います。 基本文法 テンプレートで変数や関数を使用するときは、中括弧(波括弧)2つで括ります。括弧内で改行してはいけません。 {{ }} 引数はスペースで区切ります {{ printf "%#v" . }} 関数や変数は . を使用してアクセスします .Params.bar コメントは /* */ で括ります。コメント内は改行しても構いません。 {{/* コメント */}} 変数 変数は、前述のように .名前 という形式で記述します。 .Title 前回ご紹介したように Hugo ではページの種類によっ
こんにちは、tamaoki (@t0shiya) です。 今回は、静的サイトジェネレータ Hugo の URL について。 Hugoのデフォルト設定では、URLはコンテンツの配置によって決まりますが、フロントマターのパラメータで指定のURLに変更したり、エイリアスを配置することができます。 URLの変更(ページ単位) デフォルト設定では content/post/sample.md から以下のページが生成されます。 public/post/sample/index.html // URL: [baseurl]/post/sample/ // uglyURLs オプションが true の場合 public/post/sample.html // URL: [baseurl]/post/sample.html 任意のパスに変更したい場合は、フロントマターの url パラメータを使用します。 c
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 HUGO https://gohugo.io/ どもです。 海外旅行は実は今ではないかと企んでいる今日この頃の私です。 前回に続き、爆速続きで申し訳ないなのですが、「HUGO」が快適すぎる。 作業するにあたって、コンパイルなどやはり何かと早いのがいいですね。 そう、嫌われないぐらいにね。 というわけで、今回は所謂、静的サイトジェネレータに関してです。 HUGOて何? HUGOは、プログラミング言語Goを使って開発された静的サイトジェネレーターとなります。 静的サイトジェネレーターはRuby 言語で作られた「jekyll」が有名かと思いますが、それと同類なのですが「HUGO」は構造のシンプルさと処理速度の速さで知られています。 jekyll https://github.c
こんにちは、フロントエンドエンジニアのまろCです。 今回は「HUGO」という静的サイトジェネレータを使った簡単なブログを作ってみます。 HUGOとは http://gohugo.io/ 最近社内でもアツい、Go言語で作られた静的サイトジェネレータです。Octopressより高速にページを生成してくれます。 早速インストール 今回はMacにて動作させてみます。環境は、OSX 10.10.5です。 brew install hugo cd {project_dir} hugo new site maroc.com これで、サイトの雛形ができました。 . ├── archetypes ├── config.toml ├── content ├── data ├── layouts └── static cd maroc.com hugo 上記のようなディレクトリ構造になっているかと思います。 プ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く