ソフトウェアを構築し、技術文書を書くことから何年も経過した後、私は自分の経験を共有し、同様の旅で他の人々を助けるためにブログを作成することに決めました。 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 開発モードでサーバーを起動する このサイトは現在から利用可能です。 私はリモートクラウド VM で開発しているので、ローカル Hugo サーバーにアクセスする localhost インスタンスを外部世界に安全に露出する必要がありました - こうしたニーズのために、逆プロキシが使用されます。 localhost localhost Nginxのような負荷バランスと反転プロキシはかなり一般的で人気がありますが、私はそれを選びました。 私の開発者ウェブサイトをサービスするために、それは努力なくSSL証明書(Let's Encryptを通じて)を設定します。 is done with , where for the domain of interest you write a 必要なポートを指定する: Caddy Caddy Caddyfile reverse_proxy test-blog-domain.com {
	reverse_proxy localhost:1313
}
 上記の構成でCaddyを起動した後、開発ウェブサイトは、 (その一つとして、 DNSレコード for VMの公開IPアドレスで記入されます)。 https://test-blog-domain.com A test-blog-domain.com テーマを追加 Hugo には、GitHub で公開されている無料のテーマがいくつかあります. インストールするには、テーマを含むリポジトリをクローン化し、その後、テーマを更新する必要があります。 パラメータ in というテーマを選びました。 インストール後、Google Analytics async テンプレートが見つからないというビルドエラーが発生しました。 theme hugo.toml cactus 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
 このような問題の解決策は、 Hugo コミュニティはアクティブで、この Google Analytics エラーを含む多くの問題が GitHub で既存のパッチや議論を持っています。 github 他の削減警告を修正した後、サイトは動き始めました: CDN に Web サイトを展開する: GitHub Pages 静的なウェブサイトを展開する方法は数多くあり、ほとんどの場合、ホスティングまたはサーバーが必要です. 通常、これらは無料ではありませんか、または制限されたプランを持っています; しかし、これには、GitHub Pagesのような例外があります. GitHub リポジトリの特定の支店から静的なコンテンツを提供するか、構築アーティファクトを作成し、カスタマイズされた方法で展開することに基づく事前構築された GitHub アクションを使用することは可能です。 そのことを知って、個人的なGitHubアカウントはストレージアーティファクトスペースに非常に制限されており、そのストレージスペースを管理することは退屈であるため、静的なウェブサイトの資産が事前定義されたGit branchで更新されるより単純なソリューションを選択しました( (幸いなことに、そこには 特にHUGOのために、この目的のために: gh-pages actions 
 
 
 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

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

Hugo ブログをアクションで GitHub ページに展開する方法

About Author

コメント

ラベル

この記事は

Related Stories

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

ユニークなエコシステムを支えるビットコインUTXOのモデル

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

目に見えない層: ユーザーインタビューがかけがえのない資産である理由

ユニークなエコシステムを支えるビットコインUTXOのモデル

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps