ハウツーとブログとポートフォリオを作成する方法


ブログを始めて、自分のカスタムドメインでホストしたかったので、久しぶりです.真実は言われて、私は怠惰なブロガーです-私は時折書くだけです.
もともと私はWordPressでブログを設定したかったのですが、VPSサーバにはブログを設定してホストしていました.
それを追加するサーバーを維持し、最新の任意のリスク、バックアップなどを避けるために.ちょうど私が本当にしたくない余分な仕事のようです.
その他のオプションはBloggerのブログとカスタムドメインへのリダイレクトでした.それは再びGoogleの外部依存性のために右に見えませんでした.(彼らがそれを感じるならば、彼らはどんな警告なしででもあなたのブログを削除することができます.
現在技術的な背景と私の好奇心から学んで、私は静的サイト発電機に変わりました.何か大きなことを聞きましたHugo ので、なぜそれを試してみない考えた.
GoTubページをサポートしていて、私はGitHubと無料で全体のものをホストすることができます.

Hugoサーバーのローカル設定


インストール


異なる環境のインストールに専用のセクション全体がありますdetailed instructions .

テーマの選択


いくつかのテーマを閲覧した後silhouette-hugo .

新しいプロジェクトテンプレートの作成とテーマの分岐。


hugo new site <SITENAME>
cd <SITENAME>/themes
git clone https://github.com/mattbutton/silhouette-hugo.git

プロジェクトの設定ファイルにテーマを追加します。


cd..
echo 'theme = "silhouette-hugo"' >> config.toml

Hugoサーバーのローカル起動


Hugo server
一度ヒューゴが開始されると、サイトをプレビューすることができますhttp://localhost:1313

サイトデータの変更


設定に移動します.あなたのプロジェクトのメインディレクトリのToMLファイルをそこから、あなたは、ベースURL、サイトのタイトル、ソーシャルリンクなどのサイト構成データを変更することができます.

いくつかのCSSを使用してわずかに変更するテーマのルックアンドフィール。


移動/テーマ/シルエットヒューゴ/資産/CSS
ここにスタイルがあります.CSSファイル.このファイルを編集することでテーマのスタイルを変更することができます.

これから



これに



I made a stupid mistake by editing the original theme and adding my own css with this.


私の間違いから学んで、これのメモを作って、あなたが第3の部分ライブラリ/テーマを使用しているとき、これまでにオリジナルのファイルを編集しないでください。代わりに、独自の新しいファイルを作成し、参照してください。


Hugoについて最も気に入っているのは、HTMLページの即時の変更です.CSSプロパティを変更/追加するとすぐに、ウェブサイトのデータの変更を見ることができます
Hugoで作成されたサイトは静的サイトであり、Githubは静的ウェブサイトのための無料ホスティングを提供しますGithub Pages .

githubリポジトリを作成し、ローカルマシンにクローンします


まず最初にやるべきことはGithubに2つのプロジェクトリポジトリを作成することです.あなたのウェブサイトディレクトリとして正確な名前であなたの最初の倉庫に名前を挙げてくださいYourProjectNanme (ローカルマシンで作成したプロジェクト)と2番目のものに対しては< Yourusername >として名前を付けます.ギタブ.入出力このリポジトリにはhugoで作成された静的コンテンツが含まれます.
さて、それらのreposをあなたのローカルマシンに引っ張りなさい
cd <YourProjectNanme>
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git
cd YourUserName.github.io
git clone https://github.com/YOUR-USERNAME/YourUserName.github.io.git
あなたの初期化<YourProjectNanme> 下記のフォルダ
git init
とレポリモートremote and add
git remote add origin https://github.com/YOUR-USERNAME/YourProjectName.git
git pull origin master

設定ファイルの編集


変更をコミットする前に、編集する必要がありますconfig.toml (プロジェクトの「YourProjectName」のルートディレクトリにある)ベースのURLを変更します.
baseurl = "https://YourUserName.github.io" // Change YourUserName with your GIthub Username 
--- OR ---
baseurl = "https://MySpecialDomainName.com" // Custom Domain Name 

静的コンテンツの生成


HUGOで静的コンテンツを生成します
hugo -d ../YourUserName.github.io
そして今、我々のhugoコードをgithubリポジトリにプッシュ
cd YourProjectName
git add .
git commit -m "your message"
git push origin master
と静的コンテンツをGithubにプッシュ
cd YourUserName.github.io
git add .
git commit -m "your message"
git push origin master

カスタムドメインの設定


GitTubページでカスタムドメインを使用するには、設定する必要がありますA 我々のドメインのための記録
以下のIPアドレスをA あなたのドメインの記録.
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
プロジェクトにカスタムドメインを追加する2つの方法があります.
  • プロジェクトのルートディレクトリにcnameファイルを作成する
  • 用途Settings GithubプロジェクトRepoからのオプションとカスタムドメインを追加します.

  • オプション2で行く
    Githubプロジェクトのrepo yourusernameを開きます.ギタブ.IOと設定ページに移動します.Githubページのセクションを参照し、カスタムドメインを追加するオプションがあるまでスクロールします.
    カスタムドメインを追加し、[保存]ボタンをクリックします.チェックボックスもありますEnforce HTTPS . チェック(それは暗号化の層を提供します、そして、あなたのサイトは見られます)HTTPS ).
    を使用している場合www サブドメインは、あなたがEnforce HTTPS チェックボックス.
    私もAを受け取り、DNSレコードを変更して解決しました.
    cnameレコードを追加しました(DNSプロバイダを使用してこれを追加できます).
    www CNAME priteshusadadiya.com
    
    上の問題は、私が私のリダイレクトをしていたということですwww 私のapex(main)ドメインへのサブドメイン.
    私は、この問題を解決しました
    www CNAME YourUserName.github.io // add your github.io url here
    

    githubがカスタムドメインのHTTPS証明書を生成するのに約48時間かかります。


    終わり



    注意:
    私は将来的にこのプロセスを文書化しています.たぶん、これはあなたにも役に立つことができます.
    ハッピーコーディング.
    もともと私のown ブログ.
    Creating a blog with Hugo static site Generator

    Hosting Hugo site on Github Pages with Custom Domain