This is not a personal website, but a template or guide for anyone wants to build an easily customizable static website using the Jamstack architecture.
"The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before" - (Jamstack, 2021)
This is based on my implementation of the tech stack and is not the only way or technologies. I hope this can provide some help on your project.
- The following project template provides free hosting and CMS through Netlify.
- publish_mode has been set to editorial_workflow, this allows to save drafts and provide preview deploy links.
- SEO has been integrated with user customizability.
- Site optimized for mobile devices.
- All content used is copyright free.
I found the following tech stack very easy to use and understand, especially for a beginner.
- Nodejs (back-end)
- Eleventy (static site generator)
- Nunjucks (templating language)
- Netlify (hosting)
- Netlify CMS (headless CMS)
The pre-compiled content sits in a folder named 'src'. In this folder is all the content you modify as a developer.
When you 'build' the project using 'npm start' or 'eleventy --serve', all the data and content in the 'src' folder is processed and compiled into another folder called 'public', which can be accessed by the public. If you open this folder, you will see that all the templating done in the src folder is outputted as html files.
The 'admin' folder contains a config.yml file, which netlify CMS uses to identify which content is customizable and properties associated with it.
There is a great tutorial video I started off from by Kevin Powell on YouTube. He explains the entire system quite thoroughly and provides a good base understanding.
For help, view Links to useful Resources
- Github account
- Netify Account
- nodejs
- Code Editor (VSCode recommended)
- Click Use Tempalate to create a repository from the repo.
- In VSCode (or another code editor), install app's dependencies using the following CLI command
npm install
- Run the following in the CLI
npm start
- Validate the website is working with the dummy data provided already in the project.
- In Netlify, in your 'Team Overview', click the 'New Site from Git' button.
- Select 'GitHub' and choose the repository of the forked/cloned repo.
- Under 'Basic build settings', make sure to change the 'Publish Directory' to 'public'
- Click 'Deploy site'.
- Open '/src/admin/config.yml' file in your project.
- Update the site url for 'site_url' & 'logo_url' to your published site name.
- Push the latest changes to 'master'.
- In your team, select the site you just deployed.
- Select 'Identity' in the top menu bar.
- Select 'Invite users' and enter your own email address.
- NOTE: if you are using OAuth providers, make sure to use the email address of the provider.
- Navigate to 'Site Settings' in the top menu bar.
- Select 'Identity' in the left menu bar.
- Scroll all the way down until you find 'Git Gateway' and make sure its enabled.
- Select 'Site Settings' in the top menu bar.
- Select 'Identity' in the left menu bar.
- Scroll down until you reach 'External Providers' and click 'Add Provider'.
- Select 'Site Settings' in the top menu bar.
- Select 'Forms' in the left menu bar.
- Scroll down to 'Form Notifications' and select 'Add notification'.
I used a prism.js to automatically stylize the code block in the markdown file and a custom script to wrap code tags with <pre> if non-existent.
More themes and options can be found at prism.js downloads. Make sure to delete the existing 'prism.css' & 'prism.js' in 'src\assets\themes\'.
Here are some resources that helped me along the way.