ソフトウェアを構築し、技術文書を書くことから何年も経過した後、私は自分の経験を共有し、同様の旅で他の人々を助けるためにブログを作成することに決めました。
Choosing the Platform
私にとっては、できるだけ最小限のソリューションを持つことが重要ですが、自分の Markdown-to-HTML 出版スクリプトを構築することは将来のためのアイデアですが、私の直ちの優先事項はブログを迅速にオンライン化することでした。
今日では、個人的なウェブサイトを作成するのに困難はないと思います。この取り組みに役立つさまざまなオプションがあります。私は私の頭に浮かぶオプションをリストすることから始めます。
- CMS(例えば、WordPress、Content Hub、Joomlaなど):WordPressのようなプラットフォームは強力ですが、静的コンテンツブログには過剰に感じました。
- Jekyll: このソフトウェアは完璧で、他の開発者がブログをホストするために広く使用しているように見えますが、Rubyの経験がないため、私はこれを使用しないことを選択しました。
- Hugo は Go で書かれており、Go テンプレート(Go で多くをコードする場合)、Markdown (Jekyll に類似)でページをレンダリングする際に使用します。
- 11ty、Astro、Hexo、および他のNode.jsベースの代替品です。それは好みの問題ですが、個人的には、Node.js ツールの使用を最小限に抑えることにしました. 多くの強力なツールがありますが、Node.js エコシステムは急速に変化することで知られています。
HUGOの設定
過去のソフトウェア関連のプロジェクトに関する大量のドキュメントを生産した後、私はMarkdownと端末ベースのテキストエディターを使用して非常に自信を持っています。
GitHub リポジトリの使用
以前、私はすでに場所保持ファイルを含むGitHub Pagesのウェブサイトを作成し、ドメインをそれに接続したので、既存のレポにファイルを埋め込むには、次のコマンドを入力する必要があります。
hugo new site . --force
これにより、Hugoのウェブサイトを実行するために必要なファイルで現在のリポジトリディレクトリを満たします。その後、テーマやその他のパラメータを設定する必要がありました。hugo.tomlすべてを設定した後、コマンドを入力してサーバーを実行することができます:hugo server
開発モードでサーバーを起動する
このサイトは現在から利用可能です。localhost私はリモートクラウド VM で開発しているので、ローカル Hugo サーバーにアクセスするlocalhostlocalhost インスタンスを外部世界に安全に露出する必要がありました - こうしたニーズのために、逆プロキシが使用されます。
Nginxのような負荷バランスと反転プロキシはかなり一般的で人気がありますが、私はそれを選びました。Caddy私の開発者ウェブサイトをサービスするために、それは努力なくSSL証明書(Let's Encryptを通じて)を設定します。Caddyis done withCaddyfile, where for the domain of interest you write areverse_proxy必要なポートを指定する:
test-blog-domain.com {
reverse_proxy localhost:1313
}
上記の構成でCaddyを起動した後、開発ウェブサイトは、https://test-blog-domain.com(その一つとして、ADNSレコード fortest-blog-domain.comVMの公開IPアドレスで記入されます)。
テーマを追加
Hugo には、GitHub で公開されている無料のテーマがいくつかあります. インストールするには、テーマを含むリポジトリをクローン化し、その後、テーマを更新する必要があります。themeパラメータ inhugo.tomlというテーマを選びました。cactusインストール後、Google Analytics async テンプレートが見つからないというビルドエラーが発生しました。
Error: error building site: render: failed to render pages: render of "/" failed: "/home/user/projects/nexo-tech.github.io/themes/cactus/layouts/_default/baseof.html:3:3": execute of template failed: template: index.html:3:3: executing "index.html" at <partial "head.html" .>: error calling partial: execute of template failed: html/template:partials/head.html:47:16: no such template "_internal/google_analytics_async.html"
make: *** [Makefile:2: up] Error
このような問題の解決策は、githubHugo コミュニティはアクティブで、この Google Analytics エラーを含む多くの問題が GitHub で既存のパッチや議論を持っています。
他の削減警告を修正した後、サイトは動き始めました:
CDN に Web サイトを展開する: GitHub Pages
静的なウェブサイトを展開する方法は数多くあり、ほとんどの場合、ホスティングまたはサーバーが必要です. 通常、これらは無料ではありませんか、または制限されたプランを持っています; しかし、これには、GitHub Pagesのような例外があります. GitHub リポジトリの特定の支店から静的なコンテンツを提供するか、構築アーティファクトを作成し、カスタマイズされた方法で展開することに基づく事前構築された GitHub アクションを使用することは可能です。
そのことを知って、個人的なGitHubアカウントはストレージアーティファクトスペースに非常に制限されており、そのストレージスペースを管理することは退屈であるため、静的なウェブサイトの資産が事前定義されたGit branchで更新されるより単純なソリューションを選択しました(gh-pages(幸いなことに、そこにはactions特にHUGOのために、この目的のために:
- actions-hugo by Shohei Ueda. GitHub Actions 環境で Hugo を設定する簡単な方法
- さらに、Shohei Uedaによって、このアクションは、指定された分野に静的資産を押す。
以下は、Hugo を gh ページに展開する GitHub アクションワークフローのコードです。カスタムドメインが必要な場合は、CNAME ファイルをコピーする必要があります。publicディレクターを運営する前にgh-pagesさらに、リポジトリのワークフローの許可は「読み書き」に設定されなければなりません。Settings > Actions > General( )
name: Build and Deploy Hugo
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true
- name: Build site
run: hugo --minify
- name: Add CNAME file
run: cp CNAME public/CNAME
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
publish_branch: gh-pages
展開が完了すると、サイトはGitHub CDNにアップロードする必要があります. ウェブサイトが動作しない場合は、構築されたアーティファクトを含む支店のGitHub Pagesを設定するようにしてください。
Hugo が設定され、展開されると、今では重要なことに集中できる――私の経験から得た技術的な洞察を共有することにより、このガイドは、自分の仕事のためにシンプルで信頼できるブログを構築しようとする他の人たちに役立つことを願っています。
関連資源
- このサイトのレポジトリ
- HUGO 早速スタート
- GitHub ページの DNS 設定の設定
- Cactus theme for ヒューゴ
- Google Analytics インストール in Hugo
- Caddy Reverse Proxy Quick-Start
