Links
This is a website to share the main links that point to my Internet presence. You can check it at https://links.jorgesanz.net/.
If you have any feedback or comment, feel free to create an issue or use my contact form. Have a great day!
Details
Technically, this is a minimal website hosted on Netlify and using Parcel for zero configuration deployment. Check the package.json file for details.
The site publishing is composed of three steps:
- First the data with texts and links is joined with a Handlebars template producing a
index.htmlthat does not need any JavaScript code to render. - Second the final stylesheet is created from the rendered HTML and the Tachyons source only with the necessary CSS classes.
- Finally Parcel produces a
distfolder with all the needed assets: minified HTML and CSS, images, etc.
The dist folder can be hosted anywhere, I use Netlify to run the publishing process and hosting but you can use Github Pages, Vercel, or any other PaaS. You can check an example of publishing in Github Pages using a Github Action on the LinksGeo clone.
The structure of the data.json file is straight forward:
- The
metadatasection populates the website<head>element. textsjust set up the header and footer, html is allowed- The
linksarray defines the buttons to show. - On each link there are two ways to specify the icon you want to see on the website:
icon-simpleiconsrefers to a SimpleIcons identifier. Check the website for the brands available or thenode_modules/simple-icons/iconsfolder.icon-fontawesomerefers to a free Font Awesome icon. Check thenode_modules/@fortawesome/fontawesome-free/svgs/folder and use the relative path without the.svgextension for examplesolid/microphone.
The layout of the website is simple and only using Tachyons classes so changing fonts, colors, borders, etc. is just a matter of editing the index.hbs file (uncomment the full Tachyons CSS while developing).