В тази статия ще ви разкажа за това как напълно надстроих портфолиото си с помощта на JavaScript Static Generator, наречен Gatsby.js и няколко други библиотеки. Ако обмисляте да направите уебсайт, захранван от невероятния React.js, но все пак искате скоростта на светкавичен удар, определено трябва да обмислите използването на Gatsby.js. Самият този блог е изграден върху Гетсби.
Моето портфолио: Щракнете тук.
Изходен код за портфолио: Щракнете тук
Тази статия не е наистина техническа, не включва много код.
Защо исках да надстроя уебсайта си с портфолио.
Имаше няколко причини, поради които исках да променя и преработя уебсайта си с лично портфолио:
- Скорост: Времето за зареждане и производителността на уебсайта ми беше невероятно, болезнено, напълно мизерно. Зареждането на съдържанието отне векове. (Можете да видите от горното изображение..)
- Дизайн: Целевата ми страница беше просто твърде тъмна и изобразяваше негативен образ за мен (нямам представа защо реших, че изглежда добре)
- Отзивчивост: Моят уебсайт беше някак отзивчив, но не на 100%. Изглеждаше доста добре на Firefox Desktop/Mobile, Google Chrome Desktop/Mobile, но беше повреден в Safari.
Уебсайтът ми с лично портфолио беше първият Front End проект, който предприех, използвайки само HTML/CSS/Javascript. Може би това беше причината да не беше толкова добър, колкото другите уебсайтове за портфолио в мрежата. Целта беше: Увеличете скоростта и подобрете дизайна.
Gatsby.js — Безспорно най-добрата и любима технология за използване.
За първи път попаднах на Gatsby.js преди два месеца, когато исках да започна собствен блог. Търсейки каква технология използват хората, за да създадат блог, попаднах на статии, говорещи за React.js и Gatsby.js. Тъй като имах няколко проекта с React, се чувствах доста удобно да използвам технологията, но Гетсби беше напълно нова за мен. Всъщност не бях напълно запознат с концепцията за статични генератори на сайтове. Но реших да го пробвам, тъй като за мен беше ваканционно време и нямах нищо по-добро за правене.
Работейки върху моя блог и портфолиото, се влюбих ДЪЛБОКО в Gatsby.js. Напълно ме спечели. Нека споделя няколко причини защо.
1. Осъществено от React.js/GraphQL/Webpack.
Една от основните причини, поради които бях напълно купен, беше фактът, че се захранва от React.js. Обичам React, разработката, базирана на компоненти, управлението на състоянието и целия този джаз. Гетсби напълно включи React в техния стек, което го направи много по-лесно за мен да се развивам. Поздравления за Gatsby Link за това, че маршрутизирането на страниците става СУПЕР лесно.
GraphQL за мен беше вид технология „Чуван преди, никога не използван“. Отне ми време да науча основите на GraphQL от YouTube (Shoutout to Net Ninja за урока) и беше страхотно. Гъвкавостта за формиране на заявки от страна на клиента, без да се притеснявате за внедряването в бекенда, е наистина невероятна.
И накрая, Webpack. Имам любов и омраза към webpack. Обичам това, което прави за мен, но мразя да го конфигурирам. Gatsby се погрижи за конфигурацията вместо мен, която беше страхотна (сега правят как да ме накарат да я обичам).
2. Образ на Гетсби.
Когато за първи път правех моето портфолио, наистина се борех с това да направя изображенията си отзивчиви и мразех факта, че отнема толкова време за зареждане. Виждането на празното бяло пространство за изображението беше много обезпокоително. Отново Гетсби предоставя невероятно решение за това, което е Gatsby Image.
С прост низ за заявка на GraphQL като:
query ImageQuery {
allFile {
edges {
node {
childImageSharp {
fluid(maxWidth:2600) {
...GatsbyImageSharpFluid originalName
}
}
}
}
}
}ИТ ще генерира набор от изображения, който е НАПЪЛНО отзивчив и позволява ефект на мързеливо зареждане/размазване при зареждане на изображението. ЧУДЕСЕН. За мен беше удивително колко лесно беше да се създаде напълно отзивчиво изображение с ефекта на размазване. Изображението, върнато от тази заявка, може да се използва чрез изобразяване на обекта fluid с помощта на компонент Img, предоставен от Gatsby-Image:
<Img fluid={node.childImageSharp.fluid} />
И готово! Изображението може да бъде показано сега!
3. Gatsby Plugins.
Gatsby ни предоставя СТОТИЦИ плъгини, които да използваме, от Markdown Processors до плъгина на Google Analytics, каквото и да е, те най-вероятно ще го имат. Беше лесно да направим уебсайтовете интерактивни и мощни с помощта на добавките. Генериране на Sitemap за SEO цели, Robots.txt, използване на google шрифтове и анализи, всичко беше супер лесно с предоставените от тях добавки.
4. Хостинг в Netlify.
Gatsby компилира ВСИЧКИ ваши CSS и JS файлове в папка public като статична страница. Тъй като вашето уеб приложение технически е статична страница, хостването вече е доста лесно, можете да изберете да хоствате навсякъде. Предишната ми версия на портфолиото беше хоствана на Github Pages, но реших да взема Netlify като опция.
С Netlify, хостването на вашия базиран на Гетсби уебсайт е повече от лесно. Самото им безплатно ниво, което използвам в момента, беше невероятно. Свързвайки се с вашето GitHub хранилище, бяха необходими само няколко щраквания, за да разположите уебсайта. Той също така осигурява непрекъснато внедряване (невероятно) чрез автоматично изграждане от най-новия ангажимент към Github Repository и обслужване на новите статични страници от това изграждане. Отне само няколко щраквания и много проста конфигурация, за да се постигне това.
Резултатите.
Както можете да видите от изображението по-горе, резултатите бяха страхотни. Светкавична скорост, изображения с мързеливо зареждане и добър SEO резултат.
Разбира се, беше необходимо нещо повече от Гетсби, за да изглежда уебсайтът по-добре. React-Reveal и React-Spring бяха широко използвани за създаване на анимации на уебсайта. Определено добави малко пикантност към него. „Materialize CSS“ също е нещо, което използвах на моя уебсайт, за да ми помогне лесно да се справя с отзивчивостта на уебсайта. Ако не бяха всички тези технологии, моят уебсайт нямаше да изглежда толкова близо до сегашния.
Определено беше забавно изживяване да използвам Gatsby.js и определено бих го използвал за следващия си проект. Чрез възстановяването на уебсайта си с помощта на Gatsby успях да науча нова технология (Очевидно), да практикувам уменията си за React.js, най-накрая да науча GraphQL и също така взех още няколко библиотеки по пътя. Също така, научаването как да използвате Netlify, тяхното правило за пренасочване, непрекъснато внедряване, беше страхотно изживяване.
Ако някой иска да направи уебсайт, разгледайте Gatsby.js. Наистина е невероятно.
Прочетете повече на learnwars.com!
Първоначално публикувано в learnwars.com.
