Atom による Jamstack な Webコンテンツ製作

Atom とは

Atom は、GitHub 謹製のオープンソースのエディタです。パッケージとして機能を追加することができ、Markdown エディタとしてもリアルタイムでプレビューする機能もあり、非常に優秀なエディタです。

• Atom: https://atom.io

GitHub で開発されているので、当然 Git による GitHub との連携機能もバッチリです。

Jamstack から見た Atom の役割

Jamstack 的な Web コンテンツ製作の流れとしては、Web サーバーや DB サーバーとは独立したヘッドレスな CMS（コンテンツ・マネジメント・システム）でコンテンツを編集、管理を行い、Markdown で書かれたデータを静的サイトジェネレーターでビルドし、ビルトされたコンテンツが公開されるといった流れになります。

CMS 相当の機能は、ローカルのマシンでコンテンツを編集し、GitHub でコンテンツを管理することでも実現できます。

ヘッドレス CMS の1つである NetlifyCMS でも編集後のコンテンツデータは、Netlify と連携している GitHub のリポジトリに保存されます。

Atom を使うと、ローカルマシンで Markdown ファイルを編集し、Atom の Git 連携機能を利用して GitHub に push してリポジトリを更新し、自動的に Netlify で Web コンテンツをビルドするといったコンテンツ製作の流れをつくることができます。

macOS への Atom のインストール

Atom の Web ページの Download ボタンをクリックすれば、Atom のアプリケーション本体がダウンロードされます。あとはダウンロードしたファイルを macOS のアプリケーションフォルダに入れるだけです。

Atom には様々なパッケージや外観をカスタマイズできるテーマがあるので、好みに合わせて設定してみてください。

おすすめパッケージ

• japanese-menu
• atom-beautify
• file-icons
• Highlight Selected
• markdown-writer
• markdown-toc
• markdown-scroll-sync
• tool-bar
• tool-bar-markdown-writer

GitHub との連携

あらかじめ GitHub のアカウントを持っている必要があります。 パッケージメニューから「GitHub」の中にある、"Toggle Git Tab" を選択します。 右側に Git 用のタブが表示されるので、初めにアカウントの連携をします。

その後は、commit したいファイルの選択から commit メッセージまで git タブ内で操作できます。

commit 後は、一番下にある push アイコンをクリックすれば、GitHub のリポジトリに push されます。

Atom のアンインストール

Atom をアンインストールするには、以下のコマンドを入力します。

Copycopy code to clipboard
$ rm -rf ~/.atom
$ rm -rf /usr/local/bin/atom
$ rm -rf /usr/local/bin/apm
$ rm -rf /Applications/Atom.app
$ rm -rf ~/Library/Preferences/com.github.atom.plist
$ rm -rf "~/Library/Application Support/com.github.atom.ShipIt"
$ rm -rf "~/Library/Application Support/Atom"
$ rm -rf "~/Library/Saved Application State/com.github.atom.savedState"
$ rm -rf ~/Library/Caches/com.github.atom
$ rm -rf ~/Library/Caches/Atom