1员辩、簡介
phoenix-blog-framework 是我開發(fā)的一款個人博客框架轧膘。代碼我已發(fā)布到 Github,項目地址:https://github.com/arnozhang/phoenix-blog-framework。
比如我的個人博客 http://arnozhang.com/攒岛,就是采用這個框架完成的:
![博客截圖](https://github.com/arnozhang/phoenix-blog-framework/blob/master/docs/arnozhang-blog.png?raw=true)
前后臺均采用 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.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,并啟動 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.
*/