使用 Angular 将以 markdown 书写的文章在 Github Pages 上展示直至完成

看到这个，原来 GitHub Pages 可以用 React！使用 create-react-app 和 TypeScript 轻松地创建的单页应用可以轻松地部署到 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。

制作一个合适的组件。

ng g component blog

我已将路由设置为这样，并通过 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"

当我变得更强大时，我会想着可以做更多事情，因此打算从小事做起，一步步地努力。