1、簡介

phoenix-blog-framework 是我開發(fā)的一款個(gè)人博客框架。代碼我已發(fā)布到 Github，項(xiàng)目地址：https://github.com/arnozhang/phoenix-blog-framework。

比如我的個(gè)人博客 http://arnozhang.com/，就是采用這個(gè)框架完成的：

博客截圖

前后臺(tái)均采用 Typescript 編寫。各模塊采用技術(shù)如下：

phoenix-blog-framework 的特點(diǎn)：

• 前后臺(tái)均采用 Typescript 編寫，管理方便；
• 擁有強(qiáng)大的后臺(tái)管理系統(tǒng)，以及 Markdown 博客寫作系統(tǒng)；
• 部署方便；
• 博客采用 Markdown 存放；
• 可自由添加實(shí)現(xiàn)渲染模板，可定制頁面展示。

2、博客環(huán)境配置

在 sources/src/server/server.config.ts 中配置了博客環(huán)境，其中指定了 MongoDB 的 host 和端口、博客管理后臺(tái)的帳號密碼，以及頁面的渲染組件。這些配置可以根據(jù)你的需求靈活修改：

export var config = {
    db: {
        host: 'localhost',
        port: 27017,
        database_name: 'phoenix_blog'
    },

    user: {
        userName: 'phoenix blog',
        email: 'zyfgood12@163.com',
        portrait: '/default_portrait.png'
    },

    site: {
        siteTitle: 'Phoenix Blog',
        subTitle: 'github.com@phoenix_blog',
    },

    // render engine.
    render: 'default',

    admin: {
        name: 'admin',
        password: '123456'
    }
};

頁面渲染引擎自定義可以通過參考 sources/src/client/render/RenderEngines.ts 文件，來實(shí)現(xiàn)頁面渲染自定義。

3、部署 & 運(yùn)行

3.1、部署環(huán)境

先要安裝 Node.js 、 npm 以及 Webpack。然后安裝 Typescript 和 Typings。

npm install --global typescript
npm install --global typings
npm install --global webpack

3.2、拉取代碼

git clone https://github.com/arnozhang/phoenix-blog-framework

3.3、安裝依賴包

cd phoenix-blog-framework/sources

npm install
npm link typescript

3.4、安裝 MongoDB，并啟動(dòng) MongoDB

具體方法參考 MongoDB 官網(wǎng)。

4、啟動(dòng)博客

4.1、編譯 Server 端代碼（將 Typescript 轉(zhuǎn)化為 Javascript）

cd phoenix-blog-framework/sources
tsc

4.2、啟動(dòng) Webpack，編譯客戶端代碼

這里有兩種方法，一種是用來調(diào)試，這時(shí)候會(huì) watch 本地代碼更新，如果有更新，則 Webpack 會(huì)同步編譯：

cd phoenix-blog-framework/sources
webpack --watch

另一種是部署到正式環(huán)境，則不會(huì) watch：

cd phoenix-blog-framework/sources
webpack -p

4.3、啟動(dòng)博客

仍然有兩種方法，第一種是調(diào)試運(yùn)行：

node ./dist/build/server/index.js

第二種是正式部署時(shí)，這時(shí)候我們可以用 forever 這個(gè) npm 包，來讓博客永久運(yùn)行：

forever start ./dist/build/server/index.js

需要注意的是，在 Linux 環(huán)境下，當(dāng)啟動(dòng) 80 端口時(shí)，需要 sudo 權(quán)限。

4.4、打開博客

打開博客首頁：http://localhost

打開博客后臺(tái)管理頁面：http://localhost/admin

打開博客寫作頁面：http://localhost/write_new_post

博客寫作、后臺(tái)管理頁面均需要輸入管理員帳號和密碼——亦即在 server.config.js 文件中配置的帳號和密碼。

License

/**
 * Phoenix blog project.
 *
 * Copyright 2016-2016 Arno Zhang <zyfgood12@163.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */