Create and deploy static site for personal website or blog. Contains contact form, feeds and comment section.

static_site_howto.md

Static Site

Static sites are useful as personal website, portfolio, blogs, conference website, brouchureware etc.. Following are a few resources to get us started. Also see this sister gist.

Static Site Generator (SSG)

• Astro
• Vitepress for documentation
  • Easy tutorial
  • Deployment guide, includes GitHub pages using workflow/actions
• Awesome SSGs
• Pelican
• Hugo
• Pelican vs Hugo
• Python based static site generators
• Example: Pelican site hosted on GitHub Pages
• Example: Pelican site hosted on GitHub Pages

Resources for interacting directly with HTML

• Performance/How_browsers_work
• Responsive web design
• Toggle Hide/Show
• Toggle Dark Mode
• css frameworks
• Code syntax highlighter
• Online html escape tool
• Bootstrap 5 tutorial
• Online HTML Formatter
• Online HTML validator

Fast asset delivery (CDN, minify and gzip)

• jsdelivr.com. Store common (3rd party but self-hosted) stylesheets and js in a specific GitHub repository. Then use their jsdelivr.com links as href and src in all your HTMLs. Note: add ".min" to any JS/CSS file to get a minified version; if one doesn't exist, jsdelivr generates it for you.
• Using GitHub pages for automatic gzip and CDN

Deployment

• GitHub Pages
• Pelican Tips

Form backend

Don't expose your email ID. Use a contact form instead. Use free-tier of the following services or set up a Google form for free.

• Formonit
• EmailJS
• formspree.io
• fabform.io
• Google Forms hack

Search Engine Optimization (SEO)

• Pelican Plugin
• Google URL inspection
• Google's tips

Feeds

• Importance of Feeds
• How to use RSS feeds
• Pelican Feed settings

Favicon

• favicon.io
• favicon in pelican
• favicon-generator.org

Free Icons

• https://icones.js.org/
• https://icons8.com/icons

Copyright

Copyright your site as ©Your Name, Year . Make sure all assets (e.g. images/gifs/videos) you use in the site are properly licensed. Freely usable stock images:

• unsplash.com

Site Search and Sitemap

• Pelican search
• Pelican Sitemap

Comments

• Sequel to easyform with securelay and GitHub authentication.
• Disqus integration with Pelican
• Tutorial
• Utterances - GitHub Issue based
• Commento self hosting

Google Analytics

• Pelican integration