Building a personal portfolio
using a static site builder
Cengiz Gunay
What is a static site???
From JAMstack.WTF :
This presentation was also built on a static site.
Advantages of static sites
- Host easily:
- by serving a folder on the internet without a backend process
- Many free services for hosting:
Github Pages, Netlify, Amazon S3 bucket, Gitlab Pages
- Use text and Markdown instead of writing HTML
- Use many existing templates for portfolios, documentation sites, shopping, blogs, etc.
First let’s select a template!
Recommended templates (next page down)
More templates
From https://jamstackthemes.dev :
Once you select a Jekyll template
- Fork the Github repository
- Optional: Rename the repository to make it your profile page
- Enable Github Pages from Settings
- Find the URL for your site
- Make a change!
Updating your site
- Once you save and commit a file, Github Actions will run
- Two actions will run, make sure they both complete (may take 2-3 minutes)
- If there are errors, go back and fix your changes
Changing the configuration
config.yamlfile has basic info about site (title, author, etc)- YAML format, make sure indentation is not broken
- Otherwise will get Jekyll errors
Editing content on your site
- Use Markdown format in
.mdfiles - Add new files to add blog entries
- Add categories and tags
- Change menus
More resources for Github Pages
We will go step-by-step, but here are overall steps:
- Create a new repository on Github
- Create a site with the default processor, Jekyll
- Github supports Jekyll automatically, but you have to stay within their versions
- Main Jekyll documentation
- Jekyll’s templating language is Liquid
More JAMstack technologies
- Hugo
- Gatsby
- Astro
- Next