さくらのレンタルサーバー+HUGOでブログを公開する

2025-03-26T00:00:00+09:00 | 4分で読めます | 更新日時 2025-03-26T00:00:00+09:00

@
このエントリーをはてなブックマークに追加
さくらのレンタルサーバー+HUGOでブログを公開する

HUGOを使おうとするとnetlifyなどにデプロイすることを勧められます。
でも国内のサービスを使いたいですよね?

そこでさくらのレンタルサーバーを利用することを考えてみたいと思います。
ブログの公開程度なら一番安いプラン(年額1,980円)で良いと思います。
初期費用無料、転送量無制限、Let’s Encrypt対応となっていて、なかなか使えます。
(このブログもそのプランです)
もしそれ以上のプランがお望みでしたら、ページ下部のリンクから申し込んでいただければ助かります。

サーバーの申し込み、HUGOのセットアップ+テーマの導入は割愛します。
他のブログを探してみてくださいね。

 

HUGOの記事の作成・確認の流れ

記事の作成

HUGO のディレクトリで、 hugo new content posts/new-article.mdhugo new content posts/new-article/index.md で記事を作ります。
なぜ記法が二つあるのかですが、それぞれのテーマによって異なるからです。
それぞれ出来上がるURLが /posts/new-article.html/posts/new-article/index.html になりますので、ブログの構造によって違いますね。
このブログは後者になります。

確認

hugo server -D で表示を確認します。
その時に、 drafttrue になっているものも確認できます。
http://localhost:1313/ でブラウザで表示できます。

ビルド

記事の設定部分の draftfalse に変えて、 hugo --minify --gc をします。
そうすると public ディレクトリがサイトの構造になっているはずです。

サイトにアップロードする

public ディレクトリの内容を、さくらのレンタルサーバーの www ディレクトリに丸々アップロードすれば完了です。
ただ、これだとFTPソフトを立ち上げなくてはならず、コマンドだけでできないので、不便ですね。

同期にrcloneを使ってみる

rcloneというソフトを使ってみるといいでしょう。

ダウンロード

https://rclone.org/downloads/
こちらからダウンロードできます。
Intel/AMD - 64bit のwindowsを選びましょう。(macの方は必要なものをどうぞ)

インストール・設定

適当な場所に解凍し、パスを通しておきます。
方法は以下を参照してください。
https://chatgpt.com/share/67e415fc-849c-8006-b840-bb3b47cda317

先ほどの HUGO のディレクトリに cd します。

  1. rclone config と入力しエンター
  2. n (new remote)を選択
  3. namesakura を入力(判別できる名前)
  4. Storage15 を入力(FTP)
  5. hostxxxx.sakura.ne.jpxxxx は申込時に決定されたサブドメイン) を入力
  6. user に申し込み時に決定されたユーザー名(多分サブドメインと同じ)を入力
  7. port はエンターでデフォルト
  8. FTP passwordy を入力
  9. password に申し込み時に知らされたパスワードを入力
  10. もう一度パスワードを入力
  11. tls はエンターでデフォルト
  12. explicit_tlstrue を入力
  13. Edit advanced config? はエンター
  14. Keep this "sakura" remote? はエンター
  15. 最後に q で終了

これで設定は完了です。

同期(アップロード)

それでは同期してみましょう。
rclone sync -v ./public/ sakura:/home/xxxx/www/ を入れエンターを押します。
xxxx は申込時に決定されたサブドメイン)
その時に最後の / を省略しないように注意してください。

これでコマンドだけでアップロードできるようになりました。

npmを使う

もしnpmを導入しているようなら以下のような package.json を作ると楽になります。

{
  "name": "hugo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "hugo --gc --minify",
    "sync": "rclone sync -v ./public/ sakura:/home/xxxx/www/",
    "clean": "rmdir /S /Q .\\public",
    "serv": "npm run clean && hugo server --gc -D"
  }
}

npm run build でビルド、npm run syncでアップロード、npm run servでローカルサーバーが立ち上がります。
(macの方はcleanのコマンドを変更する必要があります)

 

HUGOを使っている方は多いんでしょうか?あまり見たことが無いような気がします。
でもショートコードがあるのである程度のカスタマイズもできますし、出力されるのが静的HTMLなので軽いのも良いですね。
何か案件で使ってみたいものです。

テンプレートがGoのものなので少し慣れないところもありますが、基本文法が分かってしまえば作れると思います。

© 2024 - 2025 EICON Web Site

🌱 Powered by Hugo with theme Dream.

このブログについて

もう30年近くプログラマーを続けている なんちゃってプログラマーが技術的なことをメモしたり、誰かに伝えるために記録しているブログです。

不正確な点があったり、もっと効率的な方法があると思います。その点は個人ブログだと思って辛抱していただければ幸いです。

このブログを書いている人

ShigeUe こと植西重史と申します。

「エイコン」という屋号でフリーランスとしてWebシステムやWebページ制作でのんびりまったりとお仕事をさせていただいております。
「エイコン」は「どんぐり」の英訳の acorn (エイコーンと読む)とパソコンなどの「コン」部分を合わせた造語です。

得意分野はPHP/Laravel、HTML・CSS、JavaScriptでしょうか。HTMLはセマンティックを意識したページの作成を心掛けております。

お仕事など、お問い合わせは以下のフォームからお願い致します。
EICONへのお問い合わせ