このポストでは、どのように私は私の開発と実行の概要blog site . 私は簡単に私の技術の選択肢を説明し、そのようなプロジェクトを作成するためのスタックを使用する方法について詳細な説明を行います.あなたが最後まで私と固執するならば、あなたは自由のために美しく、簡単にカスタマイズ可能な静的ウェブサイトを走らせる方法を知っています.
私がブログを始めることに決めた理由はmy first post , 私はすでにgitlabのページに精通していたMkDocs 静的サイト発生器私はドキュメンテーションウェブサイトを作成するためにこの組合せを使用しています、そして、それは非常によく働きます.
したがって、私のブログサイトのためにもGitlabページに頼るのは簡単な選択でした.私は、その特徴をカバーしますlater section このポストの.すでにカバーされているホスティングで、私は実際のサイトを作成する必要がありました.

Hugoによるサイトの作成

このブログを始める前に、私が生産環境で使用した唯一の静的サイトジェネレータは、mkdocsでした.
より適切な選択肢の良い概要が与えられますstaticgen.com . 私の目的のために、おそらく、すべての人気のプロジェクトは良い選択でした.私は2つの理由でヒューゴと行くことにした.

私はしばらくの間試してみたいと思っています.

オープンソーステーマの非常によくcuratedリストがありますon the official website .

では、仕事に行きましょう.
Ubuntuを起動するには、2つのコマンドを実行してHugoをインストールし、新しいプロジェクトを作成できます.

# install hugo
sudo snap install hugo

# create a new project
hugo new site personal-blog

Ubuntuを使用していない場合は、システムのパッケージマネージャが同様の簡単な経験を提供する可能性があります.参照the official documentation 他のオペレーティングシステムのインストール手順については.
当サイトで作業を始める前に、テーマをインストールします.

# install the theme
cd personal-blog
git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

私は、Hugoが使用に非常に前進するのが好きですGIT submodules テーマをインストールする.これは、元のテーマプロジェクトに接続を維持しながら、テーマに変更を適用することが容易になります.今後のブログ記事では、私はテーマ自体に作った変更を詳細に説明します.今のところ、我々はデフォルトで完全に罰金ですHugo-Coder テーマ.
基本的な設定を適用するだけです.単にconfig.toml 次のようにします.

baseurl = "http://www.example.com"
title = "johndoe"

theme = "hugo-coder"

[params]
    author = "John Doe"
    description = "John Doe's personal website"
    keywords = "blog,developer,personal"
    info = "Full Stack Magician"
    avatarurl = "images/avatar.jpg"
    footercontent = "Enter a text here."

[taxonomies]
    series = "series"

# Menu links
[[menu.main]]
    name = "Blog"
    weight = 1
    url  = "/posts/"

次に、最初の投稿を作成します.

hugo new posts/my-first-post.md

新しいブログ記事を適切に認識するためのテーマについては、新しく作成されたコンテンツを置き換える必要があります/content/posts/my-first-post.md 次のようにします.

+++
date = "2019-01-01"
title = "My first Post"
slug = "my-first-post" 
tags = []
categories = []
series = []
+++

最後に、ヒューゴ開発サーバーを起動することによって、私たちの新しい個人的なポートフォリオやブログサイトの最初の一見を得ることができます.単にタイプ

hugo server

それからhttp://localhost:1313/ 新しいサイトを見るには:

あなたのサイトをローカルでテストすることは素晴らしいですが、あなたがJohn Doeである全世界を示して、完全なスタックマジシャンは全く別の何かです.幸いにも、我々は非常にそれを行うに近いです.

ホスティングgitlabページ

gitlabページはgithubページに似ています.
両方の静的なウェブサイトの無料ホスティングを許可します.GitLabページでは、GitLabのCI/CD機能を介してホスト静的コンテンツをビルドすることができます.これは、サイトが自動的にリポジトリへのすべてのコミットで再構築されることを意味します.GitHubアクションのリリースまで、Githubはこれを行うことができませんでした.代わりに、ローカルにサイトを構築し、静的ファイルをリポジトリにコミットしなければなりませんでした.今日では、gitlabとgithubの両方があなたの静的サイトをホストする完全に良い選択です.
当然、新しいリポジトリを作成することから始めます.このリポジトリに何かをプッシュする前に、いくつかの通常のgitメンテナンスタスクを実行したい.gitignore ファイル.あなたがまだそれを知らないならば、あなたはgitignore.io service サービスサイトが生成.gitignore あなたのテクノロジースタックに従いファイル.Hugoにとっては、例えば/public/ フォルダには、我々は非常に多くの我々は、このフォルダをビルドするため、gitlab ciパイプライン経由ですべてのプッシュリポジトリにビルドされます.
すべてが順調になれば、既存のプロジェクトフォルダをプッシュするためにGitlabの指示に従うことができます.

cd personal-blog
git remote add origin [email protected]:<path-to-your-repository>
git add .
git commit -m "Initial commit"
git push -u origin master

最後に、我々はエキサイティングな部分になる:私たちのサイトを構築し、リポジトリにすべての新しいコミットに公開した.あなたがまだGitlabのCI/CD機能に慣れていないならば、チェックしてくださいtheir docs .
幸いにも、始めることは非常に簡単です.単にファイルを置く.gitlab-ci.yml プロジェクトのルートで.このYAML設定ファイルはすべてのCI/CD設定を保持します.Hugo PowerBlogの場合、以下のファイル内容が十分です.

image: monachus/hugo

pages:
    script:
    - hugo
    artifacts:
        paths:
        - public
    only:
    - master

最初の行は、パイプラインに使用するDockerベースイメージを指定します.この簡単なチュートリアルでは、任意のテスト段階を使用しないではなく、我々は1つだけの単純な仕事をpages . を実行するhugo コマンドで、静的サイトコンテンツをpublic ディレクトリ.いくぶん偶然、これはまた、gitlabページが我々の静的サイト内容を見つけると思っているところです.唯一のことを行うにはpublic ディレクトリa job artifact . 最後の2行はオプションであり、サイトがビルドされ、コミットされていることをmaster 枝.
一旦このファイルをリポジトリのマスターブランチにプッシュすると、静的サイトは数分以内に構築され発行されます.すべての順序で確認し、あなたの新しいウェブサイトのデフォルトのURLを参照してください.あなたがドメインを所有するならば、あなたはデフォルト*よりむしろ使用したいです.GITLAB .イオ・ワンto the docs またはチェックアウトmore detailed tutorial . あなたが望むならautomatic certificate management using Let’s Encrypt カスタムドメインです.次の節で説明したようにCloudFlareを使用している場合は、必要はありません.

負荷時間の高速化とCloudFlareによるURLリダイレクトの設定

この設定でCloudFlareを試してみた私の最初の理由は、WWWから非WWW URLにNameHupを使ってリダイレクトしているということでした.その問題はサイトがAを使っているという事実によって複雑になった.デフォルトではHSTS preload list . NameUpは、完全にサポートしているというよりも、独自のSSL証明書を販売するのを好むようです.
私は、単にCloudflareにサインアップすることによって、この問題を解決しました.無料版は私にぴったりです.サインアップした後、CloudFlareを開始するための非常にシンプルかつ正確な手順を提供します.基本的に、ドメイン名を登録する必要があります.
一旦あなたのサイトがCloudflareで走らせるように構成されるならば、あなたは彼らのページ規則機能を使うことができますwww . あなたの標準的な非WWW URLまたはその他の方法へのサブドメイン.
さらに、CloudFlareはあなたのクライアントにサーバーからSSLの暗号化をボックスから提供します.GitLabページでホストされて、CloudFlareを通してサーブされるすべての静的サイトは、どんな追加構成なしででもHTTPSの上でアクセスできます.もちろん、私たちもCloudFlareからGITLABページホストへのトラフィックを暗号化したいです.これのために、Cloudflareは起源証明書を提供します.私はこれをさらに説明しませんtutorial on this provided directly by GitLab .
Cloudflareが私のサイトのために提供するスピードアップに数を置くのは難しいです.どんな問題もなく重要な負荷を扱うことができますが、私は言うことができます.私の忙しい週末はmy post on personal knowledge management ハッカーニュースのフロントページに到達し、2日で30 K以上のユニークな視聴者を引き付けた.その場ははずれなかった.

結論

このセットアップの最大の利点は、その金融コストです.買いは別としてtkainrad.dev ドメインは、私のブログサイトを作成していないお金がかかりました.さらに、現在はゼロコストで稼動している.これは、gitlabページのおかげで、限られた時間枠に制限されません.これは、我々のホスティング法案を減らすために化学パンチに頼らなければならないより非常によいです:

あなたが基本的なプログラミング技術を持っているならば、私はホスティングプロバイダーに毎月の料金を払う代わりに、この無料サービスであなたの静的サイトを主催することを強く勧めます.