Check your development environment! You'll need Node.js, the Gatsby CLI, node-gyp and gh-pages installed.
gatsby develop
yarn run deploy
- React Spring (Used for Parallax effect)
- TailwindCSS & styled-components for styling
- Use the full power of TailwindCSS while generating small styles (as unused data gets deleted)
- Uses
tailwind.macro(Babel macro) to have hot-reloading of Tailwind styles
- SEO
- Schema.org JSONLD
- OpenGraph Tags
- Twitter Tags
- Typefaces for quicker font loading
- Offline Support
- WebApp Manifest Support
- Responsive images
- The right image size for every screen size
- Traced SVG Loading (Lazy-Loading)
- WebP Support
Please note: The parallax effect can be quite heavy for some older CPUs and the site uses some newer CSS features which will result in incompatibility with older browsers.
You can add other features by having a look at the official plugins page.
npm run build
Copy the content of the public folder to your webhost or use a website like Netlify which automates that for you.
You have multiple options to configure this project.
- Use the
config/website.jsto configure data passed to the SEO component and other parts of the Gatsby site:
module.exports = {
pathPrefix: '/', // Prefix for all links. If you deploy your site to example.com/portfolio your pathPrefix should be "/portfolio"
siteTitle: 'MeUndies EDP Blog', // Navigation and Site Title
siteTitleAlt: 'EDP Blog', // Alternative Site title for SEO
siteTitleShort: 'MeUndies EDP Blog', // short_name for manifest
siteHeadline: 'Look sharp, live smart.', // Headline for schema.org JSONLD
siteUrl: 'blog.meundies.dev', // Domain of your site. No trailing slash!
siteLanguage: 'en', // Language Tag on <html> element
siteLogo: '/logo.png', // Used for SEO and manifest
siteDescription: 'All the fun of engineering at MeUndies',
author: 'MeUndies', // Author for schema.org JSONLD
// Manifest and Progress color
themeColor: tailwind.colors.orange,
backgroundColor: tailwind.colors.blue,
}-
Use the
tailwind.jsfile to configure TailwindCSS. Their documentation explains it step-by-step. -
Modify the files in the
src/stylesdirectory. -
Modify the sections in the
src/viewsdirectory. They contain the Dividers & SVG icons. -
You can also place the icons somewhere else on the page, modify their animation and hide them on smaller screens:
<SVG icon="triangle" hideMobile width={48} stroke={colors.orange} left="10%" top="20%" />
<SVG icon="hexa" width={48} stroke={colors.red} left="60%" top="70%" />
<SVG icon="box" width={6} fill={colors['grey-darker']} left="60%" top="15%" />- For
icon, you have the options:triangle, circle, arrowUp, upDown, box, hexa, cross - If you want the SVG to be hidden on mobile view, add
hideMobileto the SVG component - You can define the width via the TailwindCSS width option
- The colors get defined via the TailwindCSS color option
- Please note that you will either have to define the color in
strokeorfilldepending on the icon. For reference, have a look at the currently used SVGs
- Please note that you will either have to define the color in
- The options
leftandtopposition the icon relatively to its parent container - You can also wrap the SVGs with
<UpDown />or<UpDownWide />to animate them
Instead of relying on Google's CDN to host its fonts, this site self-hosts the fonts and therefore benefits from increased performance. The installed fonts can be found in src/components/Layout.jsx:
import 'typeface-cantata-one';
import 'typeface-open-sans';This starter uses typefaces by Kyle Mathews. Have a look at the repository if you want to install & use other fonts.
You'll also need to configure fonts in tailwind.js to reflect the changes. You then can use the fonts with font-sans and font-serif.