Hero Image
markdownlintについて

1. markdownklintについて VSCodeから推奨されていたmarkdownklintを使ってみたところ 非常に便利だったためまとめておく 1. markdownklintについて 1.1. 結論 1.2. 根拠 1.3. 使いかた 1.3.1. 導入 1.3.2. 修正させてみる 1.4. 課題 1.1. 結論 Lint機能は偉大 1.2. 根拠 Markdownを通常のtxtファイルの様にサクサク書きたいところではあるけど、 改行やらスペースやら細々したところがうまくいっていない場合が多い。 後でプレビューして見ると、 繋がっててほしくないところが繋がってたり 改行がうまくいってなかったり 色々と粗が目立ってしまうし、何よりそれの修正が大変。 そこでmarkdownklintを使ってみると 怪しい部分を明示してくれるし、 ありがちな修正なら一発で補正してくれるのでストレスが減る。 1.3. 使いかた 1.3.1. 導入 markdownklintをプラグインの検索窓から検索 インストール markdownファイルに不備があれば「問題」タブにいろいろ書かれる。又、編集中のファイルにも黄色い波線が入る ※ここら辺は他の似たようなプラグインとおんなじ。 1.3.2. 修正させてみる 一通り書き終わってLintの指摘事項にそって自動修正してほしい場合。以下を実行 [Ctrl] + [Shift] + [P] でコマンドパレット開く Fix all supported markdownlint violations in the document と入力 実行 とても便利で我にっこり。 以上でクイックフィックスできそうな部分の修正をしてくれる 1.4. 課題 もっといろいろ便利な機能を導入していってアウトプットにおけるQOLあげたい所存。

Hero Image
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.

Hero Image
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 作成日

Hero Image
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"]

Hero Image
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 自分がそのポジションで行っていた仕事を簡単に記載しましょう。

Hero Image
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 サマリーを記述できます。

Hero Image
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 円グラフで利用する色を設定できます。

Hero Image
hugoで自サイト構築-config.yaml設定編

ディレクトリの大まかな構成 この記事を書いている時点でのディレクトリが以下のような構成になっています。 このテンプレートいじっていて重要なセクションについて、 気づいたことやここら辺のディレクトリはこういうものかなみたいな事を簡単に示します。 だいぶ荒いですけど… assets/images ポートフォリオ向けのyamlやconfig.yaml等で設定する際に参照先となる画像ファイルの保存先だと思われます。 各yamlではポートフォリオ画面やサイト、サイトオーナーなどについての記述や設定を記載できるのですが(詳細は後述) そこで必要となるファイルを必要なyamlのファイル名やディレクトリに合わせて保管しています。 content/notes blog機能実現している部分の一つですね。 当サイトのNoteでの投稿セクションに利用しました。 今後ここにコンテンツを追加することでNoteが拡充されるかと… content/posts blog機能実現している部分の一つですね。 今ご覧になっている記事を構成するディレクトリです。 data ポートフォリオを構成するディレクトリですね。 設定項目ごとにyamlファイルを用意していきそこに任意の設定をしていくことで自分なりのポートフォリオサイトができます。 又jpディレクトリ以外を作ることで他言語にも対応可能です。 config.yamlの設定 以前の操作で生成されたconfig.yamlに設定を記述していきます。 このファイルはこのサイトの基本的な設定を記述できる部分です。 baseURL サイトの公開用URLをここに記載します languageCode hugoは他言語対応サイトを構築できます。 そのための設定として言語や言語ごとのサイトの振る舞いを変更できる項目が設けられています。 languageCode はRSSによってWebサイトの更新情報を配布するためlanguageエレメントに何を記載するかを規定します。 日本語でのみの利用なら"ja"でよいかと思います。 DefaultContentLanguage どの言語をデフォルトとして設定するかを規定できます。 title サイトタイトル theme 利用しているテーマの設定をします。今回はtohaを利用させて頂いていますのでこの"toha"と入力します。 languages このセクションにはサイトが取り扱う言語について記載します。 jp 今回は日本語なのでjpのみです。 複数言語の場合にはこのセクションを増やしてあげると良いです。 languageName languageNameには表記したい文字列を記載するようです。 weight weightには表示の優先度を数値で記載します。 enableEmoji 絵文字の有効化無効化 🤣 enable 有効化することで絵文字を記述できるようになります。✌️ markup TOCの対象についての設定ができます tableOfContents TOCに含める深さの設定 startLevel/endLevel h2 ~ h6までを数値で範囲指定できます ordered 番号をつけるか否かを設定できます params ここの配下にはサイトのパラメーターについての記述を行います。 background 読み込ませたい背景画像のパスを設定します。 assets内にimagesディレクトリを作成しその中にsiteディレクトリを作成します。 背景画像はその中に配置すると読み込んでくれるみたいです。 logo 読み込ませたいロゴ画像のパスを設定します。 main メインロゴを指定します。