快速搭建你的 github pages 個人博客——基於 Create-React-App 的單頁面應用實踐
相信各位github資深玩家們都有自己基於 搭建的個人站點。官方推薦的靜態站點生成器是 ，關於 的使用感興趣的各位請自行 google，這裡就不贅述了。本文主要介紹下基於 搭建個人博客的相關實踐，可能更適合做前端開發的夥伴。
是 推出的靜態站點服務，主要的用途在於使用你在 倉庫中的代碼構建你自己的靜態站點，為用戶提供 二級域名，您也可以通過添加DNS的 記錄來綁定自己的域名。
最簡單粗暴的方法就是直接往 github 上方靜態頁面了，創建一個名為 的github倉庫，將您的index.html頁面代碼扔進master分支，就可以直接通過 訪問到您的站點了。
對於一個簡單的個人博客站點來說，存在以下基本功能特性：
下面介紹基於React如何實現一個簡單的靜態博客。
1. 創建一個 React 項目
使用 Create-React-App（以下簡稱CRA） 的generator創建一個React前端項目骨架。對此項目進行一定改造以方便我們日常的開發和使用習慣：
個人改造後的項目代碼在這裡，您可以直接fork或者down下來使用。
2. 使用 markdown 搞定你的文章2.1 用於新建文章的互動式命令行（基於 inquirer）
一般的靜態博客系統（如gatsby），會給用戶提供一個用於創建新文章的互動式命令行，效果大致如下：
類似功能可以使用nodejs中readline模塊的原生方法來實現。這裡推薦一個第三方工具：inquirer，本質上是對readline模塊進行了增強，提供了很多實用的方法用於互動式命令行開發，實現的用戶界面（命令行）也比較友好。
對於上面GIF示例的功能，其代碼實現如下：
如是，將此node腳本添加到項目 的 中（如： ），即可通過 命令運行。
2.2 md 轉 html（基於 react-markdown）
為使用markdown文檔來編輯、存儲博客的文章內容，需要將md文檔內容轉換為react的JSX對象以渲染到網頁中。在此推薦使用react-markdown，功能很6，作者維護得也比較勤。
使用方式如下：
2.3 代碼塊的語法高亮
react-markdown提供了一個renderers屬性，用戶可以傳入一系列renderer組件來自定義文章中一些內容的渲染方式（有興趣的童鞋可以看下包作者對默認renderer的實現）。
如：自定義md中圖片的渲染方式（用法如下）。
與此類似，我們可以通過傳入一個自定義的renderer來實現文章中代碼塊的語法高亮。名為 的renderer實現如下：
此處用到了prismjs和react-html-parser兩個npm包，前者用於將代碼文本轉化為html文本，後者用於將html文本轉化為React的JSX對象以傳入React組件（這樣做比直接使用dangerouslySetInnerHTML屬性更安全些）。
3. 文章分類
一個友好的站點肯定少不了導航菜單（或文章的分類菜單），本人的實現方式是直接使用文章的「標籤」來進行分類統計，並生成站點的頂部導航，效果如下：
為此，需要撰寫一定的腳本實現文章的分類統計和打包，個人的實現方式是將統計結果和文章內容各自打包為json文件，通過前端組件請求數據並載入。
導航欄組件的具體實現如下：
大家可以根據實際需要實現自己的文章打包方式（這裡就不奉上我的腳本了）。
4. 更多功能
對於個人博客來說，到這裡為止還有很多功能沒有實現，這裡偷個懶，奉上一些相關的鏈接吧：
4.1 關於文章評論
在github pagess中加入Disqus評論系統
我最近應該會實現一個React用途的markdown樹組件，大家不妨期待下
5. 發布你的個人靜態站點5.1 部署到 github pages（基於 gh-pages）
CRA針對github pages用途專門推薦了一個包：gh-pages，使用方法如下：
（1）修改項目的 文件，添加homepage屬性：
（2）項目安裝 依賴後，在 中添加如下配置：
（3）將本地代碼上傳到github博客倉庫的某個分支（只要不是master分支就行），然後執行：
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目錄下添加一個 ，其內容如下：
（2）在 的head中添加如下代碼：
大功告成，你的github站點支持React的客戶端路由了。
除此之外，也可以改為使用 方法來創建客戶端路由，這樣前端路由就與服務端路由沒多大關係了，不過url裡面一串hash畢竟不夠優雅。
有興趣了解奇技淫巧的童鞋，可以點這裡。
5.3 部署到自己的服務
與CRA項目的生產環境部署方式一樣：
TAG:KnownsecFED |