如何使用GitLab发布HTML静态网站？GitHub私有仓库需付费

Absolutely! GitLab fully supports hosting static HTML websites for free, and a huge plus for your use case is that GitLab provides free private repositories with this hosting capability—perfect since you mentioned GitHub's paid private repo limitation. Here's how to set it up smoothly:

Step 1: Prep your static HTML project #

First, make sure your project has a root index.html file (this is the entry point GitLab Pages looks for). Double-check that all your CSS, JS, images, and other assets are properly linked and work locally when you open index.html in a browser.

Step 2: Push your project to a GitLab private repo #

• Log into GitLab, create a new repository, and set its visibility to Private.
• Push your local static site files to this repo using standard Git commands:

  git init
  git add .
  git commit -m "Initial static site upload"
  git remote add origin <your-gitlab-repo-url>
  git push -u origin main
  

Step 3: Configure GitLab Pages to deploy your site #

• Go to your repo's Settings > Pages (found in the left sidebar menu).
• Under "Deploy from a branch":
  • Select your main branch (usually main or master).
  • Choose the deployment directory: if your static files are in the repo root, select /; if they're in a subfolder like dist or build (common for framework-generated sites), pick that path instead.
• Click Save changes—GitLab will automatically start building and deploying your site.
• Once done, you'll get a public URL (like https://<your-gitlab-username>.gitlab.io/<your-repo-name>) where you can access your live static website.

Bonus Tips #

• Custom Domain: If you want to use your own domain instead of the default GitLab Pages URL, you can add it in the Pages settings. Follow the on-screen prompts to configure your DNS records for proper routing.
• CI/CD for Framework Sites: If you're using a frontend framework (React, Vue, etc.) that requires building, create a .gitlab-ci.yml file in your repo root to automate the build and deployment. Here's a basic example for a npm-based project:

  pages:
    stage: deploy
    script:
      - npm install
      - npm run build
      - mv dist public # If your build outputs to 'dist', move it to 'public' (GitLab's default)
    artifacts:
      paths:
        - public
    only:
      - main
  

内容的提问来源于stack exchange，提问作者Razib Hossain