【スマホのみで】自前ブログ作成【無料】

TL;DR

  • hexo、GitLab、Cloudflare Pages で完全無料でブログ環境構築。
  • すべてスマホ(Android)でサーバーも構築、記事作成・公開もスマホ上でやれるようにした。

前置き

ブログを始めようと思う。

基本方針

  • いずれお金になるよう、よそのブログシステムで記事投稿するのではなく、自前サーバーか、お金もらえるタイプ(noteとか)でやりたい。
  • ブログ運営に関して、費用がかからないようにする。続けるためにも大事。
  • スマホで記事作成から公開まで完結できるようにする。続けるためにも大事。

個人ブログといえば WordPress がデファクトスタンダードだが、サーバー契約したりとかしたくない。飽きたときにも面倒だし。
ので、今回は静的サイトジェネレータを使うこととして、以下の構成をとる。

ブログシステムの構成

  1. スマホで、マークダウン形式の記事を書く
  2. それをスマホのTermux上で、hexoでブログ記事に変換
  3. GitLabに、できたブログを保存
  4. Cloudflare Pages に自動で連携して公開

この構成をとることで、

  • 自前サーバー・ドメインで公開(いずれマネタイズ)
  • スマホで記事作成完結
  • 運営コストかからない

を実現する。

では早速やっていく。
なんとなくブログとして書きたいことを決めたら、具体的な名前とかはChatGPTちゃんに相談しました。

リポジトリ名
toushi-fukugyo-blog
ドメイン名
toushi-fukugyo
ブログタイトル
投資と副業で月収+20万を！｜〜経済的自由と資産形成の始め方〜

これでいこう。

  1. ローカルに hexo init でブログ作成
  2. GitLabに、作ったブログを紐付ける
  3. 公開対象フォルダをCloudflare Pagesに連携

の流れでいきます。
なぜGitLabが先じゃないかというと、hexo initでディレクトリを作るとなると、階層が一個下になっちゃうから。
なので hexo init を先にしたい。

スマホにブログ作成(hexo)環境つくる

前準備

スマホへのTermux環境構築は、ここでは簡単にザックリ。

1
2
3
pkg update && pkg upgrade
termux-setup-storage
pkg install nodejs git -y

hexo導入

1
2
3
4
npm install hexo-cli -g
hexo init <リポジトリ名>
cd <リポジトリ名/>
npm install --no-bin-links

hexo initではエラー出ることに注意。
Termux環境ではシンボリックリンク作れないので、出るのはしょうがないエラー。
そのあと自分で --no-bin-links つけてインストールしてあげる。

早速ローカルサーバー起動！

1
2
hexo generate
hexo server

動いた。
このHello Worldの記事は、hexoが最初から用意してくれてるもの。

GitLabに登録

ローカルのブログをgit管理に追加

1
2
3
4
git init
git config --global --add safe.directory <あなたのブログの作業ディレクトリ>
git add .
git commit -m "initial commit!"

今回の場合、自動でできてくるpublic配下を公開したい。
生成後のものが入る publicは、最初はgitの管理対象に入ってないのでそこを編集する。

↑.gitignoreにある、この public/ の行を消す。
したら、それを登録する。

1
2
git add .
git commit -m "publicを管理対象に追加"

空のリポジトリをGitLabに作成



デプロイなし、リポジトリ初期化なしの本当にプレーンな空のプロジェクトです。

ローカルとGitLabを連携

ローカルのものをGitLabに紐付けます。
gitlabうんたら〜の部分は GitLabのwebページにSSH用のものがあるのでそれをコピペする。

1
2
git remote add origin git@gitlab.com:**YOUR_NAME**/**REPOSITORY_NAME**.git
git push -f -u origin master

これで、以降ローカルで編集したものをpushすれば、GitLabに投げ込まれるようになりました。

Cloudflare Pages に登録

次は、公開用のWebサーバーを用意する。

プロジェクト名はドメインになるので、好きなのを入れたら良い。
公開のためのディレクトリである public を指定。
これで保存してデプロイ。数分待てば、、、、、

できた。

これで、スマホでマークダウン作成、hexo generate && git add . && git commit -m "auto commit" && git generate
のコマンドを叩けば、一発で生成から公開までされるようになった！