1⃣ The stack:
I wanted my website to be as fast and snappy as possible.
Which is why this website is 100% Jamstack. The code, posts, assets are all stored in a repository on Github - github.com/savvasStephani….
...and the website itself is made with Gatsby.
I wanted my website to be as fast and snappy as possible.
Which is why this website is 100% Jamstack. The code, posts, assets are all stored in a repository on Github - github.com/savvasStephani….
...and the website itself is made with Gatsby.
2⃣ Hosting
For my website, I wanted for the builds to execute immediately after pushing new changes.
The Markdown blog files, the assets (images, videos), JS files, styling etc are all hosted on Github.
The end result from building the website is hosted and managed on Netlify.
For my website, I wanted for the builds to execute immediately after pushing new changes.
The Markdown blog files, the assets (images, videos), JS files, styling etc are all hosted on Github.
The end result from building the website is hosted and managed on Netlify.
3⃣ Fonts
I chose Pacifico for the top "Savvas" logo
I chose Merriweather Sans for top level headings of blog posts
And finally Merriweather for the rest of the text.
I chose Pacifico for the top "Savvas" logo
I chose Merriweather Sans for top level headings of blog posts
And finally Merriweather for the rest of the text.
4⃣ Colour scheme
I used this colour pallet I found from ColorHunt. This is a colour scheme I am slightly obsessed with lately:
colorhunt.co/palette/189745
which I like to refer to as "Neon colour scheme".
I used this colour pallet I found from ColorHunt. This is a colour scheme I am slightly obsessed with lately:
colorhunt.co/palette/189745
which I like to refer to as "Neon colour scheme".
5⃣ Markdown to HTML Converter
To convert my Markdown files to HTML while building I used the ShowdownJS package from NPM.
showdownjs.com
Super easy to use!
To convert my Markdown files to HTML while building I used the ShowdownJS package from NPM.
showdownjs.com
Super easy to use!
6⃣ Code highlighter
Another amazing NPM package is HighlightJS which turns your code into an amazing coloured codeblock.
highlightjs.org
Another amazing NPM package is HighlightJS which turns your code into an amazing coloured codeblock.
highlightjs.org
7⃣ Document head manager
I used React Helmet to manage my <head> tags in Gatsby (mainly the <title> tag).
github.com/nfl/react-helm…
Great library and works seamlessly with React or Gatsby.
I used React Helmet to manage my <head> tags in Gatsby (mainly the <title> tag).
github.com/nfl/react-helm…
Great library and works seamlessly with React or Gatsby.
Thank you for reading. What questions do you have about the way I built savvas.me? Let me know!
• • •
Missing some Tweet in this thread? You can try to
force a refresh
