引言

随着互联网的快速发展，越来越多的人希望通过建立个人博客网站来分享自己的见解和知识。本文将详细介绍我在搭建个人博客网站过程中的实际操作步骤、技术选型以及遇到的问题与解决方法，希望能够为有志于建立个人博客网站的读者提供一些参考和启示。

一、项目背景

在现代信息化社会，拥有一个属于自己的网络空间已经成为很多人的追求。通过个人博客网站，不仅可以记录自己的生活点滴，还可以展示自己的作品，与他人分享经验和知识。因此，我决定搭建一个个人博客网站，并在此过程中学习和掌握相关技术。

二、技术选型

在开始搭建个人博客网站之前，首先需要选择合适的技术栈。经过调研和比较，我选择了以下技术：

  1. 前端框架：Vue.js
  2. 后端框架：Node.js + Express.js
  3. 数据库：MongoDB
  4. 开发工具：Visual Studio Code
  5. 部署平台：GitHub Pages + Netlify

这些技术的选择主要基于以下几点考虑：

  • Vue.js 是一个轻量级且易于上手的前端框架，适合快速开发。
  • Node.js 和 Express.js 提供了强大的后端支持，可以方便地处理请求和数据。
  • MongoDB 作为 NoSQL 数据库，具有高性能和易扩展性。
  • Visual Studio Code 是一款流行的代码编辑器，支持丰富的插件扩展，提升开发效率。
  • GitHub Pages 和 Netlify 提供免费的静态网站托管服务，方便部署和管理。

三、实际操作步骤

1. 安装必要软件

在本地计算机上安装 Node.js 和 MongoDB，并配置好环境变量。接着安装 Visual Studio Code，并通过其插件市场安装必要的插件，如 ESLint（代码规范检查）、Vetur（Vue.js 语法高亮）等。

2. 创建项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-blog
cd my-blog

然后初始化 Git 仓库：

git init
git add .
git commit -m "Initial commit"

3. 编写后端 API

在项目的根目录下创建一个 api 目录，并在其中创建一个新的文件 server.js：

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/my-blog', { useNewUrlParser: true, useUnifiedTopology: true });

// Define a simple schema for blog posts
const postSchema = new mongoose.Schema({
title: String,
content: String,
createdAt: { type: Date, default: Date.now }
});

const Post = mongoose.model('Post', postSchema);

app.use(express.json());

// Create a new post
app.post('/api/posts', async (req, res) => {
const post = new Post(req.body);
await post.save();
res.status(201).send(post);
});

// Get all posts
app.get('/api/posts', async (req, res) => {
const posts = await Post.find().sort({ createdAt: -1 });
res.send(posts);
});

// Start server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});

4. 前端页面开发

在 src 目录下，创建相应的组件和视图。例如，创建 PostList.vue 用于展示博客列表，创建 PostForm.vue 用于提交新的文章。

<template>
<div id="app">
<h1>My Blog</h1>
<post-form @new-post="addPost"></post-form>
<post-list :posts="posts"></post-list>
</div>
</template>

<script>
import PostForm from './components/PostForm';
import PostList from './components/PostList';
import axios from 'axios';

export default {
components: {
PostForm,
PostList
},
data() {
return {
posts: []
};
},
methods: {
async fetchPosts() {
const response = await axios.get('/api/posts');
this.posts = response.data;
},
addPost(post) {
this.posts.unshift(post);
}
},
mounted() {
this.fetchPosts();
}
};
</script>

5. 部署到 Netlify 和 GitHub Pages

为了实现自动化部署，需要在项目中添加 package.json 脚本：

{
"scripts": {
"build": "vue-cli-service build",
"deploy": "ghp-import -np -f -v -b main -r https://github.com/yourusername/your-repo.git && npx netlify deploy"
}
}

接着在 Netlify 上创建一个新的站点，并将 GitHub 仓库与其关联。这样，每次提交代码后，Netlify 会自动构建并部署静态文件。

四、遇到的问题与解决方法

1. CORS 问题

在开发过程中，遇到了跨域资源共享（CORS）的问题。解决方法是在后端服务器中添加 CORS 头部：

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

2. 静态资源缓存问题

由于浏览器可能会缓存静态资源，导致更新后的内容无法及时显示。解决方法是在构建时生成带有哈希值的文件名，以确保每次更新都能加载最新的资源。Vue CLI 已经内置了这一功能。

五、总结

通过本次实训，我不仅成功搭建了个人博客网站，还学习到了前后端分离的开发模式和技术栈的选择与应用。整个过程中虽然遇到了一些问题，但通过查阅文档和社区的帮助，最终都得到了解决。希望这篇报告能为有需要的朋友提供一些帮助！