Node.js + React.js + MongoDB + express 搭建的個人博客框架

1员辩、簡介

phoenix-blog-framework 是我開發(fā)的一款個人博客框架轧膘。代碼我已發(fā)布到 Github,項目地址:https://github.com/arnozhang/phoenix-blog-framework

比如我的個人博客 http://arnozhang.com/攒岛,就是采用這個框架完成的:

博客截圖
博客截圖

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

模塊 技術(shù)
語言 Typescript
頁面 React.js + CSS-Modules + pug + jQuery
后臺 Node.js + Express
數(shù)據(jù)庫 MongoDB + mongoose

phoenix-blog-framework 的特點:

  • 前后臺均采用 Typescript 編寫胞锰,管理方便灾锯;
  • 擁有強(qiáng)大的后臺管理系統(tǒng),以及 Markdown 博客寫作系統(tǒng)嗅榕;
  • 部署方便顺饮;
  • 博客采用 Markdown 存放;
  • 可自由添加實現(xiàn)渲染模板凌那,可定制頁面展示兼雄。

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

sources/src/server/server.config.ts 中配置了博客環(huán)境帽蝶,其中指定了 MongoDB 的 host 和端口赦肋、博客管理后臺的帳號密碼,以及頁面的渲染組件励稳。這些配置可以根據(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 文件佃乘,來實現(xiàn)頁面渲染自定義。

3麦锯、部署 & 運行

3.1恕稠、部署環(huán)境

先要安裝 Node.jsnpm 以及 Webpack扶欣。然后安裝 TypescriptTypings鹅巍。

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,并啟動 MongoDB

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

4敛苇、啟動博客

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

cd phoenix-blog-framework/sources
tsc

4.2顺呕、啟動 Webpack枫攀,編譯客戶端代碼

這里有兩種方法,一種是用來調(diào)試株茶,這時候會 watch 本地代碼更新来涨,如果有更新,則 Webpack 會同步編譯:

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

另一種是部署到正式環(huán)境启盛,則不會 watch:

cd phoenix-blog-framework/sources
webpack -p

4.3蹦掐、啟動博客

仍然有兩種方法技羔,第一種是調(diào)試運行:

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

第二種是正式部署時,這時候我們可以用 forever 這個 npm 包卧抗,來讓博客永久運行:

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

需要注意的是藤滥,在 Linux 環(huán)境下,當(dāng)啟動 80 端口時社裆,需要 sudo 權(quán)限拙绊。

4.4、打開博客

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

打開博客后臺管理頁面:http://localhost/admin

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

博客寫作浦马、后臺管理頁面均需要輸入管理員帳號和密碼——亦即在 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.
 */
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市晶默,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌航攒,老刑警劉巖磺陡,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異漠畜,居然都是意外死亡币他,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進(jìn)店門憔狞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蝴悉,“玉大人,你說我怎么就攤上這事瘾敢∨墓冢” “怎么了?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵簇抵,是天一觀的道長庆杜。 經(jīng)常有香客問我,道長碟摆,這世上最難降的妖魔是什么晃财? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮典蜕,結(jié)果婚禮上断盛,老公的妹妹穿的比我還像新娘。我一直安慰自己愉舔,他們只是感情好钢猛,可當(dāng)我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著屑宠,像睡著了一般厢洞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天躺翻,我揣著相機(jī)與錄音丧叽,去河邊找鬼。 笑死公你,一個胖子當(dāng)著我的面吹牛踊淳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播陕靠,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼迂尝,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了剪芥?” 一聲冷哼從身側(cè)響起垄开,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎税肪,沒想到半個月后溉躲,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡益兄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年锻梳,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片净捅。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡疑枯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蛔六,到底是詐尸還是另有隱情荆永,我是刑警寧澤,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布古今,位于F島的核電站屁魏,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏捉腥。R本人自食惡果不足惜氓拼,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望抵碟。 院中可真熱鬧桃漾,春花似錦、人聲如沸拟逮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽敦迄。三九已至恋追,卻和暖如春凭迹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背苦囱。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工嗅绸, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人撕彤。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓鱼鸠,卻偏偏與公主長得像,于是被迫代替她去往敵國和親羹铅。 傳聞我的和親對象是個殘疾皇子蚀狰,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容