你的浏览器还没开启 Javascript 功能!

Hexoを使って自分独自の技術ブログを構築する

エンジニアにとって技術ブログを書くことはとても有意義です。まず、ブログで自分の成長を記録でき、仕事や学習における自分の考えを整理できます。また、ブログから自分を宣伝でき、社内&社外の影響力を強めることができます。いざ転職しようとしたときに、ブログが自分のポートフォリオになります。

当然のことですが、ブログを書く以上継続しなければいけません。
三日坊主ですとあまり収穫がないのは言うまでもありません。

前提

1. このコンテンツで扱うこと

  • Hexoを用いて、ブログを構築
  • Hexoで作成したコンテンツをGitHub Pagesにアップロード
  • Domainを購入して、GitHub Pagesに適用する

2. 環境

NodejsとGitさえインストールされていれば、OSはなんでも構いません。

環境/ソフトウェア内容
OSWindows or Max or Linux
Nodejsnodejsはltsがおすすめ
Gitgitは公式より最新版で良い

Hexo構築

1. Hexoとは

Hexoは高速でかつシンプルなブログ構築のフレームワークです。Markdownで記事を作成し、HTMLへ変換できます。短時間で静的コンテンツのWebサイト作るなら、かなりいい選択肢だと思います。

エンジニアならMarkdownを使い慣れているはずなので、学習コストも少ないです。

構築手順も公式リファレンスで丁寧に書かれています。

2. 初期作業

まずはnodejsとgitがちゃんとインストールされているかどうかを確認します。

 node --version
 npm --version
 git --version

npmを用いてHexo Cliをインストールします。

npm install -g hexo-cli

これでブログ構築する準備が整いました。

3. Hexoを使ってブログ構築

ここで書く内容が古くなる可能性もありますので、できれば一回公式リファレンスを読んでください。

まずはブログのコンテンツ保存用のフォルダを初期化します。

hexo init blog

ブログのフォルダに入り、node必要モジュールをインストールします。

cd blog
npm install

Hexo cliでクリーンとコンテンツ生成

hexo clean
hexo generate

下記のコマンドでローカルでブログサイトを起動します。

hexo server

ポートを指定するやり方

hexo s -p 8000 -o

これで下記のように初期ページが表示されます。

4. Hexoの設定情報を変更

ブログの設定情報は_config.yml から編集できます。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: dongsuのブログ
subtitle: 個人的な技術のナレッジの集約の場
description:
keywords:
author: dongsu
language: ja
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

よく使うYAMLファイルの関連オプションの説明は以下です。

オプション説明
titleWebページのタイトル
subtitleサブ開いとる
description説明
keywordsWebサイトのキーワード、カンマで複数書けます
author自分の名前
languageWebサイトの言語
timezoneWebサイトのタイムゾーン、デフォルトはPCの設定時刻になります
url文字通りURL
rootWebサイトのルートディレクトリ
source_dirMarkdownやimageなどのコンテンツを保存するフォルダ、デフォルトはsource
public_dir公開用コンテンツの保存フォルダ、デフォルトはpublic
tag_dirタグフォルダ、デフォルトはtags
archive_dirアーカイブフォルダ、デフォルトはarchives
category_dirカテゴリーフォルダ、デフォルトはcategories
auto_spacing英単語があるときに半角空白の挿入、デフォルトはfalse
titlecaseタイトルを大文字に変換する、デフォルトはfalse
external_link新しいリンクで開く、デフォルトはtrue
relative_linkリンクをルートディレクトリの相対アドレスに変更する、デフォルトはfalse
default_categoryデフォルトのカテゴリー
date_format日付形式、デフォルトYYYY-MM-DD
time_format時間形式、デフォルトHH:mm:ss
per_pageページごとの記事を表示する件数、デフォルト10、0だとページングしない
pagination_dirページングのフォルダ、デフォルトはpage
themeWebサイトのUIテーマ
deployデプロイ情報

5. 記事作成

Markdownで作成したファイルをsource/_posts のフォルダにコピーし、以下のオプションを追加することで記事のタグ、カテゴリー、日付を設定できます。

オプション説明デフォルト値
layoutレイアウト
titleタイトル
date作成日
updated更新日
commentsコメント機能のOn・Offtrue
tagsタグ
categoriesカテゴリー

例えば以下のように記事を作成します。

---
title: ASP.NET Core 入門1 ASP.NET Coreを使って初めてのWebアプリを構築
category: skill
tags:
- dotnet
date: 2019-09-03
comments: true
---

`ASP.NET Core`を学習することにあたって、思考の整理と学習記録をここの記載します。

私自身も`.NET Core`を触るのが初めてなので、間違っている部分があれば、コメントにて指摘をお願いします。

6. ローカルで稼働確認

記事を書き終えたら、以下のコマンドを使ってローカルで動作確認します。

hexo clean
hexo generate
hexo server -p 8000 -o

Github Pagesにアップロード

GitHub Pagesでブログを公開することができます。当然Githubのアカウントを持っていることが前提ですので、なければ作成してください。

`1. ブログ用のリポジトリを作成

まずは、GitHub上に以下の名前でパブリックリポジトリを作成します。

  • {自分自身のGithubアカウント名}.github.io

例)

2. 設定ファイルの変更

Hexoの設定ファイル_config.ymlを編集します。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: https://github.com/dongsu-iis/dongsu-iis.github.io.git
    branch: master

3. Gitからデプロイ

GitHubにデプロイするためのNodeモジュールをインストールします。

npm install hexo-deployer-git --save

以下のコマンドを実行すると、Github Pagesにアップロードできます。

hexo deploy -g

このコマンドでもOKです。

hexo generate -d

ブラウザーでdongsu-iis.github.ioへアクセスして、アップロードしたWebサイトを確認してみてください。

独自ドメインを適用

Github PagesにWebサイトを公開できましたが、github.ioのドメイン名がダサいと思われるかもしれませんので、自分独自のドメインにすることもできます。

私の場合、ムームードメインで独自ドメインを買いました。

買ったドメインの以下の手順に沿って、DNSレコード設定をします。

公式手順

最後にsource フォルダ配下にCNAMEというファイルを作成して、ドメイン名を記載します。

dongsu.dev

上記の手順を終えたら、再度GitHub Pagesへアップロードすれば、自分独自のブログの完成です。

最後に

技術ブログを生かして共にエンジニアとして、成長し、情報共有しましょう。

エンジニアの未来に幸あれ!

では!!( `ー´)ノ