[Hexo x Github Pages] 5分以内にブログを自動生成して無料で公開するまで【完全版】

こんにちは。今回は静的WEBサイトジェネレータのHexoを用いたWEBページの自動生成手法と、Github Pagesを用いた公開手法について解説します。”3分でできる”等という触れ込みを見て始めたのですが、当時素人だった私は相当ハマり諦めました…。初級者向けに説明が欠けている所を重点的にまとめようと思います。

昨今はWord PressやNote等のサービスを使って記事を書く方が多いと思いますが、自由度が低く、クオリティを追求すると有料になってしまう事が多いです。

今回の手法であれば、運用費を1円もかけず、ソースコードを完全に自由にいじれます。エンジニア界隈で流行っている手法ですが、素人や学生でも使えるレベルです。GithubやWEBの基礎の勉強にもなるので、是非挑戦してみてください。

ざっくりのイメージ(まだ分からなくてOKです)

About Github Pages

1. 関連技術概要

  • 早く進めたい人は手順に飛んでOKです

1.1. Hexo

  • 静的WEBサイトジェネレータ

    • 静的WEBサイト
      • HTML + CSS + JavaScriptで構成されるWEBページ
    • 上記をコマンド一つで自動生成するツールです
    • Markdown形式のファイルを自動的にビジュアライズして表示可能
      • Markdownとは文章を簡単に記述するための記法です
        • ハイフンで箇条書きを表現したり、#で見出しの文字を表現したりできます
          • HTMLで書くよりはるかに簡単なので覚えましょう
          • 慣れれば普段のメモもこの記法が楽です
  • テーマが300種類近くあります

    • Hexo Theme
      • ブログや企業サイト、デザイナーのポートフォリオ等、なんでも作れます
    • Themeの変更方法やカスタマイズ方法は他の記事で解説しているので、ページ作成後にご覧ください
Hexo Theme

1.2. Github Pages

  • GitHub(バージョン管理ツール)が提供しているホスティングサービス

    • 静的なWEBページを公開可能
    • 運用費は無料
    • 一定数のリクエストを超えると落ちてしまう制限がある
      • 10万PV以上/月
        • 初めは無視してOKです
  • Githubの知識があれば学習コスト0で利用可能

    • Githubとは
      • 簡単に言うと、ソースコードを置いておく場所です
      • 開発に必須とも言えるツールであるため、覚えておくに越したことはないです
      • Github Pagesが優れている点は、このソースの置き場所でそのまま公開できる手軽さにあります
  • Github Pagesで生成可能なページの種類

      1. ユーザーページ(https://ユーザー名.github.io)
        • Githubユーザ名のrepository(名前固定)で公開
        • Githubユーザ1名につき、1つまで
        • Point
          • Organization(組織)のリポジトリである場合は上記の”ユーザ名”を”Organiztation名”に読み替えて利用できます
            • つまりOrganizationを量産すれば、その数だけユーザページを作成可能です
      1. プロジェクトページ(https://ユーザー名.github.io/リポジトリ名/)
        • repositoryを作成すれば、無制限にサイトを作成可能
  • Angularで開発したSingle Page Applicationのホスティングも可能

    • WEBアプリの公開にも使えます
      • 10万PVで落ちるという制約があるため、ビジネスの現場ではそこまで使われません
      • 個人で開発したものや、開発途中のものを公開するにはとても便利です
    • Angularの解説は以下にまとめてます
    • フロントエンドのスキルを深めていくのであれば、次のStepとしてAngularによるWEB AP開発に取り組むのが良いと思います。書籍等で勉強してみてください(おすすめ
  • Markdownやasciidoc形式のファイルをそのままおいて、ビジュアライズ表示も可能

    • push直後には失敗していた。数分後に確認したところ、確認できた。
    • 編集内容の反映までに初めはリードタイムが必要

2. 手順

  • 初級者向けに環境構築から書きます

2.1. 前提/環境構築

2.2. github pagesの公開

  • 準備

    • ユーザ直下に作成する場合
      • 特になし
    • Organizationで作成する場合
      • Organization名がユーザ名の代わりになります
      • URLにそのままなるので、作りたいWEBページに合わせて決めましょう
  • repositoryを作成

    • 以下のように名称を設定すると中においた静的ソースコードがWEBページとして公開される
      • user-name.github.io
    • 今回のrepository名
      • user-name.github.io
  • 最終的に以下のURLで表示されます

Markdownファイルをおいてみる

2.3. 静的サイトジェネレーターを利用してサイトをビジュアライズ

  • 作成したgithub pagesのrepository配下にhexoを入れます

  • Hexoをインストール

    • この時点でエラーが出たらNode.jsのバージョンを確認してください
      1
      $ npm install -g hexo
  • Hexoでプロジェクトを作成

    1
    $ hexo init your-blog
  • hexoで起動して、ページを確認

    1
    2
    $ cd your-blog
    $ hexo server
  • Localhostで以下の画面を確認

    • 環境構築が事前に済んでいたので、ここまで3分程度
Hexo Default
  • ポイント

    • README.mdは干渉するので削除
    • まだgitにLocalで作ったブログをpushしてもWEBサイトには出ません
      • ここでハマったので詳しく解説していきます
  • generate

    • HTMLをpublicフォルダ内に生成するコマンド
      1
      hexo generate
  • publicというディレクトリが作られ、配下に以下が生成される

    • \user-name.github.io\your-blog\public
1
2
3
4
5
6
7
8
Mode                LastWriteTime         Length Name
---- ------------- ------ ----
d----- 2019/11/26 19:03 2019
d----- 2019/11/26 19:03 archives
d----- 2019/11/26 19:03 css
d----- 2019/11/26 19:03 fancybox
d----- 2019/11/26 19:03 js
-a---- 2019/11/26 19:03 6589 index.html
  • 以下でindex.htmlを確認しましょう
    • file:///D:/user-name.github.io/your-blog/public/index.html

Trouble Shooting

  • ここでpushをすると、以下のエラーに悩まされます
    • ググっても関係のない対処法ばかり出て初級者は詰むと思います
    • 私もSSH鍵の設定を確認したりだいぶ迷走しました
Hexo Default
1
2
GitHub Pages failed to build your site.
The value '{}' was passed to a date-related filter that expects valid dates in /_layouts/default.html or one of its layouts.

回避策

  • エラーの原因

    • Github pagesはリポジトリ内のルートディレクトリを読み込もうとする
    • HEXOでgenerateされたWEBページはpublicディレクトリにある
      • 読み込めずにエラーが出ている
    • generateされたファイルがrepository直下におかれるように設定を編集
      • hexoディレクトリ直下の設定ファイルを編集することでできました
  • _config.ymlを編集

    1
    2
    旧:public_dir: public
    新:public_dir: ../
  • 上記の状態でgenerateコマンドを打つと、public配下に生成されていたファイル群が、repository直下に生成される

1
2
3
4
5
6
7
8
9
10
11
    ディレクトリ: D:\user-name.github.io

Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2019/11/26 21:36 2019
d----- 2019/11/26 21:36 archives
d----- 2019/11/26 21:36 css
d----- 2019/11/26 21:36 fancybox
d----- 2019/11/24 13:00 your-blog
d----- 2019/11/26 21:36 js
-a---- 2019/11/26 21:36 6834 index.html
  • your-blog(ソースファイル)をgithub pagesが読み込んでエラーを起こさないように名称を変更

    • 余計なディレクトリがあるとGithub PagesはWEBページを表示できません
      • 初級者は個々でもはまると思います
    • 元々のHexoディレクトリを_で読み込めなくするだけでOKです
      1
      PS D:\user-name.github.io> mv your-blog _your-blog
  • ここまでやってからpush

  • WEBブラウザでページの生成を確認

    1
    https://user-name.github.io/

2.4. 新しい記事を追加

  • hexo new ‘記事名’
    • 概要ページを作ってみましょう
1
2
PS D:\user-name.github.io\your-blog> hexo new "about-mob"
INFO Created: D:\user-name.github.io\your-blog\source\_posts\about-mob.md
  • source/_posts/<記事名>.mdが生成

  • localhostでチェック

    1
    2
    3
    PS D:\user-name.github.io\your-blog\source\_posts> hexo server
    INFO Start processing
    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
  • 記事が増えている

image

  • 生成されたMarkdownファイルを確認
1
2
3
4
5
6
PS D:\user-name.github.io\your-blog\source\_posts> ls

Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2019/11/26 20:51 57 about-mob.md
-a---- 2019/11/26 18:42 838 hello-world.md
  • abouto_mob.mdを編集
  • 編集内容がLocal内で反映されていることを確認

2.5. 下書き記事を追加

1
hexo new draft "article-name"
  • 下書きディレクトリ source/_drafts にmdファイルが生成される
  • 本番環境やhexo serverでは表示されない
    • 表示したい時は以下で–draftsを付ける
      1
      hexo server --drafts

2.6. 固定ページを追加

1
$ hexo new page "dir-name"
  • source/“dir-name2/index.md が生成される

まとめ

  • 以上で解説は終了です
  • 以下ができる状態になったと思います
    • 静的サイトジェネレーターでWEBサイトを自動生成
    • 静的WEBサイトホスティングで公開

Hexoサイトのカスタマイズ

Hexoサイト運用の自動化

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×