Hashnodeの紹介 - 個人ブログの長所を兼ね備えた開発者コミュニティ

この記事は [**セゾン情報システムズ Advent Calendar 2020**](https://qiita.com/advent-calendar/2020/sisco) 7日目の記事です。

## Hashnode とは
無料で利用可能な開発者向けのコンテンツ (ブログ) 作成プラットフォームおよびコミュニティです。
※海外のサイトなので、投稿されているコンテンツは英語がメインです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/ef3eaa24-de0a-71ce-5659-a6e2eab4eb82.png)

https://hashnode.com/ の top ページより

Hashnode は様々な機能をもっているのですが、プラットフォームとしての特徴は
Hashnode Co-Founder の Product Hunt への[書き込み](https://www.producthunt.com/posts/hashnode-platform)が表していると思いますので
以下に google 翻訳の上、引用させていただきます。

> 従来のパブリッシングプラットフォームは、コンテンツの所有権を犠牲にして可視性と
> エンゲージメントを提供することに気づきました。
> 一方、セルフホストソリューションを使用する場合、記事は適切な可視性と到達範囲を獲得できません。
> Hashnodeは、両方の長所を兼ね備えています。カスタムドメインをマッピングし、
> 独自のブランドで記事を公開し、組み込みの開発者コミュニティに配布することができます。

投稿したコンテンツの所有権は完全にユーザーにあります。
一方でプラットフォームとしてコミュニティ機能を備えていますので
フォローしているユーザーやトレンドの記事を簡単に追うことができますし
自分の記事の共有や SEO といった観点でもメリットがあります。

## 機能の一部を紹介
Hashnode を実際に利用してみて、お気に入りの機能をいくつか紹介させてください。

### Markdown エディタ
これは外せませんね！

### カスタムドメイン
Hashnode の大きな特徴として、カスタムドメインを簡単に設定することができます。
アカウント作成後に払い出される URL は `https://<ユーザー名>.hashnode.dev/` の形式です。
カスタムドメインの設定は Hashnode のダッシュボード上で、ドメインを指定し、
利用している DNS プロバイダに指定された CNAME レコードを追加するだけです。
デフォルトで HTTPS 化され、初回アクセス時に自動で Let's Encrypt の証明書が設定されます。

私のアカウントの例では以下のようになります。

* デフォルト:  https://hayao-k.hashnode.dev/
* カスタムドメイン: https://hayao-k.dev/

たまたま「.dev」ドメインを利用しているため、短縮しただけのように見えてしまいますが
ご自身が所有するドメインを設定し、ブログを運用することができます。

※ ルート (Zone Apex) をカスタムドメインに指定するには利用する DNS プロバイダが
CNAME Flattening をサポートしている必要があります。
A レコードで登録することも可能ですが、その場合 Hashnode 組み込みの
グローバル CDN とエッジキャッシングが使用できないため、表示速度などに影響があります。

### 外観のカスタマイズ
ヘッダーの色や、ブログのロゴ、記事一覧レイアウトなどの見た目をカスタマイズできます。
また利用者はデフォルトのテーマとダークモードを自由に切り替えることができますが、
アクセス時のデフォルトのテーマをダークモードとすることも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/fc8936c3-2715-74d9-85c5-0b96390053b2.png)

記事ページ以外にも Markdown ベースで独自のページを追加することができます。
使い方としてはプロフィールページなどを追加しているユーザーが多いようです。
また Hashnode への投稿で特定の条件を満たすとバッジを獲得し、
BADGES ページに公開できます (非公開設定も可)。投稿のモチベーションの一つになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/48c9be59-8c66-8cab-e3d3-13fc1a956e81.png)

またブログ読者が登録可能なニュースレター機能も設定で有効無効を切り替えることできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/0a896fc1-22fe-5dab-21d1-64cfc6cc705b.png)


### GitHub Backup
Hashnode の GitHub アプリをインストールし、バックアップ先のリポジトリを指定することで
Story (記事) の追加、変更を画像込み自動で GitHub にバックアップできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125105/ba3f68f1-b0c6-e1d8-6082-0fe7ee09f448.png)

### Import & Export
Medium.com と Dev.to から既存のコンテンツを移行する機能が用意されています。
実際に Dev.to にポスト済みの記事で試してみましたが、画像込みで簡単に Import できました。
また Hashnode に投稿した全ての記事のデータを JSON 形式で Export する機能も用意されています。

### 無料 & 広告無し
将来的には 個人や Team 向けの Proプラン (月額サブスクリプション) を導入し
収益化することも検討しているようです。

### 3rd Party Integration
Hashnode 自体も記事毎の View 数などの Analytics 機能は持っているのですが
Google Analytics や Hotjar などのサイト分析ツールの ID を別途設定できます。

### 収益化 (投げ銭)
Hashnode 自体に収益化の機能はないのですが、前述の 3rd Party Integration の機能で
[Web Monetization](https://webmonetization.org/) の [Payment Pointer](https://webmonetization.org/docs/receiving/#payment-pointers) を埋め込むことが可能です。
これにより [Coil](https://coil.com/) というサービスの課金ユーザーがブログを訪れた場合に
自動的にチップを受け取ることができます。

### Ambassador program
Hashnode を他のユーザーに紹介すると限定のカスタマイズ要素などをアンロックできるようです。
最後にこちらにリンクを張っておきます。

つ https://hashnode.com/@hayao-k/joinme

もしこの記事で興味を持っていただけたら、上記からポチッと登録いただけたら嬉しいです。

## 参考
[Why Should You Start Your Dev Blog On Hashnode](https://slashism.com/why-should-you-start-your-dev-blog-on-hashnode)
[Why Hashnode Is Different Than Other Blogging Platforms](https://catalins.tech/why-hashnode-is-different-than-other-blogging-platforms)
[Web Monetization on Hashnode](https://x.hashnode.dev/web-monetization-on-hashnode-ckdu9umr900jmn0s1gr0r4gis)

以上です。