相信各位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
訪問到您的站點了。
對於一個簡單的個人部落格站點來說,存在以下基本功能特性:
- 文章的新增、編輯、一鍵釋出
- 文章的分類、歸檔yarn
- 風格良好的部落格樣式
- 評論、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: '請輸入文章的釋出時間(或者按Enter鍵使用預設值):',
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"
),即可通過yarn new-post
命令執行。
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 關於文章評論
4.2 關於文章結構樹
我最近應該會實現一個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一下下。
關注微信公眾號:創宇前端(KnownsecFED),碼上獲取更多優質乾貨!
