Help us understand the problem. What is going on with this article?

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

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

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

前提

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

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

2. 環境

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

環境/ソフトウェア 内容
OS Windows or Max or Linux
Nodejs nodejsはltsがおすすめ
Git gitは公式より最新版で良い

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

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

2019-09-19-17-22-22.png

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ファイルの関連オプションの説明は以下です。

オプション 説明
title Webページのタイトル
subtitle サブ開いとる
description 説明
keywords Webサイトのキーワード、カンマで複数書けます
author 自分の名前
language Webサイトの言語
timezone Webサイトのタイムゾーン、デフォルトはPCの設定時刻になります
url 文字通りURL
root Webサイトのルートディレクトリ
source_dir Markdownや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
theme WebサイトのUIテーマ
deploy デプロイ情報

5. 記事作成

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

オプション 説明 デフォルト値
layout レイアウト
title タイトル
date 作成日
updated 更新日
comments コメント機能のOn・Off true
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

例)

2019-09-19-17-53-07.png

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へアップロードすれば、自分独自のブログの完成です。

最後に

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

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

では!!( `ー´)ノ

dongsu-iis
Husband | Father | Engineer | Developer | SIer
https://dongsu.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした