Loading repository data…
Loading repository data…
Automating-my-Job / repository
This is a ready-to-launch website template built with Next.js. You fork it, swap in your own words and images, and put it online. When you are done you will have a live, professional three-page site at your own domain, with a contact form that emails you, plus the basics search engines look for (a sitemap, social-share preview images, & structure.
A clean, fast personal website and portfolio you can deploy for free, with a working contact form built in. Want to see, check out www.OpsGS.com.
This is a ready-to-launch website template built with Next.js. You fork it, swap in your own words and images, and put it online. When you are done you will have a live, professional three-page site at your own domain, with a contact form that emails you, plus the basics search engines look for (a sitemap, social-share preview images, and structured data).
It is for anyone who wants a polished personal or freelance site without building one from scratch. You do not need to be a Next.js expert. If you can follow numbered steps and copy-paste a command, you can do this. If this is your first website ever, that is fine. This guide assumes exactly that.
The template has three pages out of the box:
/ (home): a "fork" page with two doors (for example, hire me vs. contract with me)./work: a portfolio./services: an offer page (here, an automated-reporting service).Honest time estimate: about 1 to 2 hours start to finish. Roughly 20 minutes to get it running on your computer, 30 to 45 minutes to make the words and images yours, and 20 to 30 minutes to deploy and connect the contact form. Adding your own domain and Google Search Console adds another 20 to 30 minutes, plus waiting time for DNS (Domain Name System, the internet's address book that maps your domain name to a server) to update.
Set these up first. The free tiers are enough for everything here.
| Tool or account | Required? | Why |
|---|---|---|
| GitHub account | Required | Stores your copy of the code. |
| Vercel account (free Hobby plan) | Required | Hosts your live site. Sign up with GitHub to link them. |
| Resend account (free) | Required for the contact form | Sends the emails from your contact form. The site works without it, but the form will not send until this is done. |
| Node.js version 20 or newer | Required | Runs the site on your computer. |
| A code editor (for example, VS Code) | Required | Edits the text and files. |
| A domain name | Optional | Use your own web address (for example, yourname.com). You can launch on a free *.vercel.app address first and add a domain later. |
| Google Search Console | Optional | Helps Google find and index your site. |
Check your work: open a terminal (on Mac, press Cmd+Space, type Terminal, and press Enter; on Windows, open PowerShell from the Start menu; or use the terminal built into VS Code under View > Terminal) and run this:
node -v
You should see a version number like v20.0.0. The number right after the v should be 20 or greater (for example, v20, v22, or v26 are all fine).
If you see "command not found" or a number below 20, install or update Node.js from nodejs.org and run the command again.
You are about to download the code and run it on your own machine, so you can preview every change before anyone else sees it. This matters because you never have to guess: you see exactly what your visitors will see.
If this is your first time using git on this computer, set your name and email once. Use the email address on your GitHub account. This prevents a deploy error later (covered in Troubleshooting).
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
Fork the template repository on GitHub. Open https://github.com/Automating-my-Job/Website_Template and click the Fork button (top right). This makes your own copy under your GitHub account.
On your new fork's page, click the green Code button and copy the web address it shows (it looks like https://github.com/YOUR-USERNAME/Website_Template.git).
Clone your fork to your computer. Paste your copied address in place of the one below.
git clone https://github.com/YOUR-USERNAME/Website_Template.git
Move into the project folder. Your folder name matches your repository name.
cd Website_Template
Install the dependencies (the supporting code packages the site needs).
npm install
You may see lines that start with npm warn. Warnings are normal and safe to ignore. Only an npm error that stops the process is a real problem (see Troubleshooting).
Start the local development server (a private preview that runs only on your computer).
npm run dev
Open http://localhost:3000 in your browser.
Check your work: you should see the home page with its two doors. As you edit files later, this page updates automatically while npm run dev is running.
If the page does not load, confirm step 6 is still running in your terminal (it stays running, that is normal) and that nothing else is using port 3000.
This is where the template becomes your site. Work through the checklist below. The most important file is lib/content.ts: nearly all of the words on the site live there, so editing it updates the whole site in one place.
Open the project folder in your code editor (in VS Code, File > Open Folder, then pick the folder you cloned). You can keep npm run dev running in the terminal while you edit.
lib/content.ts and edit the copy. Pay special attention to the SITE object near the top. Set these three to your own values:
SITE.url (currently "https://www.opsgs.com"): your canonical site address. Canonical means the one official address for your site (more on choosing this in section 6).SITE.email: your contact email. Capitalization in an email address does not matter, so you@example.com and You@example.com are treated the same.SITE.linkedin: your LinkedIn profile URL.public/ folder)Replace these with your own files, keeping the same file names. The PWA and icon files need specific square sizes. If you only have a regular photo, a free online image resizer or favicon converter can produce the right dimensions and the .ico format. You can also skip the icon files for a first launch and come back to them later.
public/logo.pngpublic/headshot.jpgpublic/pwa-192.png (192 by 192 pixels)public/pwa-512.png (512 by 512 pixels)public/demo/before-spreadsheet.pngpublic/demo/after-deck.pngpublic/demo/ops-gs-sample-report.pdfpublic/demo/ops-gs-sample-workbook.xlsxapp/apple-icon.pngapp/favicon.ico (an icon file; use a favicon converter to make one from a PNG) Open app/api/contact/route.ts and change these three hardcoded values:
| What | Current value | Change to |
|---|---|---|
from address | OPS GS Website <contact@opsgs.com> | An address at your verified sending domain (see section 4) |
to address | tom@opsgs.com | The inbox where you want to receive messages |
ALLOWED_ORIGINS | ["https://www.opsgs.com", "https://opsgs.com"] | Your own domain(s) |
Note: ALLOWED_ORIGINS already allows Vercel preview URLs (*.vercel.app) automatically, so you do not need to add those.
app/opengraph-image.tsx, app/work/opengraph-image.tsx, and app/services/opengraph-image.tsx. These contain some hardcoded name and tagline text. (These images are what show up when someone shares your link on social media or chat.)components/JsonLd.tsx looks right. It builds Person and Organization structured data (machine-readable info for search engines) and reads from SITE.url and SITE.linkedin, so updating lib/content.ts usually covers it.next.config.ts and update or remove the redirect rule that sends traffic from opsgs.vercel.app to www.opsgs.com. This was specific to the original site. If you do not need it, delete that redirect.Good to know: the SEO files app/robots.ts, app/sitemap.ts, and app/manifest.ts mostly read from SITE in lib/content.ts, so you usually update content.ts, not these files directly.
Check your work: with npm run dev running, refresh http://localhost:3000. Your text, your headshot, and your logo should all appear.
Your edits so far live only on your computer. Vercel deploys from GitHub, so you must send your changes there before they can go live. In the same terminal, in your project folder, run:
git add -A
git commit -m "Make it mine"
git push
Vercel redeploys automatically every time you push. If git push complains about your identity, see the one-time git setup at the start of section 2.
Your contact form needs a service to actually send the email. That service is Resend. Important: the site works fine without this, but the contact form will not send a message until you finish these steps.
Create a free account at resend.com.
In the Resend dashboard, create an API key (a secret token that lets your site send mail through Resend). Copy it somewhere safe. You will not be able to see it again.
Add and verify your sending domain in Resend. This means adding a few DNS records to your domain so Resend can prove you own it. Resend shows you the exact records to add. Verification can take a few minutes to a few hours while DNS updates. Until your domain shows as verified, sends will fail, and on the free tier Resend may only let you send to your own account email. Do not be alarmed if a test does not arrive before verification finishes.
Make sure the from address in app/api/contact/route.ts (from section 3) uses your verified domain. For example, if you verified yourdomain.com, a from of contact@yourdomain.com works.
Store your API key as an environment variable (a named secret your code reads at runtime) named exactly RESEND_API_KEY. This is the only environment variable this project uses, and it is read only on the server.
For local testing, create a file named .env.local in the project root (the folder containing package.json, which is the folder you cloned). The easiest way to create it is from your code editor: make a new file, name it .env.local, and add this single line:
RESEND_API_KEY=your_key_here
Files matching .env* are gitignored, so this secret is never committed to GitHub. Good.
Check your work: in the same terminal window where the dev server is running, stop it (press Ctrl+C), then start it again with npm run dev so it picks up the new file. Submit your own contact form on the local site. If your sending domain is verified, you should receive an email at your to address. If nothing arrives, confirm the domain is verified and check Troubleshooting before assuming something is broken.
Now you publish the site so anyone can reach it. Make sure you have pushed your changes to GitHub first (the end of section 3).
RESEND_API_KEY