前言

那些優秀的程序猿，特別是大佬級別的開發者，都會有本身的我的博客網站。曾經有個老鐵跟我說，一個程序猿愛好者沒有屬於本身的博客，還不算真正進入咱們這個行當，用球迷的話來講，就是僞球迷。此言差矣，其實每一個人的追求不同。也多是精力有限爲了生計，不過藉助一些知名的社交平臺（掘金、思否、CSDN、博客園、簡書、知乎、公衆號）也是不錯的選擇。但小編仍是但願小夥伴們能抽出一點點時間，擼一個出來。爲何要弄我的博客？javascript

爲何要弄我的博客？

創建知識體系

寫博客，能夠將你學的七零八碎的知識點整合到一塊兒，造成完整的我的筆記。這份筆記，記錄了你囫圇吞棗的內容，也記錄了你從理論到實踐的歷程。若是有一天，你想回顧這些知識點，對照着曾經記錄的筆記，會起到事半功倍的效果。css

那麼光是記錄筆記就能夠了麼？html

你還要把筆記分享出來，由於有人監督與無人監督的效果截然不同。若是是本身私下的筆記，可能不禁自主地會鬆上一口氣，每每作着作着就半途而廢以致於前功盡棄。就比如你能夠肆無忌憚在本身的房間裏自言自語，然而發佈朋友圈的時候卻每每謹小慎微，由於不是隻有你一我的能夠看到這些內容。你知道你的文章會被別人閱讀，天然要打起十二分精神盡心盡力，但願得到別人的承認。態度決定成敗，在別人「眼皮底下」寫做，更能拿出認真的精神氣兒。前端

若是以爲本身已經掌握某個知識點的時候，不妨寫一篇文章，若是能讓大部分讀者讀懂，說明這個知識點你掌握得還不錯。除此以外，讀者的點贊👍或評論，也是鼓勵你查漏補缺的突破口。java

總之，這些文章會成爲你珍貴的我的財富。:muscle:node

養成寫做習慣

人每每是懶惰的，除非明天就會失業，否則很難會在今天狠狠逼本身一把。ios

寫我的博客的好處就在於：你老是緊繃着一根弦，不斷提醒本身，這個月還有一篇博客要寫，不能讓讀者們等急了。有壓力，纔有動力，不至於渾渾噩噩度日。nginx

提高我的品牌

堅持寫博客，你的影響力便不知不覺地滲透出去，「酒香也怕巷子深」，現代社會毫不能孤芳自賞。才華轉化爲影響力的那一瞬間，纔是你的價值所在。git

你的影響力越大，身邊的機會就越多。你的我的品牌，是你最好的「護城河」。github

快樂寫做

寫我的博客其實也是一件蠻快樂的事，一天之中可貴的放鬆機會，得以反思工做的得失。特別是將寫好的文章分享出去，自豪感油然而生。

讀者也能夠從中汲取營養，互惠互利，豈不樂乎？😋

迴歸主題

接下來實戰分享，因爲參考了一些官網的示例，以爲很不錯，本身就簡單的研究了一下，動手弄着玩玩。純手工打造酷炫我的博客網站，適配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">
      <main id="about" class="page is-about" data-id="about" data-page-id="about" data-url="about" data-title="JackChen我的官網"> 

       <section id="about-hero" class="hero is-full"> 
        <div id="about-hero-context" class="hero-context flex-vertical"> 
         <div class="hero-inner"> 
          <h1 id="about-hero-title" class="hero-title flex-vertical">Hello, I am JackChen</h1> 
          <h4 id="about-hero-desc" class="hero-desc flex-vertical">認真作好每個細節，用心寫好每一段代碼</h4> 
         </div> 
        </div> 
       </section> 

       <section id="about-blog" class="is-full margin-bottom-full"> 
        <div id="about-blog-context" class="sec-context flex-vertical"> 
         <div class="sec-context-inner is-right darker-bg"> 
          <h3 id="about-blog-title" class="about-sec-title font-header"></h3> 
          <h4 id="about-blog-subtitle" class="about-sec-subtitle font-header">我的信息</h4> 
          <div id="about-blog-desc" class="about-sec-desc">
            我是<b>「JackChen」</b>，很幸運成爲80後，座標湖南省長沙縣，一名很是熱愛學習的<b>「高級前端開發工程師」</b>。有着不平凡的工做經歷，讓我對本身的人生方向更加堅決，由於本身的興趣而踏足前端，是一件讓我畢生難忘的事情。
            <br />
            <br />
            <b>「學習和寫做」</b>是目前惟一天天都能堅持完成的事情，業餘時間的我，喜歡寫做和分享。我運營着本身的公衆號<b>「懶人碼農」</b>和有着一羣喜歡閱讀我文章的讀者，天天最大的快樂就是能和各位同窗一塊兒交流學習一塊兒共同進步。
          </div> 
         </div> 
        </div> 
       </section> 

       <section id="about-services" class="is-full"> 
        <div id="about-services-context" class="sec-context flex-vertical"> 
         <div class="sec-context-inner is-right darker-bg"> 
          <h3 id="about-services-title" class="about-sec-subtitle font-header">自我評價</h3> 
          <h4 id="about-services-subtitle" class="about-sec-title">1. 熱愛學習，工做認真，心思細膩，樂於溝通，服從安排。<br>2. 有輕微代碼潔癖，追求編碼細節和代碼規範，認真寫好每一行代碼。<br>3. 擁有紮實的前端基礎，擅長基於JavaScript開發各類Web應用和Node應用。<br>4. 幾年工做都在電商、汽車、文娛、區塊鏈等行業的大中廠，對大中公司的產品開發流程有必定的瞭解。</h4> 
          <div id="about-services-items"> 
           <div class="about-services-item"> 
            <div class="about-services-item-title font-bold">發現</div> 
            <ul class="about-services-subitems nav"> 
             <li class="about-services-subitem">我的能力</li> 
             <li class="about-services-subitem">團隊精神</li> 
             <li class="about-services-subitem">目標管理</li> 
            </ul>
           </div> 
           <div class="about-services-item"> 
            <div class="about-services-item-title font-bold">標籤</div> 
            <ul class="about-services-subitems nav"> 
             <li class="about-services-subitem">執行力</li> 
             <li class="about-services-subitem">責任心</li> 
             <li class="about-services-subitem">自驅動</li>
            </ul>
           </div> 
           <div class="about-services-item"> 
            <div class="about-services-item-title font-bold">愛好</div> 
            <ul class="about-services-subitems nav"> 
             <li class="about-services-subitem">學習</li> 
             <li class="about-services-subitem">閱讀</li> 
             <li class="about-services-subitem">寫做</li> 
            </ul>
           </div> 
          </div> 
         </div> 
        </div>
       </section> 
       
       <div class="is-full"></div> 
      </main>
     </div> 

     <div id="featured"> 
      <div id="featured-context" class="sec-context"> 
       <div class="sec-context-inner"> 
        <h3 id="featured-title" class="sec-title font-header">精選文章</h3> 
        <div id="featured-desc" class="sec-desc font-bold">「懶人碼農」公衆號做者，實戰開發者，支持文章投稿及相互開白名單。一切技術問題，都要服從產品交付和市場反饋。</div> 
       </div> 
       <div id="featured-items-container"> 

        <div class="featured-item" data-id="img-1"> 
          <a class="featured-item-link" href="https://juejin.cn/post/6844904198551666701"> 
            <div class="featured-item-image">
              <div class="featured-item-image-inner"></div>
            </div> 
            <div class="featured-item-context is-white-content" data-base-color="#00f"> 
             <div class="featured-item-desc font-header-bold split-line-mask-effect">NodeJS全棧開發一個功能完善的Express項目（附完整源碼）</div> 
             <div class="featured-item-client split-line-mask-effect">NodeJS全棧入門</div> 
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8">
              <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" />
             </svg> 
            </div> 
          </a> 
        </div>

        <div class="featured-item" data-id="img-2"> 
          <a class="featured-item-link" href="https://juejin.cn/post/6845166890449371149"> 
            <div class="featured-item-image">
             <div class="featured-item-image-inner"></div>
            </div> 
            <div class="featured-item-context is-white-content" data-base-color="#00f"> 
             <div class="featured-item-desc font-header-bold split-line-mask-effect">Vue+Echarts構建大數據可視化酷炫展現公司品牌實戰項目分享（附源碼）</div> 
             <div class="featured-item-client split-line-mask-effect">大數據可視化平臺</div> 
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8">
              <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" />
             </svg> 
            </div> 
          </a> 
        </div>

        <div class="featured-item" data-id="img-3"> 
          <a class="featured-item-link" href="https://juejin.cn/post/6847902217371205640"> 
            <div class="featured-item-image">
             <div class="featured-item-image-inner"></div>
            </div> 
            <div class="featured-item-context is-white-content" data-base-color="#00f"> 
             <div class="featured-item-desc font-header-bold split-line-mask-effect">開發一款微信小程序的個性簡歷，能打開大廠之門並得到門票？（附源碼）</div> 
             <div class="featured-item-client split-line-mask-effect">微信小程序</div> 
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8">
              <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" />
             </svg> 
            </div> 
          </a> 
        </div>

        <div class="featured-item" data-id="img-4"> 
          <a class="featured-item-link" href="https://juejin.cn/post/6844904202167123982"> 
            <div class="featured-item-image">
             <div class="featured-item-image-inner"></div>
            </div> 
            <div class="featured-item-context is-white-content" data-base-color="#00f"> 
             <div class="featured-item-desc font-header-bold split-line-mask-effect">2020值得收藏與學習280多款H5小遊戲，從入門到完全瞭解它（附源碼）</div> 
             <div class="featured-item-client split-line-mask-effect">H5小遊戲</div> 
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8">
              <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" />
             </svg> 
            </div> 
          </a> 
        </div> 

        <div class="featured-item" data-id="img-5"> 
          <a class="featured-item-link" href="https://juejin.cn/post/6847902224073523208"> 
            <div class="featured-item-image">
             <div class="featured-item-image-inner"></div>
            </div> 
            <div class="featured-item-context is-white-content" data-base-color="#00f"> 
             <div class="featured-item-desc font-header-bold split-line-mask-effect">Vue+Express+Webpack自建腳手架完善單頁面應用，檔次瞬間提升（附完整源碼</div> 
             <div class="featured-item-client split-line-mask-effect">NodeJS全棧進階</div> 
             <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8">
              <polygon points="6.767 0.603 6.767 5.897 0.871 0 0 0.872 5.894 6.767 0.605 6.767 0.605 8 8 8 8 0.603 6.767 0.603" />
             </svg> 
            </div> 
          </a> 
        </div>

       </div> 
      </div> 
     </div> 

     <div id="contact"> 
      <div id="contact-main"> 
       <div id="contact-context" class="sec-context flex-vertical"> 
        <div class="sec-context-inner darker-bg is-left"> 
         <h4 id="contact-title">聯繫我😃</h4> 
         <div id="contact-desc">據說你在找我哦，👉明智的選擇👍</div> 
         <div id="contact-columns"> 
          <div class="contact-column"> 
           <div class="contact-column-title font-bold">聯絡</div> 
           <ul class="nav">
            <li class="contact-column-item">手機：13787081615</li>
            <li class="contact-column-item">郵箱：278910933@qq.com</li>
            <li class="contact-column-item">Q<span style="padding-left: 8px;"></span>Q：278910933</li>
            <li class="contact-column-item">微信：13787081615</li>
           </ul> 
          </div> 
          <div class="contact-column"> 
           <div class="contact-column-title font-bold">社交</div> 
           <ul class="nav">
            <li class="contact-column-item"><a href="https://github.com/jackchen0120" target="_blank" rel="noreferrer">Github</a></li>
            <li class="contact-column-item"><a href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/5/1731eb762d539047~tplv-t2oaga2asx-image.image" target="_blank" rel="noreferrer">公衆號</a></li>
            <li class="contact-column-item"><a href="https://juejin.cn/user/1714893872433928" target="_blank" rel="noreferrer">掘金</a></li>
            <li class="contact-column-item"><a href="https://blog.csdn.net/qq_15041931" target="_blank" rel="noreferrer">CSDN</a></li>
           </ul> 
          </div> 
         </div> 
         <div class="clear-fix"></div>
        </div> 
       </div> 
      </div> 

      <footer id="contact-footer"> 
       <div id="contact-footer-copyright" class="font-subheader">
        &copy; 2020-2025 微信公衆號@懶人碼農 All Rights Reserved.
       </div> 
      </footer> 
     </div> 
    </div> 
   </div> 

   <div id="main-scrollbar">
    <div id="main-scrollbar-indicator"></div>
   </div>

   <div id="menu"> 
    <canvas id="menu-canvas"></canvas> 
    <div id="menu-content" class="flex-vertical"> 
     <ul id="menu-menu" class="nav">  
      <li class="menu-menu-item is-about"><a href="/about">關於我</a></li> 
      <li class="menu-menu-item is-blog"><a href="/blog">技術博客</a></li> 
      <li class="menu-menu-item is-contact"><a href="/contact">聯繫我</a></li> 
     </ul> 
     <div id="menu-lang-selector"></div> 
    </div> 
   </div> 

   <header id="header" class="font-subheader cache"> 
    <div id="header-content"> 
     <a aria-label="homepage" href="/about" id="header-logo">JackChen</a> 
     <ul id="header-menu" class="nav"> 
      <li class="header-menu-item header-item is-contact">
        <a aria-label="contact" href="/contact">
          <div class="header-menu-item-mask">聯繫我</div>
        </a>
      </li> 
      <li class="header-menu-item header-item is-blog">
        <a aria-label="blog" href="/blog">
          <div class="header-menu-item-mask">技術博客</div>
        </a>
      </li> 
      <li class="header-menu-item header-item is-about">
        <a aria-label="about" href="/about">
          <div class="header-menu-item-mask">關於我</div>
        </a>
      </li>
     </ul> 
    </div> 
    <div id="header-menu-btn"></div> 
   </header> 

   <div id="main-scroll-indicator"> 
    <div id="main-scroll-indicator-text">滾動查看更多</div> 
    <div id="main-scroll-indicator-arrow-container">
     <svg xmlns="http://www.w3.org/2000/svg" width="5" height="40" viewbox="0 0 5 40">
      <title>智能矢量圖箭頭</title>
      <path d="M0,40V0H1V35H5Z" />
     </svg>
    </div> 
   </div>

  </div>

  <a id="snd-btn" class="cache"></a> 
  <div id="preloader" class="cache" data-gesture="Click anywhere to begin">
   <canvas id="preloader-canvas"></canvas>
  </div> 
  <div id="not-support" class="cache">
   We are sorry to inform you that your browser is not compatible with our website.
   <br />
   <br />Please do consider upgrading your browser.
  </div> 
  <div id="cursor-follow" class="font-bold"></div>

  <script src="/assets/js/TweenLite.js"></script> 
  <script src="/assets/js/three.r112.js"></script> 
  <script src="/assets/js/index.js"></script>   
 </body>
</html>
複製代碼

線上部署&優化

PM2 - Node 進程管理

PM2 是 Node 進程管理工具，能夠利用它來簡化不少 Node 應用管理的繁瑣任務，如性能監控、自動重啓、負載均衡等，並且使用很是簡單。

下面就對 PM2 進行入門性的介紹，基本涵蓋了 PM2 的經常使用功能和配置：

全局安裝PM2：npm i pm2 -g
監聽應用：pm2 start index.js
查看全部進程：pm2 list
查看某個進程：pm2 describe name/id
中止某個進程：pm2 stop name/id
中止全部進程：pm2 stop all
重啓某個進程：pm2 restart name/id
刪除某個進程：pm2 delete name/id

配置文件信息以下：

module.exports = {
  apps : [{
    name: 'node_blog',
    script: 'app.js',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'development'
    },
    env_production: {
      NODE_ENV: 'production'
    }
  }],
};
複製代碼

這裏做者就不詳細介紹 pm2，如需瞭解更多請移步到PM2實用入門指南 | 博客園 - 程序猿小卡。

Nginx

Nginx基本是上線必備，這裏就很少說了，開啓Gzip效果確實很顯著，css和js文件能夠壓縮到70%-80%，簡直帥呆了！😆

開啓Gzip配置Nginx找到目錄文件：

cd /etc/nginx/nginx.conf
複製代碼

gzip on;
gzip_disable "msie6";
gzip_min_length 20;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/javascript text/xml application/xml+rss;
gzip_types font/ttf font/otf image/svg+xml;
複製代碼

寫在最後

小編就分享到這，文章若有不妥之處，歡迎批評指正。若是以爲不錯，就請點個👍和❤️收藏，您們的點贊是小編繼續創做的動力。

最後，關於寫做我的博客這件事，要麼去作，要麼不作，不要嘗試。抱着試一試的心情，每每容易半途而廢。拿出認真的態度，腳踏實地。哪怕一開始無從下手也罷，哪怕本身是初學者也罷，敢於分享本身的經驗與學習歷程，自己就是一件值得讚許的事。😃

推薦相關優質文章閱讀

歡迎關注做者公衆號：懶人碼農

NodeJS+3D酷炫動畫玩轉純手工打造我的博客，不用博客框架

前言

爲何要弄我的博客？

創建知識體系

養成寫做習慣

提高我的品牌

快樂寫做

迴歸主題

部分截圖

目錄結構

技術棧

功能模塊

代碼實現

準備工做

代碼實現

生成package.json文件

安裝nodemon & express

根目錄新建app.js文件

http-server構建本地服務替代Express

入口html引入如下文件

線上部署&優化

PM2 - Node 進程管理

Nginx

寫在最後