🚀 Prerequisites Link to heading

  • Ensure you have Vercel CLI installed:

    npm install -g vercel

  • Ensure you have Git installed:

    git --version

🚀 Step 1: Install Hugo Link to heading

  • Download and Install Hugo (Extended Version):

    # For macOS (using Homebrew)
brew install hugo

# For Linux
sudo apt-get install hugo -y

# For Windows (using Chocolatey)
choco install hugo-extended -y

  • Verify Hugo Installation:

    hugo version

🚀 Step 2: Create a New Hugo Site Link to heading

  • Create a new Hugo project:

    hugo new site my-hugo-site
cd my-hugo-site

🚀 Step 3: Initialize Git and Add a Theme Link to heading

  • Initialize Git:

    git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder
git submodule update --init --recursive

  • Set the theme in config.toml:

    theme = "hugo-coder"

🚀 Step 4: Add Content Link to heading

  • Create a new page:

    hugo new posts/first-post.md

  • Edit the content in content/posts/first-post.md.

🚀 Step 5: Test Locally Link to heading

  • Run the local server:

    hugo server -D

  • Access the site at http://localhost:1313

🚀 Step 6: Login to Vercel Link to heading

  • Authenticate your Vercel account:
vercel login
  • If you are already logged in, you can skip this step.

🚀 Step 7: Initialize Vercel in Your Project Directory Link to heading

  • Go to your Hugo project directory:
cd /path/to/your/hugo-project
  • Initialize Vercel:
vercel init
  • Choose “hugo” as the framework.

🚀 Step 8: Set Build Command and Output Directory Link to heading

  • Set the build command to ensure it works the same as Vercel:
vercel env add HUGO_VERSION 0.138.0
vercel env add HUGO_ENV production
vercel env add HUGO_EXTENDED true
  • Set your build command:
vercel build
  • This will locally build your site using the same configuration as Vercel.

🚀 Step 9: Preview the Deployment Locally Link to heading

  • Use Vercel CLI to run a local server:
vercel dev
  • This will allow you to view your site locally just as it would appear on Vercel.

🚀 Step 10: Deploy Directly to Vercel (Optional) Link to heading

  • If everything works perfectly, you can deploy directly to Vercel using:
vercel --prod
  • This will push your current state directly to your Vercel project.

✅ Tips: Link to heading

  • Always use the same Hugo version locally and on Vercel.
  • Test your Hugo site locally using:
hugo --gc --minify --buildDrafts --buildExpired --buildFuture
  • This simulates the Vercel production build.