Angular で markdown で書いた記事を Github Pages で表示するまで

6806 ワード
Angular7 Blog Markdown wiki Markdown テキストリンク

これ を見て、 GitHub Pages って React 使えるんだ！
create-react-appとTypeScriptでサラッと作ったSPAをgh-pagesにスルッとデプロイすっぞ！

と思って、じゃあ Angular もできるよね！というところから、 markdown で書いたものを表示したいよね！と思って調べて試してたらできたので

動機

最近、勉強したこととか調べたことをどこかに集約したいなと思いつつ、
- 簡単にメモ気分で書きたい
- 勉強した内容とかが自分の中で更新されたら書いた内容も更新していきたい
- Qiita とかだと若干の公式感が出て(個人的な感覚だけど)、ちゃんと書かないとみたいな意識が出てしまうのでちょっとな...(実際この記事もちゃんと書いてる...つもり)
- 非公開にする必要はない
とかいろいろ考えて、どっかに置きたいな〜というので調べてて Github Pages もありだな〜みたいな感じでサンプルを作ってみた。

環境

Angular CLI: 7.2.4
Node: 8.11.3
Angular: 7.2.6

作ったもの

https://ikepon.github.io/angular-wiki/
https://github.com/ikepon/angular-wiki

手順

assets に blog/abc.md みたいな記事の markdown を入れておいて、それを表示する感じにしました。

ng new angular-wiki
cd angular-wiki 
yarn add ngx-markdown

markdown はこの辺 を見ながら設定。
https://www.npmjs.com/package/ngx-markdown

適当なコンポーネントを作って

ng g component blog

route をこんな感じにして id で markdown のファイル名を指定して設定するようにしました。

const routes: Routes = [
  { path: 'blog/:id', component: BlogComponent }
];

コンポーネントは以下のような感じで設定。

<p>
  blog works!
  {{post}}
  <markdown [src]="post"></markdown>
</p>

export class BlogComponent implements OnInit {
  post: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.post = 'assets/blog/' + params['id'];
    });
  }
}

各ページに遷移できるように app.component.html にリンクを追加して

<ul>
  <li>
    <a routerLink="/">TOP</a>
  </li>
  <li>
    <a routerLink="/blog/article_1.md">Article 1</a>
  </li>
  <li>
    <a routerLink="/blog/article_2.md">Article 2</a>
  </li>
</ul>
<router-outlet></router-outlet>

あとは assets/blog/article_1.md assets/blog/article_2.md みたいな適当なファイルを置いてブログ部分は完成。

デプロイは angular-cli-ghpages を使って
https://www.npmjs.com/package/angular-cli-ghpages

yarn add -D angular-cli-ghpages

ビルドしてデプロイしました。

ng build --prod --base-href "https://ikepon.github.io/angular-wiki/"
npx angular-cli-ghpages --dir="dist/angular-wiki"

フロントに強くなると、もっといろいろできるんだろうな〜と思って、小さいことからコツコツやっていこうかと思ってます。