Different ways to Host your Static Website

There are some F/OSS alternatives to X (twitter) around there, like Mastodon.

PixelFed is the alternative to instagram, which also uses Mastodon (activitypub) under the hood.

Bu what if we just want to have a web photo gallery?

Some way to share with the world and become content creator.

We can still have a website (SSG Generated one) and use any of these free methods for Hosting the site.

Oh, and we will be using Static Site Generators (SSGs) - like Jekyll, Hugo, Gatsby, and Next.js generate static HTML, CSS, and JavaScript files, offering benefits like speed, security, version control, and flexible hosting options.

Sounds like with static you are missing functionality?

Completely wrong.

With static sites you have dinamic content.

We just dont need heavy databases.

We can even create cool ppts as a static website - with SliDev, MARP or RemarkJS

But, lets get to the point, as there will always be time to go back to a Wordpress, Ghost or even Grav website setup

Continue reading and make a 🎁 to someone you care about - Make them a web owner

Hosting on Free Tiers

All these alternatives will provide you with a free subdomain as well.

You can add your custom domain, if you decide to get one.

Remember that these are private solutions and you will be using a free tier:

1. Cloudflare Pages

I covered how to use Cloudflare Pages sometime ago here.

2. Firebase

Firebase was my way to go, together with HUGO.

3. Github Pages

GH Pages was the first place where i saw the potential of SSGs and static hosting

4. There are more options! Some people also use s3 buckets to host static sites, even Gitlab Pages.

For full ownership of your website, check the Selfhosting option below

Static Websites on Cloudflare Pages

Cloudflare Pages offers a free tier to get you started with your first website.

• https://pages.cloudflare.com/

Cloudflare Pages is a JAMstack platform designed for frontend developers to easily deploy websites.

It connects directly to your git repository, builds your site automatically, and deploys it across Cloudflare’s global network, providing fast performance and security.

It supports all static site generators (SSGs), including simple HTML, CSS, and JavaScript sites, making it an inclusive platform for developers.

Key Features

• Global Distribution: Serve your site closer to users for faster load times.
• Continuous Deployment: Automatic build and deployment on each git push.
• Security: Built-in SSL, DDoS protection, and other security features.
• Collaborative Previews: Share preview links with your team for review before going live.

Deployment Methods

1. C3 CLI (Create Cloudflare CLI): A framework-specific setup for deploying apps using best practices.

   • Pros: Structured setup, simplifies deployment.
   • Cons: Requires CLI familiarity.

2. Direct Upload: Manually upload prebuilt assets via the Cloudflare dashboard or Wrangler CLI.

   • Pros: Flexibility and control.
   • Cons: More manual work for larger projects.

3. Git Integration: Connect your GitHub or GitLab account for continuous deployment.

   • Pros: Streamlined deployment with version control and collaboration.
   • Cons: Limited control compared to other methods.

Getting Started

1. Link Your Repository to Cloudflare Pages.
2. Configure Build Settings based on your site structure.
3. Deploy Your Site automatically on every commit push.

Cloudflare Pages with Wrangler

For direct deployment, Wrangler CLI offers a more advanced option.

You can authenticate, build, and deploy your project directly through the command line:

npx wrangler pages project create #this will install the wrangler CLI package

#https://developers.cloudflare.com/pages/configuration/build-configuration/#framework-presets
npx wrangler pages deploy dist # normally will be dist/public, but whatever <BUILD_OUTPUT_DIRECTORY>


#npx wrangler pages project list
#npx wrangler pages deployment list

#npx wrangler pages project delete your_project_name

Firebase for Hosting a Static Website

Firebase is an app development platform offering a variety of tools for building high-quality applications.

It includes a free web hosting tier, ideal for small projects and startups.

Although Firebase is closed-source, it provides autonomy by allowing you to maintain control over content, experimentation, and audience engagement.

Key Features of Firebase Hosting

• Global CDN: Fast, reliable loading anywhere in the world.
• Secure by Default: Automatically served over HTTPS for data protection.
• Firebase Integration: Easily connect with other Firebase services like Firestore, Authentication, and Functions.
• Custom Domain Support: Use your own domain at no additional cost.

Getting Started with Firebase Hosting

1. Set up a Firebase project in the Firebase console.
2. Install the Firebase CLI to manage your project from the terminal.
3. Initialize your project with firebase init to link it to Firebase Hosting.
4. Deploy your site by building static files and running firebase deploy.

Firebase Hosting is perfect for those seeking quick setup.

npm install -g firebase-tools

firebase login
firebase init

firebase deploy

firebase logout
firebase login --auth

Other firebase useful commands:

firebase hosting:channel:list
#firebase hosting:channel:delete <channelId>

Hosting SSG with Github Pages

If you are a dev, you are very lucky, as Github Pages positions you a few steps away to have a website hosted

Github Pages with GH Actions

GitHub Pages offers free hosting for static websites, making it an ideal solution for projects that don’t require databases. This open-source platform, powered by GitHub (Microsoft), provides a hassle-free alternative to traditional web hosting services.

Why Choose GitHub Pages?

• No Database Overhead: Unlike platforms like WordPress or Ghost, GitHub Pages doesn’t require managing a database, significantly reducing costs and complexity.
• Easy Setup: Quickly deploy a website directly from your GitHub repository.
• Ideal for Small Projects: Perfect for personal blogs, documentation sites, portfolios, or simple projects.

Can GitHub Pages Handle Dynamic Content?

While GitHub Pages hosts static sites, modern web technologies allow for dynamic and interactive experiences:

• JavaScript Frameworks: Use React, Vue, or Angular for interactive UIs.
• APIs & Serverless Functions: Integrate APIs or use serverless functions (AWS Lambda, Netlify Functions) for dynamic backend processes.
• Headless CMS: Manage content dynamically with tools like Contentful or Netlify CMS.
• Static Site Generators: Build sites with tools like HUGO, Jekyll, or Gatsby, which can pre-render pages but still offer dynamic behavior.

Key Features of GitHub Pages Hosting

• Repository Integration: Directly linked to your GitHub repo, making version control and updates simple.
• Custom Domains: Supports custom domains for free, alongside the default username.github.io domain.
• Secure by Default: HTTPS is automatically enabled for all hosted sites.
• Open Source: GitHub Pages is built on the open-source Jekyll engine, offering transparency and flexibility.

Getting Started with GitHub Pages

1. Prepare Your GitHub Repository: Push your static site (e.g., HUGO project) to GitHub.
2. Enable GitHub Pages: In the repo’s settings, select the branch to publish from (typically main or gh-pages).
3. Configure Your Site: Set up your site’s base URL in the site’s configuration.
4. Deploy: Push your site’s static files to GitHub, and it will be deployed automatically.

Tips for Using GitHub Pages

• Stick to Static: GitHub Pages is best suited for static websites; dynamic server-side processes aren’t supported.
• Watch Repository Size: While there are no strict bandwidth limits, monitor repository size to avoid performance issues.

You can also leverage GH Actions CI/CD so that the web is built for you!

name: Deploy Astro to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write


jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check out your repository using git
        uses: actions/checkout@v2

      - name: Use Node.js 18
        uses: actions/setup-node@v2
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build Astro
        run: npm run build --if-present

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

name: Deploy Slidev site to Github Pages

on:
  # push:
  #   branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

defaults:
  run:
    shell: bash

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      NODE_VERSION: 18
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}
      - name: Install dependencies
        run: |
          cd ./slidev
          npm install          
      - name: Build Slidev project
        run: |
          cd ./slidev
          npm install -g @slidev/cli #npm install --save-dev @slidev/cli
          npm i -D playwright-chromium
          slidev build --base /Streamlit-MultiChat/           
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./slidev/dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

name: Deploy Hugo site to Github Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.117.0
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup Go
        uses: actions/setup-go@v4
        with:
          go-version: '1.21'
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.117.0'
          extended: true
      - name: Build with Hugo
        env:
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo --gc --minify --baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public

  # Test job (can be skipped if it fails)
  test:
    runs-on: ubuntu-latest
    needs: build
    continue-on-error: true  # This allows the job to fail without failing the entire workflow
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Install linkchecker
        run: sudo apt-get install -y linkchecker
      - name: Run LinkChecker
        run: |
          linkchecker ./public/ \
            --ignore-url "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/" || echo "LinkChecker found errors, but continuing..."          

  # Deploy job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

name: "Build and Deploy Jekyll to GH Pages"
on:
  push:
    branches:
      - main
      - master
    paths-ignore:
      - .gitignore
      - README.md
      - LICENSE

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          # submodules: true
          # If using the 'assets' git submodule from Chirpy Starter, uncomment above
          # (See: https://github.com/cotes2020/chirpy-starter/tree/main/assets)

      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v4

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: 3.3
          bundler-cache: true

      - name: Build site
        run: bundle exec jekyll b -d "_site${{ steps.pages.outputs.base_path }}"
        env:
          JEKYLL_ENV: "production"

      # - name: Test site
      #   run: |
      #     bundle exec htmlproofer _site \
      #       \-\-disable-external \
      #       \-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"

      - name: Upload site artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "_site${{ steps.pages.outputs.base_path }}"

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Hosting with Gitlab Pages

https://fossengineer.com/selfhosting-gitlab-docker

SelfHosting Static Websites

https://fossengineer.com/hosting-static-websites/

Conclusions

curl "https://www.google.com/ping?sitemap=https://www.example.com/sitemap.xml"

curl "https://www.bing.com/ping?sitemap=https://www.example.com/sitemap.xml"

What about Web3

The Web3 Revolution!

Wait, what?

If you followed with any of those static hosting methods, having a web3 is not much harder.

Three main actions:

1. Optimizing your browser for Web3: Get a browser like Brave that’s built for Web3, so you can seamlessly interact with decentralized apps.

2. Creating a Web3-compatible website: If you already know how to build a static site, you’re halfway there! Web3 websites are built using HTML, CSS, and JavaScript, and they work perfectly with decentralized technologies.

3. Getting your own Web3 domain: Use platforms like Ethereum Name Service (ENS) or IPFS to secure your very own Web3 domain and link it to your site.

Exploring Web3 Concepts

• Unstoppable Domains: These are blockchain-based domains that give you full ownership—no yearly renewal fees and no one can take them from you. You store them in your wallet, just like crypto.

• IPFS (InterPlanetary File System): A decentralized storage system that’s more resilient and efficient than traditional file hosting. It lets you store and share files in a peer-to-peer network, making the web more open and censorship-resistant.

How to Get Started with Web3

Building your Web3 site isn’t as hard as you might think.

If you already know how to make static websites, you’re good to go!

Web3 is just a few steps different that what we saw on this post

In fact, we could see it just another type of static hosting, involving:

• A Web3-compatible browser (like Brave)
• Static website files (HTML, CSS, JS)
• A Web3 domain, linked to a decentralized storage system like IPFS

• The Brave Site
• The Brave Source Code at Github
  • License: MPL

sudo snap install brave

Brave, a Chromium based F/OSS web browser that can be used for Web3

You can easily host your files on platforms like Pinata or Filebase, which allow you to store content on IPFS.

Creating your own Web3 presence is within reach, specially if you understand tools like static site generators (e.g., HUGO or Astro) and decentralized technologies like ENS and IPFS.

You can be on your way to building a decentralized, secure, and unstoppable web presence.

FAQ

Learn more about Web3 at:

• https://learnweb3.io

• https://mirror.xyz/

Adding WebAnalytics to SSGs

OSS Tools to Check Websites

How to create a Web for Static Hosting

Use any open source SSG like these:

• NextJS
• Astro SSG

You can do awsome websites with Astro!

• HUGO
• Jekyll

More SSGs to use with These free Hosting

There is a world out there in addition to HUGO or Astro SSGs

NUXT

Nuxt.js is not just a static site generator like Hexo, Jekyll, or Hugo.

• https://v2.nuxt.com/
• https://github.com/nuxt/nuxt
• https://jamstack.org/generators/nuxt/

Nuxt.js is built on top of Vue.js and provides a structured development environment for creating dynamic and server-rendered web applications.

Thanks to NUXT, the SliDev Project to create ppt is possible

• And it recommends some cool custom icons - https://lightvue.org/getting-started/light-icons
  • https://github.com/lightvue/slidev-theme-light-icons

Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application.

Use Vue components in Markdown with the MDC syntax - https://content.nuxt.com/usage/markdown

• Nuxt.js Rendering Modes: Nuxt.js offers flexibility in how your application renders content. Here are the main modes:
  • Server-side Rendering (SSR): This is the default mode where Nuxt renders content on the server for each request, improving SEO but potentially impacting initial load times.
  • Static Site Generation (SSG): In this mode, Nuxt pre-renders your application’s pages at build time, resulting in fully static HTML files that are faster to load but might require rebuilding for content updates.
  • Single-Page Application (SPA): Similar to a traditional Vue.js application, the initial page loads HTML, and JavaScript takes over, dynamically fetching and rendering content in the browser, offering a more interactive experience but potentially impacting initial load times.

A brief comparison between Nuxt.js and the other static site generators:

It provides features like automatic routing, server-side rendering, and client-side rendering, making it suitable for building dynamic web applications with Vue.js.

On the other hand, static site generators like Hexo, Jekyll, and Astro are primarily designed for generating static websites or blogs, where the content is pre-rendered at build time and served as plain HTML, CSS, and JavaScript files.

They are typically used for content-heavy websites that don’t require dynamic interactions or real-time data.

If you need a dynamic web application with Vue.js and server-side rendering, Nuxt.js is a suitable choice. If you’re building a content-centric website or blog and want to pre-render pages for performance and SEO, you might prefer a static site generator like Hexo, Jekyll, or Astro.

How to Add Search Capabilities to SSGs

• https://github.com/olivernn/lunr.js
  • Works in HUGO and other SSGs

Lunr.js is a client-side search library that indexes the content of your static site and provides fast, full-text search capabilities.

It allows you to create a search index based on the content of your pages and then perform searches on that index directly in the browser, without the need for a server-side backend.

• PageFind -

Regarding Pagefind, it is another open-source static search library that serves a similar purpose to Lunr.js.

Pagefind is designed to be a fast and lightweight search solution for static websites. It also works by indexing the content of your pages and providing client-side search functionality.

It’s worth noting that there are other open-source static search libraries available as well, such as Elasticlunr.js, Fuse.js, and List.js, each with its own strengths and use cases.

Get a Domain

Remember that when you are hosting with Cloudflare, Firebase or Github Pages - you will have a free subdomain to get started.

That makes having your first website free with NextJS.

But if you want to have your custom domain name, you can always try:

None of them are sponsoring me and I encorage you to look for alternatives before buying one

How to Monitor my Website?

Website Status

• With UptimeKuma

• https://upptime.js.org?ref=fossengineer.com - MIT Licensed

Upptime is the open-source uptime monitor and status page, powered entirely by GitHub.

Broken Links?

If you are having a site for sometime already, it might be good to look if all referenced links are working from time to time.

But, manually…is not an option - Fortunately we can use LinkChecker Project with Python.

• We will be using their GHCR Image

#podman run --rm -it ghcr.io/linkchecker/linkchecker:latest --verbose https://fossengineer.com > linkchecker_output.txt

docker run --rm -it -u $(id -u):$(id -g) ghcr.io/linkchecker/linkchecker:latest --verbose https://www.example.com

Or with the python Package:

pip3 install linkchecker

Check links in web documents or full websites

You will get a report with what’s link working and what not when it comes to Links in your Site.

Branding and Colors

Brand with F/OSS

• ColorPicker
• Huey
• LeonardoColor
  • https://github.com/adobe/leonardo?ref=fossengineer.com - Generate colors based on a desired contrast ratio - Apache v2 ✅

Icons for Websites

Just use Real Fav Icon Generator and place in the the proper folder (where the default icons are on your Theme).

• https://github.com/twbs/icons?ref=fossengineer.com (MIT ❤️ Licensed SVG icons)
  • https://icons.getbootstrap.com?ref=fossengineer.com

npm i bootstrap-icons

Official open source SVG icon library for Bootstrap.

• Look for icons with - https://github.com/antfu-collective/icones (MIT ❤️)
  • https://icones.js.org/

⚡️ Icon Explorer with Instant searching, powered by Iconify

• https://github.com/iconify/iconify (MIT ❤️)
  • https://iconify.design/docs/iconify-icon/
  • example - https://icon-sets.iconify.design/uil/bitcoin-circle/

npm install --save-dev @iconify-icon/react

Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!

• https://fontawesome.com/v5/search?o=r&m=free
  • https://fontawesome.com/license/free
  • https://github.com/FortAwesome/Font-Awesome

And more! Font Awesome works with Require.js, Rails with Turbolink, and jQuery!

• https://github.com/lightvue/light-icons (MIT ❤️)
  • https://icons.lightvue.org/icons

add this to your css

@import "../../node_modules/light-icons/dist/light-icon.css";

Handpicked collection of premium & light-wighted icons as font

• https://github.com/tabler/tabler-icons

• https://icons.getbootstrap.com/

• https://github.com/tabler/tabler-icons

• https://iconoir.com/

• https://github.com/iconic/open-iconic#License-1-ov-file

• https://github.com/feathericons/feather (MIT Licensed)

Simply beautiful open-source icons

• Icons for dashboards
  • https://github.com/walkxcode/dashboard-icons?tab=readme-ov-file

FavIcons for NextJS

• Just use Real Fav Icon Generator 😍 and place in the the proper folder (where the default icons are on your Theme).

• Cool FavIcon with: https://favicon.io/favicon-converter/ - You can upload an image, then you will get the favicon.ico and other artifacts to make the web icons look amazing in any device.

1. Go to the theme folder
2. Add a /static folder
3. Add the files generated with the website