LoginSignup
9
10

More than 3 years have passed since last update.

@sakkuntyo(佐々木 大輔)

コマンドラインでブログを構築、運用する

Last updated at Posted at 2019-09-17

GitHub PagesとHexoを使用し、コマンドライン(Bash on Ubuntuのターミナル)だけで
ブログを構築、投稿、編集を行います。

前提環境

  • Windowsの場合
    • Bash on Ubuntu
  • Macの場合
    • 標準のターミナル

0.githubに<username>.github.ioリポジトリを用意する

  • <username>は自分のユーザー名に置き換える
  • 私の場合は sakkuntyo.github.io というリポジトリとなります。
  • 作成直後の空のリポジトリであると、この後の構築作業がすんなりと済みます。
  • この手順もコマンドで行いたい場合はgemでインストールできるhubコマンドを使用する事でコマンドでgithubにリポジトリを作成する事ができます。

1.nodeをインストールする

以下コマンドでnvmを利用して、nodejsをインストールします。

$ git clone https://github.com/creationix/nvm ~/.nvm
$ source ~/.nvm/nvm.sh
$ echo "source ~/.nvm/nvm.sh" >> ~/.bashrc
$ nvm install 10.16.3

nodejsの10.16.3を使用していますが、8.11.0でも動作確認が取れています。

2. githubのリポジトリをcloneする

以下コマンドでgithubのリポジトリをcloneします。

$ git clone https://github.com/<username>/<username>.github.io
$ cd <username>.github.io #

3.hexo-cliをインストールする

nodejsに付随してくるnpmコマンドを利用してインストールを行います。

$ npm install -g hexo
$ hexo version
hexo-cli: 2.0.0
os: Linux 4.4.0-18362-Microsoft linux x64
http_parser: 2.8.0
node: 10.16.3
v8: 6.8.275.32-node.54
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.39.2
napi: 4
openssl: 1.1.1c
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

4.プロジェクト作成

hexoコマンドでプロジェクトを作成します。

hexo init コマンドで指定するプロジェクト名はプロジェクトのフォルダ名となりますが、
すぐ消すので何でも大丈夫です。

# hexo init <任意のプロジェクト名>
# mv ./<任意のプロジェクト名>/* ./
# mv ./<任意のプロジェクト名>/.* ./
# rm -r <任意のプロジェクト名>

5._config.ymlを編集

_config.ymlでは最低限以下の設定を行います、それぞれの行を書き換えます。

vimでの編集が難しい場合は「notepad _config.yml」などで別のエディタを開いて編集します。
閉じる際はキーボードから手を放さずにAlt+F4等で閉じましょう
メモ帳 -> notepad _config.yml
vscode -> code _config.yml

$ vim _config.yml
  • ブログの情報
    • 「language:」で始まる行を「language: ja」に変更
  • 内部で使用する自分自身のURL
    • 「url:」で始まる行を「url: https://<username>.github.io/」に変更
  • デプロイ先の設定
    • 「type:」で始まる行を「type: git」に変更
    • 上記行の次の行に「repo: https://github.com/\/<username>.github.io」と追記、hexoコマンドでデプロイした際に対象となるリモートリポジトリとなります。
    • 上記行の次の行に「branch: master」と追記、hexoコマンドでデプロイした際にプッシュされるブランチとなります。
    • 上記行の次の行に「message: hexo deploy」と追記、hexoコマンドでデプロイした際にコミットメッセージとなります。

以下、書き換えた後の例

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

# Site
title: さっくんちょブログ
subtitle:
description:
keywords:
author: 佐々木 大輔
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://github.com/sakkuntyo/sakkuntyo.github.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: git
  repo: https://github.com/sakkuntyo/sakkuntyo.github.io
  branch: master
  message: hexo deploy!

6.masterブランチにデプロイ

<username>.github.ioリポジトリにおいては、masterブランチにプッシュが行われると
githubによって https://<username>.github.io へのデプロイが行われます。

hexo deployコマンドを使用して、配置するソースの生成、masterへのコミット、プッシュを行います。

$ hexo deploy -g
INFO  Start processing
INFO  Files loaded in 114 ms
INFO  Generated: 2019/09/18/hello-world/index.html
INFO  Generated: archives/2019/index.html
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2019/09/index.html
INFO  5 files generated in 176 ms
ERROR Deployer not found: git

おや、gitが見つからない様です。

hexoのデプロイ時に使用されるgitは hexo-deployer-git というツールの様です。

以下コマンドでインストールを行います。

$ npm install hexo-deployer-git --save

再度、hexo deployコマンドを使用してデプロイします。
githubユーザー名とパスワードが聞かれた場合は入力してEnterします。

$ hexo deploy -g
INFO  Start processing
INFO  Files loaded in 113 ms
INFO  0 files generated in 156 ms
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
Username for 'https://github.com': sakkuntyo
Password for 'https://sakkuntyo@github.com':
Counting objects: 46, done.
Delta compression using up to 12 threads.
Compressing objects: 100% (36/36), done.
Writing objects: 100% (46/46), 507.96 KiB | 10.58 MiB/s, done.
Total 46 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), done.
To https://github.com/sakkuntyo/sakkuntyo.github.io
 * [new branch]      HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/sakkuntyo/sakkuntyo.github.io'.
INFO  Deploy done: git

7.デプロイされた事を確認

https://<username>.github.ioを確認します。

  • Windowsの場合
    • Win+Rキーを押して「microsoft-edge:https://.github.io」を実行
    • image.png
  • Macの場合
    • open https://<username>.github.io

閉じる際はキーボードから手を放さずにAlt+F4等で閉じましょう

image.png

ページが表示出来る様になっている事がわかります。

8.編集用ブランチの作成とプッシュ

masterにプッシュされたリポジトリは表示するコンテンツのみとなりますので、
hexo initで作成したディレクトリが消えてしまうと再度同じプロジェクトから投稿する事ができません。
そのため、投稿作業用に別ブランチを作成します。

先ほどプッシュしたmasterブランチをpullします。

$ git pull

editブランチを作成し、全てのファイルを管理対象とした上でプッシュします。

$ git checkout -b edit
$ git add --all
$ git commit -m "編集用ブランチ作成"
$ git push origin HEAD

プロジェクトフォルダ削除後や、別のPCなどから記事を編集する場合には、以下コマンドでeditブランチをcloneしてから以降の操作を行います。

$ git clone https://github.com/<username>/<username>.github.io -b edit
$ cd <username>.github.io
$ git branch
* edit

9.記事の追加

記事の追加は hexo new コマンドで行う事ができます。
追加された記事は ~/.github.io/source/_posts/ 以下に作成されます。

$ hexo new "テスト"
INFO  Created: ~/<username>.github.io/source/_posts/テスト.md

追加された記事を編集します。
マークダウンで記述できます。

$ vim source/_posts/テスト.md

以下、書き換えた後の例

---
title: テスト
date: 2019-09-21 12:0:0
tags:
---

# テスト

- テスト
  - テスト

## テスト2

```bash
$ echo "Hello World"
\```

### テスト3

|a|b|
|-|-|
|c|d|

デプロイします

$ hexo deploy -g

https://<username>.github.io を再度確認し、デプロイされた事を確認します。

image.png

確認ができたら、追加した記事をeditブランチの管理対象としてプッシュし、保存しておきます。

$ git branch
* edit
  master
$ git add source
$ git commit -m "テスト記事を追加"
$ git push origin HEAD
9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
10