NodeJS+3D酷炫动画玩转纯手工打造个人博客，不用博客框架

懒人码农

已于 2023-07-10 10:24:24 修改

阅读量2.6k

点赞数 4

分类专栏：项目实战 node.js javascript 文章标签： nodejs css3 javascript nginx 程序人生

于 2020-07-18 18:20:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_15041931/article/details/107433095

版权

本文介绍了为何要创建个人博客，包括建立知识体系、养成写作习惯、提升个人品牌和享受写作乐趣。接着分享了如何使用NodeJS、Express、CSS3动画和Three.js等技术栈，纯手工打造一个酷炫的个人博客，并涉及线上部署与Nginx优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

那些优秀的程序猿，特别是大佬级别的开发者，都会有自己的个人博客网站。曾经有个老铁跟我说，一个程序猿爱好者没有属于自己的博客，还不算真正进入我们这个行当，用球迷的话来说，就是伪球迷。此言差矣，其实每个人的追求不一样。也可能是精力有限为了生计，不过借助一些知名的社交平台（掘金、思否、优快云、博客园、简书、知乎、公众号）也是不错的选择。但小编还是希望小伙伴们能抽出一点点时间，撸一个出来。为什么要弄个人博客？

为什么要弄个人博客？

建立知识体系

写博客，可以将你学的七零八碎的知识点整合到一起，形成完整的个人笔记。这份笔记，记录了你囫囵吞枣的内容，也记录了你从理论到实践的历程。如果有一天，你想回顾这些知识点，对照着曾经记录的笔记，会起到事半功倍的效果。

那么光是记录笔记就可以了么？

你还要把笔记分享出来，因为有人监督与无人监督的效果大相径庭。如果是自己私下的笔记，可能不由自主地会松上一口气，往往做着做着就半途而废以至于前功尽弃。就好比你可以肆无忌惮在自己的房间里自言自语，然而发布朋友圈的时候却往往谨小慎微，因为不是只有你一个人可以看到这些内容。你知道你的文章会被别人阅读，自然要打起十二分精神全力以赴，希望获得别人的认可。态度决定成败，在别人“眼皮底下”写作，更能拿出认真的精神气儿。

如果觉得自己已经掌握某个知识点的时候，不妨写一篇文章，如果能让大部分读者读懂，说明这个知识点你掌握得还不错。除此之外，读者的点赞👍或评论，也是鼓励你查漏补缺的突破口。

总之，这些文章会成为你珍贵的个人财富。💪

养成写作习惯

人往往是懒惰的，除非明天就会失业，不然很难会在今天狠狠逼自己一把。

写个人博客的好处就在于：你总是紧绷着一根弦，不断提醒自己，这个月还有一篇博客要写，不能让读者们等急了。有压力，才有动力，不至于浑浑噩噩度日。

提升个人品牌

坚持写博客，你的影响力便不知不觉地渗透出去，“酒香也怕巷子深”，现代社会绝不能孤芳自赏。才华转化为影响力的那一瞬间，才是你的价值所在。

你的影响力越大，身边的机会就越多。你的个人品牌，是你最好的“护城河”。

快乐写作

写个人博客其实也是一件蛮快乐的事，一天之中难得的放松机会，得以反思工作的得失。特别是将写好的文章分享出去，自豪感油然而生。

读者也可以从中汲取养分，互惠互利，岂不乐乎？😋

回归主题

接下来实战分享，由于参考了一些官网的示例，觉得很不错，自己就简单的研究了一下，动手弄着玩玩。纯手工打造酷炫个人博客网站，适配PC端和移动端。

个人博客演示地址👉：http://106.55.168.13:8888/

部分截图

目录结构

│  app.js                            // 入口文件
│  ecosystem.config.js               // pm2默认配置文件
│  package.json                      // npm包管理所需模块及配置信息
└─public
    │  favicon.ico                   // 图标
    │  index.html                    // 入口html文件
    ├─assets                         // 存放公共文件夹
    │  └─audios                      // 存放音频MP3文件夹
    │  └─css                         // 存放样式文件夹
    │  └─fonts                       // 存放字体文件夹
    │  └─images                      // 存放图片文件夹
    │  └─js
    │          index.js              // JS封装公共方法文件
    │          three.r112.js         // JS三维模型库
    │          TweenLite.js          // JS动画库

技术栈

NodeJS v10
Express v4.17
Normalize.css
CSS3动画
媒介查询
Three.r112.js
TweenLite.js
nodemon
pm2

功能模块

顶部导航翻转
首屏3D人物动画
屏幕滚动视差效果
背景音乐
鼠标点击首屏人物动效
博客栏目粒子动效
联系我栏目人群穿梭动效

代码实现

个人博客分三个栏目：关于我、技术博客、联系我。

准备工作

windows 10系统
下载安装 nodejs v10+ nodejs.org/zh-cn/
代码编辑器工具 Sublime Text 3 & VS Code

代码实现

生成package.json文件

npm init -y

安装nodemon & express

npm i -D nodemon
npm i -S express

根目录新建app.js文件

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

// 设置静态文件目录
app.use(express.static(__dirname + '/public'))

// 路由重定向
app.all('*', (req, res) => {
   
	res.redirect(302, '/'); 
})

// 监听8888端口
app.listen(8888, () => {
    
	console.log('服务启动成功 http://localhost:8888')
})

http-server构建本地服务替代Express

npm i http-server -g

启动服务

http-server -c-1 -p 8888

关闭服务

快捷键Ctrl+C

入口html引入以下文件

项目中引入对应的Normalize.css、Three.r112.js、TweenLite.js等css和js文件。

Normalize.css

Normalize.css 只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及许许多多其他的框架，工具和网站上。

Three.js

Threejs 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

Threejs 是一个让用户通过javascript入手进入搭建webgl项目的类库。众所周知学习webgl需要图形学知识，而webgl需要通过js和glsl两种语言。如果我们不通过threejs使用webgl势必逃不过底层知识:你必须全面了解着色器语法和自己编写顶点着色片元着色；但你使用了threejs显然可以便捷的逃过这些难懂的底层，对于传统js从业人员挑战的shader确实是有难度的。

快速上手threejs需要什么基础？

对于3D美术知识的了解
对于Javascript的能力以及OOP程序开发能力，游戏开发能力

TweenLite.js

TweenLite 是一个非常快速、轻量级和灵活的动画工具，它是GreenSock动画平台(GSAP)的基础。TweenLite实例处理随时间推移对任何对象(或对象数组)的一个或多个属性进行渐变。TweenLite可以用最小的文件大小来完成大部分的动画任务，或者它可以与先进的排序工具(如TimelineLite或TimelineMax)一起使用，使复杂的任务变得更简单。

如需了解更多详情请移步到对应的官网，以上样式库和JS库都有提供官网地址。小编只是了解，这里就不班门弄斧了。

主页index.html代码如下：

<!DOCTYPE html>
<html class="no-js wf-loading is-en" lang="en">
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  <meta name="theme-color" content="#0c0720" /> 
  <meta name="msapplication-TileColor" content="#da532c" /> 
  <meta name="theme-color" content="#ffffff" />
  <link rel=icon href=/favicon.ico> 
  <title>JackChen个人官网</title> 
  <meta name="description" content="blog is a real-time, development focussed, creative studio." /> 
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no" /> 
  <script> 
    // 判断手机端或PC端
    var ua = (navigator.userAgent || navigator.vendor || window.opera).toLowerCase();
    document.documentElement.className += /(iPad|iPhone|Android)/i.test(ua) ? ' is-mobile' : ' is-desktop';
    document.documentElement.className = document.documentElement.className.replace('no-js','js');
    var supportedLangs = ['en', 'cn'];
    var lang = 'en'; 
  </script> 
  <link rel="stylesheet" href="/assets/css/index.css" /> 
 </head> 
 <body> 
  <canvas id="canvas"></canvas> 
  <div id="app"> 
   <div id="main" data-scroll-tooltip="Scroll to begin"> 
    <div id="main-scroll"> 
     <div id="page-container">

最低0.47元/天解锁文章