предисловие
Эти превосходные программисты, особенно крупные разработчики, будут иметь свои личные блоги. Один старый утюг мне как-то сказал, что у программиста-энтузиаста нет своего блога, и он не особо вникает в наше дело.По словам фанатов, он псевдофанат. Это не очень хорошее утверждение, на самом деле, стремление у всех разное. Это также может быть из-за ограниченной энергии, чтобы зарабатывать на жизнь, но с помощью некоторых известных социальных платформ (
掘金、思否、CSDN、博客园、简书、知乎、公众号) тоже хороший выбор. Но редактор все еще надеется, что мои друзья смогут не торопиться и выпустить одну из них. Зачем вести личный блог?
Зачем вести личный блог?
Создайте свод знаний
Ведя блог, вы можете интегрировать полученные знания в полноценную личную заметку. В этой заметке записан контент, который вы проглотили целиком, а также ваш переход от теории к практике. Если однажды вы захотите просмотреть эти точки знаний и сравнить записанные вами заметки, это будет иметь эффект умножения.
Достаточно ли просто делать заметки?
Вы также захотите поделиться своими заметками, потому что контролируемые и неповторимые результаты очень разные. Если это ваши собственные личные ноты, вы можете невольно вздохнуть с облегчением. Как будто вы можете поговорить с собой в собственной комнате, но вы склонны быть осторожны при публикации на своих моментах, потому что вы не единственный, кто может видеть контент. Вы знаете, что ваша статья будет прочитана другими, поэтому, естественно, вы должны сделать все возможное, и надеюсь получить признание от других. Отношение определяет успех или неудачу. Написание «под глазами» других могут показать серьезный дух.
Если вы чувствуете, что усвоили какой-то элемент знаний, вы можете написать статью, если она понятна большинству читателей, значит, вы достаточно хорошо усвоили этот элемент знаний. Кроме того, читательские лайки 👍 или комментарии также являются прорывом, побуждающим вас проверять и заполнять пробелы.
Короче говоря, эти статьи станут вашим драгоценным личным сокровищем. :мышца:
развивать навыки письма
Люди часто ленивы, и если завтра они не окажутся безработными, сегодня трудно заставить себя изо всех сил.
Прелесть ведения личного блога заключается в следующем: вы всегда натягиваете нить, постоянно напоминая себе, что вам нужно написать еще один блог в этом месяце, так что вы не можете заставить своих читателей ждать. Есть давление, есть мотивация, и дни не проведешь в спешке.
раскрутить личный бренд
Если вы настаиваете на ведении блога, ваше влияние будет бессознательно проникать. «Аромат вина также боится глубоких переулков». В современном обществе мы не должны быть самодостаточными. В тот момент, когда талант превращается во влияние, и заключается ваша ценность.
Чем больше у вас влияния, тем больше возможностей вокруг вас. Ваш личный бренд — ваш лучший «ров».
счастливое письмо
Ведение личного блога на самом деле очень приятное занятие, редкая возможность расслабиться в течение дня и поразмышлять о достижениях и потерях в работе. Особенно, когда я делюсь написанными статьями, я испытываю чувство гордости.
Читатели также могут черпать из него питательные вещества и получать пользу друг от друга. 😋
вернуться к теме
Далее я поделюсь реальным боем.Поскольку я ссылался на некоторые примеры на официальном сайте, я думаю, что это очень хорошо.Я просто изучаю его и играю с ним. Сделанный своими руками крутой личный блог-сайт, подходящий для ПК и мобильных устройств.
Демонстрационный адрес личного блога 👉: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
функциональный модуль
- Лучшая навигация Flip.
- 3D-анимация персонажей на первом экране
- Эффект параллакса прокрутки экрана
- Фоновая музыка
- Щелчок мышью по анимации персонажа на первом экране
- Анимация частиц столбца блога
- Свяжитесь со мной, колонна, динамический эффект челнока толпы
Код
Личный блог разделен на три рубрики: обо мне, технический блог, контакты.
Готов к работе
- система виндовс 10
- Скачайте и установите nodejs v10+nodejs.org/zh-cn/
- Инструменты редактора кода Sublime Text 3 и VS Code
Код
Создать файл package.json
npm init -y
Установите nodemon и экспресс
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-элементов по умолчанию в разных браузерах. Normalize.css — это современная, премиальная HTML5-готовая альтернатива традиционному сбросу CSS. Normalize.css теперь используется в Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и многих других фреймворках, инструментах и веб-сайтах.
- Three.js
ThreejsЭто 3D-движок, работающий в браузере, вы можете использовать его для создания различных 3D-сцен, включая камеры, источники света, материалы и другие объекты. Вы можете увидеть много отличных демонстраций на его домашней странице.
Threejs — это библиотека классов, которая позволяет пользователям создавать проекты webgl с помощью javascript. Как мы все знаем, изучение webgl требует знания графики, а webgl требует двух языков, js и glsl. Если мы не будем использовать webgl через threejs, мы неизбежно не сможем избежать базовых знаний: вы должны полностью понимать синтаксис шейдера и самостоятельно писать шейдеры фрагментов вершинного шейдера; но вы, очевидно, можете избежать этих сложных базовых слоев, используя threejs, для традиционные практики js Шейдер кадровой задачи действительно сложен.
Какая основа мне нужна, чтобы быстро начать работу с threejs?
- Знание 3D искусства
- Для способности Javascript и способности разработки программ ООП, способности разработки игр
- 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">
© 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 — Управление процессами узла
PM2Это инструмент управления процессами Node, который можно использовать для упрощения многих утомительных задач управления приложениями Node, таких как мониторинг производительности, автоматический перезапуск, балансировка нагрузки и т. д., и он очень прост в использовании.
Ниже приводится вводное введение в PM2, которое в основном охватывает общие функции и конфигурации PM2:
- Установите PM2 глобально: npm i pm2 -g
- Приложение для мониторинга: pm2 start index.js
- Просмотреть все процессы: список pm2
- Просмотр процесса: pm2 описать имя/идентификатор
- Остановить процесс: pm2 имя/идентификатор остановки
- Остановить все процессы: pm2 остановить все
- Перезапустить процесс: имя/идентификатор перезапуска pm2
- Чтобы удалить процесс: pm2 удалить имя/идентификатор
Информация о конфигурационном файле выглядит следующим образом:
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 для начинающих | Блог Garden - Programmer Xiaoka.
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;
напиши в конце
Редактор поделится этим.Если в статье что-то не так, пожалуйста, покритикуйте и исправьте. Если вы считаете, что это хорошо, пожалуйста, нажмите 👍 и ❤️, чтобы собрать, ваша похвала является движущей силой для редактора, чтобы продолжать творить.
В конце концов, когда дело доходит до ведения личного блога, делайте это или не делайте, не пытайтесь. Сохраняя настроение попробовать, часто легко сдаться на полпути. Займите серьезный настрой и держите ноги на земле. Даже если вы не знаете, как начать с самого начала, даже если вы новичок, похвально иметь смелость поделиться своим опытом и процессом обучения. 😃
Рекомендовать релевантные качественные статьи для чтения
- Разработайте персонализированное резюме апплета WeChat, сможете ли вы открыть дверь на большую фабрику и получить билеты? (с исходным кодом)
- Vue+Echarts создает визуализацию больших данных, классное отображение бренда компании, совместное использование практических проектов (с исходным кодом)
- Внешний интерфейс должен знать, что это будет путь роста полного стека MySQL — NodeJS.
- 2020 год стоит того, чтобы собрать и изучить более 280 игр H5, от начала до досконального понимания (код вложения)
Добро пожаловать в публичный аккаунт автора: lazy code farmer