快速搭建你的 github pages 我的博客 —— 基於 Create-React-App 的單頁面應用實踐

相信各位github資深玩家們都有本身基於 github pages 搭建的我的站點。官方推薦的靜態站點生成器是 Jekyll，關於 Jekyll 的使用感興趣的各位請自行 google，這裏就不贅述了。本文主要介紹下基於 Create-React-App 搭建我的博客的相關實踐，可能更適合作前端開發的夥伴。

github pages 是 github 推出的靜態站點服務，主要的用途在於使用你在 github 倉庫中的代碼構建你本身的靜態站點，爲用戶提供 github.io 二級域名，您也能夠經過添加DNS的 CNAME 記錄來綁定本身的域名。

github pages 最簡單粗暴的方法就是直接往 github 上方靜態頁面了，建立一個名爲 [您的github帳號名].github.io 的github倉庫，將您的index.html頁面代碼扔進master分支，就能夠直接經過 https://[您的github帳號名].github.io 訪問到您的站點了。

對於一個簡單的我的博客站點來講，存在如下基本功能特性：

• 文章的新增、編輯、一鍵發佈
• 文章的分類、歸檔
• 風格良好的博客樣式
• 評論、SEO等等功能

下面介紹基於React如何實現一個簡單的靜態博客。

1. 建立一個 React 項目

使用 Create-React-App（如下簡稱CRA） 的generator建立一個React前端項目骨架。對此項目進行必定改造以方便咱們平常的開發和使用習慣：

• 使用react-app-rewired來調整CRA中webpack的配置

  • 對CRA的webpack配置感興趣的童鞋能夠看看這篇文章
• 使用core-js對瀏覽器版本進行向下兼容
• 經過編寫不一樣的React容器組件（container）來實現不一樣的頁面，經過統一的json結構來配置應用的頁面路由
• 使用螞蟻金服的antd設計語言（React組件）快速實現業務UI
• 使用axios實現先後端的數據請求

我的改造後的項目代碼在這裏，您能夠直接fork或者down下來使用。

2. 使用 markdown 搞定你的文章

2.1 用於新建文章的交互式命令行（基於 inquirer）

通常的靜態博客系統（如gatsby），會給用戶提供一個用於建立新文章的交互式命令行，效果大體以下：

相似功能可使用nodejs中readline模塊的原生方法來實現。這裏推薦一個第三方工具：inquirer，本質上是對readline模塊進行了加強，提供了不少實用的方法用於交互式命令行開發，實現的用戶界面（命令行）也比較友好。

對於上面GIF示例的功能，其代碼實現以下：

// newPost.js

const inquirer = require('inquirer');
const moment = require('moment');

const questions = [
  {
    type: 'input',
    name: 'post_name',
    message: '請輸入您的文章別名（用於建立文章目錄，僅限英文，單詞間用短橫槓‘-’鏈接）：',
    validate: value => {
      if (/(\.|\*|\?|\\|\/)/gi.test(value)) {
        return '文章別名不得包含特殊符號（.*?\\/），請從新輸入↑↑';
      }

      if (/(([A-z]+-)+)?[A-z]+/gi.test(value)) {
        return true;
      }

      return '文章別名不合法，請從新輸入↑↑';
    },
    filter: value => value.replace(/\s+/gi, '-'),
  },
  {
    type: 'input',
    name: 'create_at',
    message: '請輸入文章的發佈時間（或者按回車鍵使用默認值）：',
    default: () => {
      return moment().format('YYYY-MM-DDThh:mm:ss');
    },
    validate: value => {
      if (/\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d/gi.test(value)) {
        return true;
      }

      return '時間格式不合法，請從新輸入↑↑';
    },
  },
];

inquirer
  .prompt(questions)
  .then(answers => {
    // 獲取用戶輸入
    const { post_name, create_at } = answers;
  
    /* 此處作一些命令行反饋和過程性的工做 */
    /* （如：提示用戶輸入是否合法、建立文章對應的目錄和文件等等） */
  })
  .catch(err => {
    /* 異常處理 */
  });

如是，將此node腳本添加到項目package.json的scripts中（如：new-post: "node newPost.js"），便可經過npm run命令執行。

2.2 md 轉 html（基於 react-markdown）

爲使用markdown文檔來編輯、存儲博客的文章內容，須要將md文檔轉換爲react的JSX對象以渲染到網頁中。在此推薦使用react-markdown，功能很6，做者維護得也比較勤。

使用方式以下：

import ReactMarkdown from 'react-markdown';

<ReactMarkdown source={'# 這是文章標題\n\n'} />
// <h1>這是文章標題</h1>

2.3 代碼塊的語法高亮

react-markdown提供了一個renderers屬性，用戶能夠傳入一系列renderer組件來自定義文章中一些內容的渲染方式（有興趣的童鞋能夠看下包做者對默認renderer的實現）。

如：自定義md中圖片的渲染方式（用法以下）。

// 傳入renderer的方式
<ReactMarkdown
  source={'[md文本內容]'}
  renderers={{
    image: ImageRenderer,
  }}
/>

// ImageRenderer的實現

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ImageRenderer extends Component {
  static propTypes = {
    src: PropTypes.string.isRequired,
  };

  render() {
    return (
      <img
        className="post-content-image"
        src={this.props.src}
        alt={this.props.src}
      />
    );
  }
}

export default ImageRenderer;

與此相似，咱們能夠經過傳入一個自定義的renderer來實現文章中代碼塊的語法高亮。名爲CodeBlock的renderer實現以下：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { highlight, languages } from 'prismjs';
import ReactHtmlParser from 'react-html-parser';
import 'prismjs/themes/prism.css';

export class HtmlComponent extends Component {
  static propTypes = {
    html: PropTypes.string.isRequired,
  };

  render() {
    return ReactHtmlParser(this.props.html);
  }
}

export class CodeBlock extends Component {
  static propTypes = {
    literal: PropTypes.string.isRequired,
    language: PropTypes.string.isRequired,
  };

  render() {
    const html = highlight(this.props.literal, languages[this.props.language]);
    const cls = `language-${this.props.language}`;

    return (
      <pre className={cls}>
        <code className={cls}>
          <HtmlComponent html={html} />
        </code>
      </pre>
    );
  }
}

export default CodeBlock;

此處用到了prismjs和react-html-parser兩個npm包，前者用於將代碼文本轉化爲html文本，後者用於將html文本轉化爲React的JSX對象以傳入React組件（這樣作比直接使用dangerouslySetInnerHTML屬性更安全些）。

3. 文章分類

一個友好的站點確定少不了導航菜單（或文章的分類菜單），本人的實現方式是直接使用文章的「標籤」來進行分類統計，並生成站點的頂部導航，效果以下：

爲此，須要撰寫必定的腳本實現文章的分類統計和打包，我的的實現方式是將統計結果和文章內容各自打包爲json文件，經過前端組件請求數據並加載。

導航欄組件的具體實現以下：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Dropdown, Menu, Icon } from 'antd';
import { randomId } from 'utils';
import './style.css';

export class Header extends Component {
  static propTypes = {
    data: PropTypes.array,
    activeTag: PropTypes.string,
  };

  static defaultProps = {
    data: [{ tag: '前端', count: 5 }],
    activeTag: '',
  };

  constructor(props) {
    super(props);
    this.navTotal = 6;
  }

  renderMore() {
    if (this.props.data.length <= this.navTotal) {
      return false;
    }

    const subNavItems = this.props.data.slice(this.navTotal).map(t =>
      <Menu.Item key={`sub_nav_${randomId()}`}>
        <Link
          to={t.linkTo || `/tag/${t.tag}`}
          className={`ant-dropdown-link ${this.props.activeTag === t.tag
            ? 'active'
            : ''}`}
          key={`nav_top_${randomId()}`}>
          {t.tag}（{t.count}）
        </Link>
      </Menu.Item>
    );

    const SubNav = (
      <Menu>
        {subNavItems}
      </Menu>
    );

    const DropDownBtn = (
      <Dropdown overlay={SubNav} key={`nav_top_${randomId()}`}>
        <div className="header-nav-item">
          更多分類 <Icon type="down" />
        </div>
      </Dropdown>
    );

    return DropDownBtn;
  }

  renderTop5() {
    const items = this.props.data.slice(0, this.navTotal - 1).map(t =>
      <Link
        className={`header-nav-item ${this.props.activeTag === t.tag
          ? 'active'
          : ''}`}
        to={t.linkTo || `/tag/${t.tag}`}
        key={`nav_top_${randomId()}`}>
        {!t.linkTo ? `${t.tag}（${t.count}）` : t.tag}
      </Link>
    );

    return (
      <div className="header-nav">
        {items}
        {this.renderMore()}
      </div>
    );
  }

  render = () => this.renderTop5();
}

export default Header;

你們能夠根據實際須要實現本身的文章打包方式（這裏就不奉上個人腳本了?）。

4. 更多功能

對於我的博客來講，到這裏爲止還有不少功能沒有實現，這裏偷個懶，奉上一些相關的連接吧：

4.1 關於文章評論

• 在github pagess中加入Disqus評論系統
• 使用 GitHub Issues 搭建評論系統

4.2 關於文章結構樹

• TreeMDown
• markdown-tree

我最近應該會實現一個React用途的markdown樹組件，你們不妨期待下☺️

5. 發佈你的我的靜態站點

5.1 部署到 github pages（基於 gh-pages）

CRA針對github pages用途專門推薦了一個包：gh-pages，使用方法以下：

（1）修改項目的package.json文件，添加homepage屬性：

"homepage": "https://parksben.github.io",

（2）項目安裝gh-pages依賴後修改，在package.json中添加以下配置：

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

（3）將本地代碼上傳到github博客倉庫的某個分支（只要不是master分支就行），而後執行：

yarn deploy

gh-pages會將CRA項目build到倉庫的master分支，而後，你就能夠訪問你的站點了（有關 CRA 項目部署到 github pages 的詳細描述能夠看這裏）。

5.2 如何兼容 React 的客戶端路由（一種比較 hack 的方法）

單頁面應用通常須要設置服務端路由，將應用的全部頁面路徑都重定向到index.html，而github pages並無這樣的默認設置。

於是，當你使用React的客戶端路由（React的createBrowserHistory方法建立前端路由）時，除根路徑之外的頁面，github都會返回本身的404頁面。

爲此，CRA項目提供了一種比較hack的方法來支持React的客戶端路由（經過操做window.history來強行匹配url）。也算是一種奇技淫巧吧☺️。

（1）在CRA項目的public目錄下添加一個404.html，其內容以下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>矮大緊的平常 | parksben's blog</title>
    <script type="text/javascript">
      var segmentCount = 0;
      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
</html>

（2）在index.html的head中添加以下代碼：

<script type="text/javascript">
  (function(l) {
    if (l.search) {
      var q = {};
      l.search.slice(1).split('&').forEach(function(v) {
        var a = v.split('=');
        q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
      });
      if (q.p !== undefined) {
        window.history.replaceState(null, null,
          l.pathname.slice(0, -1) + (q.p || '') +
          (q.q ? ('?' + q.q) : '') +
          l.hash
        );
      }
    }
  }(window.location))
</script>

大功告成，你的github站點支持React的客戶端路由了。

除此以外，也能夠改成使用createHashHistory方法來建立客戶端路由，這樣前端路由就與服務端路由沒多大關係了，不過url裏面一串hash畢竟不夠優雅。

有興趣瞭解奇技淫巧的童鞋，能夠點這裏。

5.3 部署到本身的服務

與CRA項目的生產環境部署方式同樣：

• 線上執行 yarn build 命令，站點的全部靜態資源將打包到 build 目錄下
• 將你的站點的入口配置到 build 目錄下

6. 項目參考（源碼奉上）

這是個人github博客（基於上述過程實現的靜態站點），感興趣的夥伴能夠點擊這裏查看項目源碼，以爲有用也能夠fork或star一下下。