把Github pages用Nodejs改造成个人博客
把Github pages用Nodejs改造成个人博客
一页一页构建github page对于一个前端工作者来说不算什么难事，但毕竟太麻烦，看到网上一些开源项目为我们提供了帮助，想着自己整一个吧用着方便，于是写了一坨 利用Github pages功能搭建静态博客
把Github Pages用Node.js改造成个人博客
在当今的互联网时代，拥有一个个人博客已经成为了许多开发者展示自我、分享知识的重要方式。GitHub Pages 提供了一个免费且简单的方式来托管静态网站，而 Node.js 则是一个强大的后端技术栈，可以用来简化开发流程和增加功能。
步骤一：初始化项目
首先，我们需要创建一个新的 Node.js 项目，并安装必要的依赖包。以下是一些基本步骤：
mkdir my-personal-blog
cd my-personal-blog
npm init -y
npm install --save express ejs这里我们使用了 express 框架来快速搭建服务器，并选择了 ejs 作为模板引擎来渲染页面。
步骤二：编写基础的 Express 服务
接下来，我们需要编写一个简单的 Express 应用来处理请求。创建一个 server.js 文件并添加以下代码：
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.render('index', { title: 'My Personal Blog' });
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});这段代码设置了 Express 应用，指定了视图引擎为 EJS，并定义了一个根路由来渲染首页。
步骤三：创建 EJS 模板
在项目根目录下创建一个 views 文件夹，并在其中创建一个 index.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1>Welcome to My Personal Blog</h1>
<p>This is a simple blog built using GitHub Pages and Node.js.</p>
</body>
</html>这个模板文件会根据传递的数据动态渲染页面内容。
步骤四：部署到 GitHub Pages
最后，我们需要将项目部署到 GitHub Pages。这可以通过 gh-pages 包来实现。安装该包并配置脚本：
npm install --save-dev gh-pages修改 package.json 文件，添加以下脚本：
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}然后，我们需要一个构建步骤来生成静态文件。可以简单地将 build 目录作为静态文件目录：
// server.js
app.use(express.static('build'));确保你的项目包含一个 build 目录，并运行 npm run deploy 来部署到 GitHub Pages。
结语
通过上述步骤，你可以利用 Node.js 和 GitHub Pages 创建一个简单的个人博客。这只是一个起点，你可以在此基础上添加更多功能，如文章管理、评论系统等，让博客更加丰富和实用。
为了将GitHub Pages用Node.js改造成一个个人博客，我们可以创建一个简单的静态网站生成器。这个生成器将会处理Markdown文件，并将其转换为HTML页面。以下是如何实现的一个简要指南。
步骤一: 创建一个新的Node.js项目
首先，我们需要初始化一个新的Node.js项目并安装必要的依赖项。
mkdir my-personal-blog
cd my-personal-blog
npm init -y
npm install marked ejs fs-extra path --save步骤二: 创建一个基本的文件结构
我们先创建一个基本的目录结构：
my-personal-blog/
├── index.js
├── config.json
├── content/
│ └── blog-posts/
└── public/
└── output/index.js将是我们的主要应用脚本。config.json用于存储配置信息。content/blog-posts/将存放我们的Markdown博客文章。public/output/是我们将输出HTML文件的位置。
步骤三: 编写应用逻辑
现在，让我们编写Node.js脚本来读取Markdown文件，并将它们转换成HTML。
index.js
const marked = require('marked');
const fs = require('fs-extra');
const path = require('path');
async function build() {
const contentDir = path.join(__dirname, 'content', 'blog-posts');
const outputDir = path.join(__dirname, 'public', 'output');
await fs.remove(outputDir); // 清空输出目录
await fs.ensureDir(outputDir);
const files = await fs.readdir(contentDir);
for (const file of files) {
if (file.endsWith('.md')) { // 只处理Markdown文件
const filePath = path.join(contentDir, file);
const markdownContent = await fs.readFile(filePath, 'utf-8');
const htmlContent = marked(markdownContent);
const outputFile = path.join(outputDir, `${path.basename(file, '.md')}.html`);
await fs.writeFile(outputFile, htmlContent);
}
}
}
build().catch(err => console.error(err));步骤四: 配置Markdown解析器
你可以通过修改package.json中的scripts字段来添加构建命令：
{
"name": "personal-blog",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "node index.js"
},
"dependencies": {
"marked": "^4.0.10",
"ejs": "^3.1.6",
"fs-extra": "^9.0.1",
"path": "^0.12.7"
}
}步骤五: 添加内容
在content/blog-posts/下创建你的Markdown文件（例如hello-world.md），并确保它包含一些Markdown格式的内容。
运行构建命令后，Markdown文件会被转换为HTML，并存储在public/output/目录中。
现在，你可以将这些生成的HTML文件部署到GitHub Pages上，作为你的个人博客。
