Hexo, Github, Netlifyを使ってブログを作ってみる　1/3

本ブログの開設手順を説明していこうと思います。

備忘録も兼ねて、本ブログの開設手順を3ページに分けて説明していこうと思います。

目次

使用するサービス#

  • Hexo （記事作成ができるいわゆるSDG）
  • Github（クラウド上でソースを管理する）
  • Netlify（実際のブログが置かれる場所）

本記事ではまずHexoのインストール、設定について。

前提条件#

  • Windows10

  • NodeJSをインストール済み

npmからHexoをインストールする#

まずはソフトをダウンロードします。普通のソフトのようにホームページなどからダウンロードするのではなく、コマンドライン上のNPMからインストールを行います。
WindowsキーとRキーを同時に押してcmdと入力してコマンドプロンプトを起動します。
画面に以下をコピペしてエンターキーを押してください。

1
npm install hexo-cli -git

色々出てきますが、以下の様に

1
2
+ hexo-cli@3.1.0
updated 1 package in X.XXXs

とでればOKです。まだコマンドプロンプトは使用するので閉じません。

ブログのソースを作成する#

次にブログのもととなるソースを作っていきます。blogの部分はフォルダ名なので適当でいいです。

1
hexo init blog

次にそのフォルダに移動します。上のコマンドでblog以外のフォルダ名にした場合はそのフォルダ名で読み替えてください。

1
2
cd blog
npm install

そして必要なモジュールなどをインストールします。

1
npm install

インストールは以上です！

記事の作成方法#

以下のコマンドで新規記事を作成します。

1
hexo new post 記事名

するとsource/_post/記事名.md というファイルが生成されます。このファイルを編集して、記事を書いていきます。markdownという形式で書きます。

作成した記事をテストする#

記事の編集が完了し、ローカルで表示を確認するには以下のコマンドを打ちます。

1
2
3
hexo clean
hexo generate
hexo server

すると以下のような表示が出ます。

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

表示にあったhttp://localhost:4000　にブラウザでアクセスすると作成した記事を見ることができます。あくまでテスト用です。

ブログタイトルを変更する#

ブログをテスト表示してみるとタイトルがHexoになっています。最後にこれを自分のブログ名に変更してきましょう。
blogフォルダ内に_config.ymlファイルがあります。これが設定ファイルになっているので編集します。

1
2
3
4
5
6
7
8
# Site
title: WRITE YOUR BLOG TITLE HERE
subtitle: ''
description: ''
keywords:
author: YOUR NAME
language: ja
timezone: 'Asia/Tokyo'

変えるのは
titleを自分のブログタイトルに
authorを自分の名前に
langaugeをenからja
timezoneを’Asia/Tokyo’
ぐらいですかね。

まとめ#

作成した記事はうまく表示されましたでしょうか？
次のページでは、編集したmdを含むソース全体をgithubに記事をアップロードする方法を紹介します。

次へ