前言
那些优秀的程序猿,特别是大佬级别的开发者,都会有自己的个人博客网站。曾经有个老铁跟我说,一个程序猿爱好者没有属于自己的博客,还不算真正进入我们这个行当,用球迷的话来说,就是伪球迷。此言差矣,其实每个人的追求不一样。也可能是精力有限为了生计,不过借助一些知名的社交平台(
掘金、思否、CSDN、博客园、简书、知乎、公众号
)也是不错的选择。但小编还是希望小伙伴们能抽出一点点时间,撸一个出来。为什么要弄个人博客?
为什么要弄个人博客?
建立知识体系
写博客,可以将你学的七零八碎的知识点整合到一起,形成完整的个人笔记。这份笔记,记录了你囫囵吞枣的内容,也记录了你从理论到实践的历程。如果有一天,你想回顾这些知识点,对照着曾经记录的笔记,会起到事半功倍的效果。
那么光是记录笔记就可以了么?
你还要把笔记分享出来,因为有人监督与无人监督的效果大相径庭。如果是自己私下的笔记,可能不由自主地会松上一口气,往往做着做着就半途而废以至于前功尽弃。就好比你可以肆无忌惮在自己的房间里自言自语,然而发布朋友圈的时候却往往谨小慎微,因为不是只有你一个人可以看到这些内容。你知道你的文章会被别人阅读,自然要打起十二分精神全力以赴,希望获得别人的认可。态度决定成败,在别人“眼皮底下”写作,更能拿出认真的精神气儿。
如果觉得自己已经掌握某个知识点的时候,不妨写一篇文章,如果能让大部分读者读懂,说明这个知识点你掌握得还不错。除此之外,读者的点赞👍或评论,也是鼓励你查漏补缺的突破口。
总之,这些文章会成为你珍贵的个人财富。💪
养成写作习惯
人往往是懒惰的,除非明天就会失业,不然很难会在今天狠狠逼自己一把。
写个人博客的好处就在于:你总是紧绷着一根弦,不断提醒自己,这个月还有一篇博客要写,不能让读者们等急了。有压力,才有动力,不至于浑浑噩噩度日。
提升个人品牌
坚持写博客,你的影响力便不知不觉地渗透出去,“酒香也怕巷子深”,现代社会绝不能孤芳自赏。才华转化为影响力的那一瞬间,才是你的价值所在。
你的影响力越大,身边的机会就越多。你的个人品牌,是你最好的“护城河”。
快乐写作
写个人博客其实也是一件蛮快乐的事,一天之中难得的放松机会,得以反思工作的得失。特别是将写好的文章分享出去,自豪感油然而生。
读者也可以从中汲取养分,互惠互利,岂不乐乎?😋
回归主题
接下来实战分享,由于参考了一些官网的示例,觉得很不错,自己就简单的研究了一下,动手弄着玩玩。纯手工打造酷炫个人博客网站,适配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">