hugo

hugoで自サイト構築-GitAction編

gitActionと連携してサーバーへの自動デプロイをするサイトができたらレンタルサーバーへの自動デプロイを可能にし、自身のブランチにpushされたらデプロイを自動でしてくれるようにします。 gitActionとは何ぞや GithubのCI/CDツールです。定義されている通りに任意の処理が走り、いろいろなことを自動化してくれます。自分が定義、あるいは共有されているActionやコマンドの実行を組み合わせ行くことで記述していきます。前提知識の整理取り扱う際の前提知識を整理しておきます。 Workflow 任意のイベントをトリガーに実行される複数のJobからなる自動化されたプロセスです。 .github/workflows/ディレクトリを作成し、そこに任意の名前のyamlを作成します。このyamlが一つのworkflowファイルになります。 Job Workflowを構成するStepのあつまり。 Step stepは自分が定義、あるいは共有されているActionの利用やコマンドの実行によって構成される処理の集合 Action ワークフローの最小構成要素。 use:による共有されているActionの利用やrunによるコマンドの実行など。書いたやつ実際こんな感じで書きました。 name: Deploy on: push: branches: [ master ] jobs: build_and_deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 with: submodules: true # Fetch Hugo themes (true OR recursive) fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: '0.101.0' #hugoのバージョンを記述 extended: true - name: Build run: hugo --minify - name: List output files run: ls public/ - name: FTP-Deploy-Action uses: SamKirkland/FTP-Deploy-Action@4.

August 1, 2022 Read

hugoで自サイト構築-RecentPosts.yaml編

RecentPosts.yamlの設定についてこのセクションでは自分が投稿した最近の記事を掲載する部分について記述できます section このセクションの情報の設定をします。 name このセクション名の設定をします。ナビゲーションバーに表示させる項目名になります。 id このセクションのidの設定をします。 enable このセクションの表示非表示を設定します。非表示にした場合は見えなくなります。 true = 表示 false = 非表示 weight ナビゲーションバーやページに表示させる順番を設定します数値が若いほうが優先されます。 showOnNavbar ナビゲーションバーに表示させるか否かを設定します true = 表示 false = 非表示 template 利用するテンプレートのHTMLファイルを指定します。カスタマイズしたときにこれで読み込ませることができると思われます。

July 31, 2022 Read

hugoで自サイト構築-記事作成編

記事投稿について記事の投稿についてはcontent/postsディレクトリを拡充していくことで行います。記事はマークダウンファイルに記事についての設定と内容を記述することで作成します。又、記事一覧の階層についてはcontent/posts内にディレクトリを作成して、それに合わせて_index.mdファイルをおいて設定を記述することで行います。 postsの作成 content/postsディレクトリ直下に_index.mdファイルを置きます。 _index.mdファイルには設定を以下のように記載します --- title: Posts --- ここでの記載はサイドバーのツリー最上段の記事を選択したときのタイトル名にあたります特にこだわりがなければのままでよいでしょう。サブディレクトリの作成記事を階層分けしたい場合はposts配下に任意のディレクトリを作成しましょう。そしてその中に_index.mdファイルをおいて設定を記載します。サンプルは以下 --- title: Hugo menu: sidebar: name: Hugo identifier: hugo weight: 300 --- title ここは先ほど同じように選択した際のタイトル名ですね menu/sidebar ここではサイドバーでの表示のされかたの設定ができます。 name サイドバーでの表示名の設定ができます。 identifier 階層構造を構成するためにこの階層を特定する必要があるのでidentifierを与えておきます weight 表示優先度を定義します。若いほうがより上部に表示されます。記事の作成あとは記事を作りたい階層に記事名.mdを作成します。そしてそのマークダウンファイルにその記事についての設定と記事の内容を記述していきます。サンプルは以下の通り… --- title: "hugoで自サイト構築-投稿カテゴリ作成編" date: 2022-07-31T16:39:00+09:00 description: hugoで自サイト構築-投稿カテゴリ作成編 menu: sidebar: name: hugoで自サイト構築-投稿カテゴリ作成編 identifier: hugo-aboutCategory parent: hugo weight: 208 tags: ["hugo", "サイト構築"] categories: ["hugo"] --- title ページタイトル date 作成日

July 31, 2022 Read

hugoで自サイト構築-Projects.yaml編

Projects.yamlの設定についてこのセクションは自分が携わったプロジェクトとかを記述できます section このセクションの情報の設定をします。 name このセクション名の設定をします。ナビゲーションバーに表示させる項目名になります。 id このセクションのidの設定をします。 enable このセクションの表示非表示を設定します。非表示にした場合は見えなくなります。 true = 表示 false = 非表示 weight ナビゲーションバーやページに表示させる順番を設定します数値が若いほうが優先されます。 showOnNavbar ナビゲーションバーに表示させるか否かを設定します true = 表示 false = 非表示 template 利用するテンプレートのHTMLファイルを指定します。カスタマイズしたときにこれで読み込ませることができると思われます。 hideTitle ここをtrueにするとタイトル部分を隠すことができます。 buttons このセクションはフィルター機能を利用できるのですが、ここではそこで用意したいボタンを定義できます。 name ボタン名 filter 抽出したい属性 projects 紹介したい自分が携わったプロジェクト等を好きなだけ記載していきます。 name プロジェクト名やタイトルを記載します。 logo なにかロゴとかを付けたいのであればここに画像を設定できます。掲載したい場合は、 assets内にimages/section/projectsディレクトリを作成しその中にロゴを配置します。そしてここでは"/images/sections/projects/XXXXXXX.png"の様にimages以下から指定してあげます。 role 自分の役割なんかを記載していきます。 timeline 何時から何時までの期間携わったのかを記載できます。 repo gitのリポジトリを公開したい・できる場合はここにリンクを乗せましょう。 url サービスのURLがあり公開できる場合はここにリンクを張りましょう。 summary プロジェクトの概要をここに記載できます。 tags 上記のフィルター機能に引っかかるようにカードにタグを与えられます。定義したfilterの値を同じ値を配列で定義してあげればOKです。こんな感じです。 tags: ["PowerShell", "Windows10", "自動化","bat","VBS"]

July 31, 2022 Read

hugoで自サイト構築-Experiences.yaml編

Experiences.yamlの設定についてこのセクションは自分の来歴や経験とかを記述できます section このセクションの情報の設定をします。 name このセクション名の設定をします。ナビゲーションバーに表示させる項目名になります。 id このセクションのidの設定をします。 enable このセクションの表示非表示を設定します。非表示にした場合は見えなくなります。 true = 表示 false = 非表示 weight ナビゲーションバーやページに表示させる順番を設定します数値が若いほうが優先されます。 showOnNavbar ナビゲーションバーに表示させるか否かを設定します true = 表示 false = 非表示 template 利用するテンプレートのHTMLファイルを指定します。カスタマイズしたときにこれで読み込ませることができると思われます。 hideTitle ここをtrueにするとタイトル部分を隠すことができます。 experiences 自分の経験についての内容を設定できます。記述順に表示されるようなので、経歴を昇順にするか降順にするかはここでの並び順に依存します。 company 勤め先について記載します。 name 会社名を記載します。 url 会社のurlを記載できます。 location 会社の所在地を記載できます overview 会社や経験の概要を記載できます。 positions 何をしていたかを記載できます。様々な役職やポジションを経験している場合は複数記載できます。 designation 自分のポジション名や役割名、役職名などを記載できます。 start いつからやっているのかを記載できます。 end いつまでやっているのかを記載できます。ここを記載しない場合は"Present"となるので、現職の場合は記載しないようにします。 responsibilities 自分がそのポジションで行っていた仕事を簡単に記載しましょう。

July 31, 2022 Read

hugoで自サイト構築-Skills.yaml編

Skills.yamlの設定についてこのセクションは自分のスキルとかを記述できます section このセクションの情報の設定をします。 name このセクション名の設定をします。ナビゲーションバーに表示させる項目名になります。 id このセクションのidの設定をします。 enable このセクションの表示非表示を設定します。非表示にした場合は見えなくなります。 true = 表示 false = 非表示 weight ナビゲーションバーやページに表示させる順番を設定します数値が若いほうが優先されます。 showOnNavbar ナビゲーションバーに表示させるか否かを設定します true = 表示 false = 非表示 template 利用するテンプレートのHTMLファイルを指定します。カスタマイズしたときにこれで読み込ませることができると思われます。 hideTitle ここをtrueにするとタイトル部分を隠すことができます。 skills 自分のスキルについて簡単に記述したカードの内容を設定できます。 name スキル名を記載します。 logo ロゴを合わせて表示できます。なければ省略されます。掲載したい場合は、 assets内にimages/section/skillsディレクトリを作成しその中にロゴを配置します。そしてここでは"/images/sections/skills/powershell.png"の様にimages以下から指定してあげます。 summary サマリーを記述できます。

July 31, 2022 Read

hugoで自サイト構築-About.yaml編

About.yamlの設定について今度は各セクションの設定を施していきます。このセクションは現在の自分の紹介とか強みとかを記述するようです section このセクションの情報の設定をします。 name このセクション名の設定をします。ナビゲーションバーに表示させる項目名になります。 id このセクションのidの設定をします。 enable このセクションの表示非表示を設定します。非表示にした場合は見えなくなります。 true = 表示 false = 非表示 weight ナビゲーションバーやページに表示させる順番を設定します数値が若いほうが優先されます。 showOnNavbar ナビゲーションバーに表示させるか否かを設定します true = 表示 false = 非表示 template 利用するテンプレートのHTMLファイルを指定します。カスタマイズしたときにこれで読み込ませることができると思われます。 designation 自分の職業とかポジションとかを記載します。 company 勤め先を記載します。 name 会社名が記載できます。自分は伏せときますが自慢できる経歴なら是非記載しましょう！笑 url 会社のURLを乗せましょう。自分は(ry resume 自分のレジュメや職務経歴書などをここに乗せることができます。 staticディレクトリ内にfilesディレクトリを作成しその中にファイルをおいてそこへのリンクを貼るといいでしょう。不必要な場合は記述しなければ表示されません。 summary 自分の現状や略歴について記述できます。自由に記述するといいでしょう。 socialLinks 貼り付けたいソーシャルリンクやアイコンなどなどをいくつでも設定できます。 name リンク先の名前を設定できます。 icon 任意のアイコンを設定できます。 tohaでは font-awesome をサポートしてくれているので好きなアイコンを指定しましょう。 url アイコンのリンク先をここに記述します。 softSkills 自分の任意のソフトスキルを円グラフで自由にアピールできます。 name 言及したいソフトスキル名を記載します。 percentage 円グラフで表すと何パーセントぐらいかをここに指定できます。 ※指定できる値は 50 <= x <= 100 でかつ 5% 単位になります。 color 円グラフで利用する色を設定できます。

July 31, 2022 Read

hugoで自サイト構築-Author.yaml編

Author.yamlの設定について自分の基本情報について記載する箇所になります。 nickname 自分のニックネームの設定ですね。 image 自分のイメージ画像を設定します。画像の格納場所はassets/images/authorになるのでない場合はディレクトリを作ります。項目に記述するときはimages/author/XXXXXX.pngでよいみたいです。 greeting デフォだと”Hi, I am” + (設定したニックネーム)のようになります。特に気にしなければ”Hi, I am”でいいかなって思ってます。 contactInfo 連絡先の記述ですね。 config.yamlのcontactMeを有効にしていればここに記載した連絡先が表示されます。 email メアド phone 電話番号 summary トップ画面の”Hi, I am”の下部に表示される文字列を記述します。自分の場合は以下のように設定しているので、 summary: - エンジニアをしてます! - このサイトは自分のポートフォリオ兼技術ブログとなっております！ - 興味の向くままにおべんきょしてます！ - マイペース更新ですが宜しくお願い致します！これらが表示されているかと思います。自己紹介や、何をしているか、どんなサイトなのか等を端的に記載するとよいですね

July 31, 2022 Read

hugoで自サイト構築-Site.yaml編

Site.yamlの設定について具体的にどんな位置付けねのかは表現しにくいのですが、サイトの諸設定等を行うファイルという感じですかね。 description サイトディスクリプションの記述に相当する設定です。 HTML上だと以下の記述に該当しますのでSEOや検索エンジンからの見え方を気にする場合は書きましょう。 <meta name=description content="Portfolio and personal blog of Tack."> customMenus カスタムメニューを個別に設定したい場合はここに記述します。 name カスタムメニューに表示される文字列の設定 url 参照するURLを記述します。 hideFromNavbar ナビゲーションバーに表示するか否かを設定できます。 true=非表示 false=表示 showOnFooter フッターに表示するか否かを設定できます。 true=表示 false=非表示 disclaimer 免責事項の記述をできます。長くなってしまうなら専用ページ作ってリンクで飛ばしてしまう方がいいかもですね。

July 31, 2022 Read

hugoで自サイト構築-導入編

Hugoとは HugoとはGo言語で書かれた早くてモダンな静的サイトジェネレーターだそうで、簡単なwebサイトを手軽に構築できることから最近よく耳にするかと思います。 Hugoはテンプレートに沿って設定や任意のファイルを加えてあげるだけで目的に合わせて基本的な機能を持ったWebサイトを構築できます。従来のWebサイト構築に伴う厄介な環境構築やデータベースの用意等は特段必要ないのもメリットです。 Hugo公式Top このサイトもHugoにてテンプレートをお借りして構築しています。このテンプレートにも目的に合わせて様々なものがありどれも素敵ですね。 Tohaとはで、今回は自分のアウトプットとポートフォリオの両方を叶えてくれるテンプレートを探しTohaというテンプレートにたどり着きました。これは、見事に自分のポートフォリオ＋ブログの両方の機能をもってドンピシャだったのでこれを基にサイトを構築していきました。 Tohaのサンプル自分の環境についてまず自分の環境についてですが、 Windows10 HomeEditionにWSL2でUbuntu 20.04.3 LTSを展開しています。今回はそのUbuntu上で作業しています。 install 以下の様にインストールします。自分はUbuntuを利用していますので以下を実行して、マシンタイプを確認して… sudo uname -m このリンク先で最新版のURLを確認します。 https://github.com/gohugoio/hugo/releases ※2022/7/31 時点ではv0.101.0がlatestでした Assets にある対応したものを参照してwgetでダウンロードします。 wget https://github.com/gohugoio/hugo/releases/download/v0.101.0/hugo_0.101.0_Linux-64bit.deb 以下で解凍を実行 sudo dpkg -i hugo_0.101.0_Linux-64bit.deb 以下apt-getで取得できるものは古いversionなのでバージョンを上げてやらないとうまく動かない箇所が出るので注意が必要です。 sudo apt-get install hugo 自分の場合は、記事の日付表示が “:date_full” となっていて調べてみたら古いバージョンを取得していたからだと気づきました…。インストールの確認については以下 hugo version v0.68.0以上であればTohaは適用可能だそうです Extend Version Extend Versionが必要な場合は以下のような操作になります。 install時の操作と基本的には同じですがwgetするものを hugo_extend_XXX… となっているものにしましょうよって自分の場合は wget https://github.com/gohugoio/hugo/releases/download/v0.101.0/hugo_extended_0.101.0_Linux-64bit.deb 以下で解凍を実行 sudo dpkg -i hugo_extended_0.101.0_Linux-64bit.deb となります。 Hugoサイトのスケルトンの作成サイトを作成したいディレクトリで以下のコマンドを実行します hugo new site .

July 5, 2022 Read

初投稿

hugoで自サイトを構築してみた！やっと初投稿できました～ hugoによるサイト作りに興味があったのでいろいろなサイトを参考に試行錯誤しながら作成してみました！このサイトは自分の学んだことをはきだす場所兼ポートフォリオとして使おうと思っています。ローカルの個人的なめもやgitにTILを置いたりはしてたんですがちゃんとした形（…といってもテンプレをカスタマイズしただけですが…）にはしていなかったなぁと思いせっかくだから挑戦してみました。サイト名やら取得ドメインなんかは超適当です。とにかく思い立って手を動かさずにはいれなかったので不格好ながらやってみました得られた知見とかそのほかいろいろもぼちぼちまとめていきたいですね。今回、このサイトを公開するにあたって以下のサイトを参考にしました！この場を借りて御礼申し上げます！ Links ■このサイトのテンプレートやカスタマイズについて参考にしました Toha ■hugo × ロリポップ × gitAction でアップロードするために参考にしました hugoを使って爆速でブログを作成する Thank you for great temprate & information & knowledge !

July 4, 2022 Read