搭建博客太簡單，此次咱們來作一個博客生成工具
文章較長，耐心讀下來我想你確定會有所收穫 : )
做爲一個技術人員，見到別人那光鮮亮麗的我的博客，內心總免不了想搭建本身博客的衝動。固然，搭建博客的方式有好多種，可是大致上分這兩種：javascript
- 服務端數據庫
例如：你能夠用 WordPress 搭建本身的博客，你能夠利用 PHP 和 MySQL 數據庫在服務器上架設屬於本身的網站。css
- 純靜態頁面
市面上有挺多的免費 靜態文件（HTML）託管機構，固然其中最簡單，最方便的可能就是 Github Pages 了。純靜態文件構建的網站有不少的優勢，好比靜態網頁的訪問速度比較快、容易被搜索引擎檢索等。html
固然，僅僅用做博客的話，純靜態頁面足夠使用了。評論系統的話能夠用第三方的插件，好比 Disqus。java
Github Pages
Github Pages 是Github提供的一個靜態文件託管系統，配合Github倉庫，使用起來特別方便。若是你不會使用的話，請看這裏。node
並且，Github Pages 集成了 Jekyll，能夠自動幫你把 markdown 語法編譯成漂亮的 html 頁面。git
市面上有不少的博客生成工具，能夠跟 Github pages 很好的結合，像是 Hexo。其實本質上很簡單，Hexo就是幫你把 markdown 編譯成了 html,
而且幫你生成了完善的目錄和路由。github
手把手教你寫一個博客生成工具出來
經過一篇文章很難把整個工具描述的一清二楚，因此先放源代碼在這裏。 源代碼經過咱們寫的工具能夠做出的博客效果是這樣的：http://isweety.me/web
咱們得知了博客生成的本質，那麼動手作出一個博客生成工具也就沒有那麼大的難度了。咱們先來梳理一下博客生成工具須要有哪些最基本的功能：數據庫
-
markdown編譯成html咱們寫博客，若是本身去寫html的話，那怕會被累死。。 Markdown 語法幫咱們解決了這個問題，若是你對markdown不瞭解的話，能夠看這裏。npm
- 生成目錄結構
咱們想一下，確實，一個博客的話最基本的就兩個部分：目錄和博客內容。咱們模仿Hexo的命令，設計以下：
咱們把工具命名爲 Bloger。
bloger init blog # 初始化一個名爲blog的博客項目 bloger new hello-world # 建立一篇名爲 hello-word 的博客 bloger build # 編譯博客網站 bloger dev # 監聽 markdown 文件，實時編譯博客網站 bloger serve # 本地起服務
按照以上的設計，咱們開始寫工具：
1、目錄設計
咱們須要爲咱們 生成的博客項目 設計一個合理的文件目錄。以下：
blog
├── my.json (網站的基本配置)
├── index.html (首頁)
├── node_modules
├── package.json
├── _posts (博客 markdown 源文件)
│ └── 2018
│ ├── test.md
│ └── hello-world.md
├── blog (_posts 中 markdown 生成的 html 文件)
│ └── 2018
│ ├── test
│ │ └──index.html (這樣設計的話，咱們就能夠經過訪問 https://xxx.com/blog/2018/test/ 來訪問這篇博客了)
│ └── hello-world
│ └──index.html
└── static (博客 markdown 源文件)
├── css (網站的css存放的文件)
├── iconfonts (網站的 iconfonts 存放的文件夾)
├── images (網站的圖片存放的文件夾)
└── less (存放於這兒的 less 文件，會在 dev 的時候被編譯到 css 文件夾中，生成同名的 css 文件)
下面是咱們寫的工具的源碼結構：
bloger ├── bin │ └── cli.js ├── lib │ ├── less (博客的樣式文件) │ ├── pages (博客的ejs模版) │ ├── tasks (編譯網站的腳本) │ └── gulpfile.js └── tpl (生成的博客模版，結構見上方)
2、markdown編譯成html
markdown編譯成html，有許多成熟的庫，這裏咱們選用 mdpack。這個項目實際上是在marked上的一層封裝。
mdpack 支持模版定製，支持多markdown拼接。
3、文章信息配置
一篇文章有不少的信息須要咱們配置，好比 標題、標籤、發佈日期 等等，Hexo 和 Jekyll 一般有一個規範是這樣的，在markdown文件的頂部放置文章的配置，
front-matter 格式以下：
--- title: Hello world date: 2018-09-10 tag: JavaScript,NodeJs info: 這篇文章簡單介紹了寫一個博客生成工具. ---
咱們須要寫個腳本將這些信息提取，而且轉換成一個json對象，好比上邊的信息，咱們要轉換成這樣：
{
"title": "Hello world",
"date": "2018-09-10",
"tag": "JavaScript,NodeJs",
"info": "這篇文章簡單介紹了寫一個博客生成工具."
}
腳本以下：
// task/metadata.js
const frontMatter = require('@egoist/front-matter'); // 截取頭部front-matter信息
const fs = require('fs');
const path = require('path');
const root = process.cwd();
const metadata = {
post: []
};
// 把提取出來的front-matter字符串解析，生成對象
function getMetadata(content) {
const head = frontMatter(content).head.split('\n');
const ret = {};
head.forEach((h) => {
const [key, value] = h.split(': ');
ret[key.trim()] = value.trim();
});
if (!ret.type) {
ret.type = '原創';
}
return ret;
}
try {
// 便利 _posts 文件夾，將全部的markdown內容的front-matter轉換成對象，存放到metadata數組中
// 將生成的metadata信息寫入一個文件中，咱們命名爲postMap.json，保存到所生成項目的根目錄，以備使用
fs.readdirSync(path.resolve(root, '_posts'))
.filter(m => fs.statSync(path.resolve(root, '_posts', m)).isDirectory())
.forEach((year) => {
fs.readdirSync(path.resolve(root, '_posts', year))
.forEach((post) => {
const content = fs.readFileSync(path.resolve(root, '_posts', year, post), 'utf8');
metadata.post.push({
year,
filename: post.split('.md')[0],
metadata: getMetadata(content)
});
});
});
fs.writeFileSync(path.resolve(root, 'postMap.json'), JSON.stringify(metadata), 'utf8');
} catch (err) {}
module.exports = metadata;
4、博客目錄生成
經過讀取postMap.json中的metadata信息，咱們能夠構建一個博客目錄出來。代碼以下：
const fs = require('fs-extra');
const path = require('path');
const ejs = require('ejs');
// 首頁的ejs模版
const homeTpl = fs.readFileSync(path.resolve(__dirname, '../pages/home.ejs'), 'utf8');
const root = process.cwd();
function buildHomeHtml() {
const metadata = require('./metadata');
// 博客網站的基本配置
const myInfo = require(path.resolve(root, 'my.json'));
const htmlMenu = require('./menu')(); // 菜單生成，這裏不講
// 講postMap.json中的metadata遍歷，而後生成一個blogList數組
const blogList = metadata.post.map((postInfo) => {
const data = postInfo.metadata;
return {
title: data.title,
date: data.date,
url: `/blog/${postInfo.year}/${postInfo.filename}`,
intro: data.intro,
tags: data.tag.split(','),
author: data.author,
type: data.type,
top: data.top === 'true' ? true : false
};
});
// 默認按發佈時間排序
blogList.sort((a, b) => new Date(a.date) - new Date(b.date));
// 置頂
blogList.sort((a, b) => !a.top);
// ejs替換
fs.outputFile(
path.resolve(root, 'index.html'),
ejs.render(homeTpl, {
name: myInfo.name,
intro: myInfo.intro,
homepage: myInfo.homepage,
links: myInfo.links,
blogList,
htmlMenu
}),
(err) => {
console.log('\nUpadate home html success!\n');
}
);
}
module.exports = buildHomeHtml;
5、集成gulp
在編譯博客的過程當中，一些操做利用 gulp 會簡單快捷許多。好比 編譯less、打包iconfonts、監聽文件改動 等。
可是gulp是一個命令行工具，咱們怎麼樣能把gulp繼承到咱們的工具中呢？方法很簡單，以下：
const gulp = require('gulp');
require('./gulpfile.js');
// 啓動gulpfile中的build任務
if(gulp.tasks.build) {
gulp.start('build');
}
經過以上的方法，咱們能夠在咱們的cli工具中集成 gulp，那麼好多問題就變得特別簡單，貼上完整的 gulpfile:
const fs = require('fs');
const path = require('path');
const url = require('url');
const del = require('del');
const gulp = require('gulp');
const log = require('fancy-log');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const plumber = require('gulp-plumber');
const iconfont = require('gulp-iconfont');
const iconfontCss = require('gulp-iconfont-css');
const mdpack = require('mdpack');
const buildHome = require('./tasks/home');
const root = process.cwd();
// 編譯博客文章頁面
function build() {
const metadata = require(path.resolve(root, 'postMap.json'));
const myInfo = require(path.resolve(root, 'my.json'));
const htmlMenu = require('./tasks/menu')(); // 跳過
// 刪除博客文件夾
del.sync(path.resolve(root, 'blog'));
// 遍歷_posts文件夾，編譯全部的markdown文件
// 生成的格式爲 blog/${year}/${filename}/index.html
fs.readdirSync(path.resolve(root, '_posts'))
.filter(m => fs.statSync(path.resolve(root, '_posts', m)).isDirectory())
.forEach((year) => {
fs.readdirSync(path.resolve(root, '_posts', year))
.forEach((post) => {
const filename = post.split('.md')[0];
const _meta = metadata.post.find(_m => _m.filename === filename).metadata;
const currentUrl = url.resolve(myInfo.homepage, `blog/${year}/${filename}`);
const mdConfig = {
entry: path.resolve(root, '_posts', year, post),
output: {
path: path.resolve(root, 'blog', year, filename),
name: 'index'
},
format: ['html'],
plugins: [
// 去除markdown文件頭部的front-matter
new mdpack.plugins.mdpackPluginRemoveHead()
],
template: path.join(__dirname, 'pages/blog.ejs'),
resources: {
markdownCss: '/static/css/markdown.css',
highlightCss: '/static/css/highlight.css',
title: _meta.title,
author: _meta.author,
type: _meta.type,
intro: _meta.intro,
tag: _meta.tag,
keywords: _meta.keywords,
homepage: myInfo.homepage,
name: myInfo.name,
disqusUrl: myInfo.disqus ? myInfo.disqus.src : false,
currentUrl,
htmlMenu
}
};
mdpack(mdConfig);
});
});
}
// 編譯css
gulp.task('css', () => {
log('Compile less.');
// 咱們編譯當前項目下的 lib/less/*.less 和 生成的博客項目下的 static/less/**/*.less
return gulp.src([path.resolve(__dirname, 'less/*.less'), path.resolve(root, 'static/less/**/*.less')])
.pipe(plumber())
.pipe(less({
paths: [root]
}))
// css壓縮
.pipe(minifyCSS())
// 自動加前綴
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// 將編譯生成的css放入生成的博客項目下的 static/css 文件夾中
.pipe(gulp.dest(path.resolve(root, 'static/css')));
});
// 監聽css文件的改動，編譯css
gulp.task('cssDev', () => {
log('Starting watch less files...');
return gulp.watch([path.resolve(__dirname, 'less/**/*.less'), path.resolve(root, 'static/less/**/*.less')], ['css']);
});
// 監聽markdown文件的改動，編譯首頁和博客文章頁
gulp.task('mdDev', () => {
log('Starting watch markdown files...');
return gulp.watch(path.resolve(root, '_posts/**/*.md'), ['home', 'blog']);
});
// 編譯首頁
gulp.task('home', buildHome);
// build博客
gulp.task('blog', build);
gulp.task('default', ['build']);
// 監聽模式
gulp.task('dev', ['cssDev', 'mdDev']);
// 執行build的時候會編譯css，編譯首頁，編譯文章頁
gulp.task('build', ['css', 'home', 'blog']);
// 生成iconfonts
gulp.task('fonts', () => {
console.log('Task: [Generate icon fonts and stylesheets and preview html]');
return gulp.src([path.resolve(root, 'static/iconfonts/svgs/**/*.svg')])
.pipe(iconfontCss({
fontName: 'icons',
path: 'css',
targetPath: 'icons.css',
cacheBuster: Math.random()
}))
.pipe(iconfont({
fontName: 'icons',
prependUnicode: true,
fontHeight: 1000,
normalize: true
}))
.pipe(gulp.dest(path.resolve(root, 'static/iconfonts/icons')));
});
6、cli文件
咱們已經把gulpfile寫完了，下面就要寫咱們的命令行工具了，而且集成gulp。代碼以下：
// cli.js
#!/usr/bin/env node
const gulp = require('gulp');
const program = require('commander'); // 命令行參數解析
const fs = require('fs-extra');
const path = require('path');
const spawn = require('cross-spawn');
const chalk = require('chalk');
const dateTime = require('date-time');
require('../lib/gulpfile');
const { version } = require('../package.json');
const root = process.cwd();
// 判斷是不是所生成博客項目的根目錄（由於咱們必須進入到所生成的博客項目中，才能夠執行咱們的build和dev等命令）
const isRoot = fs.existsSync(path.resolve(root, '_posts'));
// 若是不是根目錄的話，輸出的內容
const notRootError = chalk.red('\nError: You should in the root path of blog project!\n');
// 參數解析，正如咱們上面所設計的命令用法，咱們實現瞭如下幾個命令
// bloger init [blogName]
// bloger new [blog]
// bloger build
// bloger dev
// bloger iconfonts
program
.version(version)
.option('init [blogName]', 'init blog project')
.option('new [blog]', 'Create a new blog')
.option('build', 'Build blog')
.option('dev', 'Writing blog, watch mode.')
.option('iconfonts', 'Generate iconfonts.')
.parse(process.argv);
// 若是使用 bloger init 命令的話，執行如下操做
if (program.init) {
const projectName = typeof program.init === 'string' ? program.init : 'blog';
const tplPath = path.resolve(__dirname, '../tpl');
const projectPath = path.resolve(root, projectName);
// 將咱們的項目模版複製到當前目錄下
fs.copy(tplPath, projectPath)
.then((err) => {
if (err) throw err;
console.log('\nInit project success!');
console.log('\nInstall npm packages...\n');
fs.ensureDirSync(projectPath); // 確保存在項目目錄
process.chdir(projectPath); // 進入到咱們生成的博客項目，而後執行 npm install 操做
const commond = 'npm';
const args = [
'install'
];
// npm install
spawn(commond, args, { stdio: 'inherit' }).on('close', code => {
if (code !== 0) {
process.exit(1);
}
// npm install 以後執行 npm run build，構建博客項目
spawn('npm', ['run', 'build'], { stdio: 'inherit' }).on('close', code => {
if (code !== 0) {
process.exit(1);
}
// 構建成功以後輸出成功信息
console.log(chalk.cyan('\nProject created!\n'));
console.log(`${chalk.cyan('You can')} ${chalk.grey(`cd ${projectName} && npm start`)} ${chalk.cyan('to serve blog website.')}\n`);
});
});
});
}
// bloger build 執行的操做
if (program.build && gulp.tasks.build) {
if (isRoot) {
gulp.start('build');
} else {
console.log(notRootError);
}
}
// bloger dev執行的操做
if (program.dev && gulp.tasks.dev) {
if (isRoot) {
gulp.start('dev');
} else {
console.log(notRootError);
}
}
// bloger new 執行的操做
if (program.new && typeof program.new === 'string') {
if (isRoot) {
const postRoot = path.resolve(root, '_posts');
const date = new Date();
const thisYear = date.getFullYear().toString();
// 在_posts文件夾中生成一個markdown文件，內容是下邊的字符串模版
const template = `---\ntitle: ${program.new}\ndate: ${dateTime()}\nauthor: 做者\ntag: 標籤\nintro: 簡短的介紹這篇文章.\ntype: 原創\n---\n\nBlog Content`;
fs.ensureDirSync(path.resolve(postRoot, thisYear));
const allList = fs.readdirSync(path.resolve(postRoot, thisYear)).map(name => name.split('.md')[0]);
// name exist
if (~allList.indexOf(program.new)) {
console.log(chalk.red(`\nFile ${program.new}.md already exist!\n`));
process.exit(2);
}
fs.outputFile(path.resolve(postRoot, thisYear, `${program.new}.md`), template, 'utf8', (err) => {
if (err) throw err;
console.log(chalk.green(`\nCreate new blog ${chalk.cyan(`${program.new}.md`)} done!\n`));
});
} else {
console.log(notRootError);
}
}
// bloger iconfonts執行的操做
if (program.iconfonts && gulp.tasks.fonts) {
if (isRoot) {
gulp.start('fonts');
} else {
console.log(notRootError);
}
}
完整的項目源代碼： https://github.com/PengJiyuan...相關閱讀：手把手教你寫一個命令行工具
本章完
相關文章
- 1. 簡單搭建Firekylin博客
- 2. 用Hexo搭建博客（一）——在本地搭建一個博客
- 3. Gridea搭建個人博客, 超簡單
- 4. Java：搭建一個博客
- 5. （一）搭建個人博客
- 6. Django博客教程–創建一個簡單的博客
- 7. git初次搭建博客
- 8. 【Hexo搭建個人博客】（十）個人博客搭建心得
- 9. Django搭建我的博客：簡單搜索博客文章
- 10. 搭建博客
- 更多相關文章...
- • MySQL客戶端和服務器端工具集 - MySQL教程
- • XSLT - 在客戶端 - XSLT 教程
- • PHP開發工具
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 簡單搭建Firekylin博客
- 2. 用Hexo搭建博客（一）——在本地搭建一個博客
- 3. Gridea搭建個人博客, 超簡單
- 4. Java：搭建一個博客
- 5. （一）搭建個人博客
- 6. Django博客教程–創建一個簡單的博客
- 7. git初次搭建博客
- 8. 【Hexo搭建個人博客】（十）個人博客搭建心得
- 9. Django搭建我的博客：簡單搜索博客文章
- 10. 搭建博客