Claude Code and GitHub for non-developers: set up your development environment

Why a marketer needs a development environment

Just 2 years ago, building a website or an internal tool without knowing how to code was science fiction. Today, with Claude Code, a marketer can design a complete site, automate tasks and build custom tools. The technical barrier has never been lower.

This new freedom comes with a responsibility: working cleanly. Publishing code straight to production with no safety net means risking breaking your site with every change. Losing hours of work because you didn't save properly is frustrating, and avoidable.

A structured development environment is exactly what lets you build with peace of mind. You test your changes before publishing them, you keep a history of everything you do, and you can roll back at any time. It's the setup I use every day for jessem.fr, and the one I recommend to all my clients who start building with AI.

No prior technical knowledge is needed to follow along.

Install Claude Code

Claude Code is a command-line tool (CLI) developed by Anthropic. It runs directly in your terminal and lets you talk with Claude to write, edit and organize code. In practice, you describe what you want in plain language, and it handles the implementation.

Install Node.js

Claude Code needs Node.js to run. Node.js is a JavaScript runtime environment, but you don't need to understand what that means technically. You just need to install it.

Go to nodejs.org, download the LTS version (the recommended stable release) and follow the installer. On both Mac and Windows, it's a simple file to open and a few clicks on “Next.” To check that everything works, open your terminal and type node --version. If a version number appears, you're all set.

Install Claude Code

Once Node.js is in place, installing Claude Code takes a single command in the terminal:

npm install -g @anthropic-ai/claude-code

Then go to your project folder and run claude. The tool will ask you to log in to your Anthropic account, and then you can start working.

The CLAUDE.md file

Before you start building, take the time to write a CLAUDE.md file at the root of your project. This file serves as memory and as a guide for Claude Code. In it, you describe your project, your conventions and your preferences. For example: “This site uses static HTML with external CSS. The main colors are gold and midnight blue. Never use dashes in the copy.”

Claude Code reads this file automatically at the start of every session. The more precise it is, the more consistent the results from one session to the next. It's a 30-minute investment that will save you hours.

Understand and use GitHub

If you're working on a code project, even with AI assistance, GitHub is essential. A simple analogy shows what it's for.

Git is like Track Changes in Word, but for code. Every time you save a version (called a “commit”), Git records exactly what changed. You can go back to any previous version, compare 2 states of your project or undo a problematic change.

GitHub is your code stored online. Like Google Drive for your documents, but designed for code. Your project is accessible from any computer and safely backed up, and you can collaborate with other people (or with Claude Code on another machine).

The essential commands

Day-to-day work takes only 3 commands. And the good news is that Claude Code can run them for you if you ask.

• git add .: stages your changes for saving
• git commit -m "description": saves a version with a message that describes what changed
• git push: sends your changes to GitHub

In practice, you can simply tell Claude Code: “commit and push my changes with a descriptive message.” It takes care of the rest.

Create a repository and connect your project

A “repository” (or “repo”) is the online space that holds your project on GitHub. To create one, go to github.com, create a free account, then click “New repository.” Give it a name (for example “my-site”), keep it private if you like, and GitHub will show you the commands to run in your terminal to connect your local folder to this repo. Here again, Claude Code can do it for you.

Set up a staging environment

Staging is a fundamental concept that many non-developers discover too late, often after breaking their live site. The principle is simple: before publishing your changes to your real site, you test them on a copy.

Imagine your site is a store window. You wouldn't rearrange the whole display during business hours, in front of customers. You'd prepare the new layout in the back room, check that everything is in place, then make the switch in one go. Staging is your digital back room.

How to configure it

The most common method is to create a dedicated subdomain, for example staging.mysite.com. This subdomain points to a separate folder on your server that holds a copy of your site. You deploy your changes there, you test, and once you're satisfied, you publish to the main site.

For jessem.fr, I use exactly this setup with staging.jessem.fr. Every change goes through staging before it reaches production. It has saved me from many incidents.

Protect the staging site

Your staging environment should be neither open to the public nor indexed by search engines. 2 precautions are essential:

• A password: set up basic authentication (through the .htaccess file on Apache) so that only authorized people can access the staging site
• A noindex: add a <meta name="robots" content="noindex, nofollow"> tag or a rule in the robots.txt file to keep Google from indexing your test version

Automatic deployment with GitHub Actions

Deployment is the moment your code leaves your computer and goes to the server that hosts your site. Done by hand, it means connecting to the server, transferring the files and checking that everything works. With GitHub Actions, all of this happens automatically.

How it works

You push your code to GitHub. GitHub detects the change and runs a script you defined in advance. This script connects to your server and transfers the modified files. In a few seconds, your site is up to date. All you have to do is push your code.

2 branches for 2 environments

The system relies on 2 Git branches:

• staging: when you push code to this branch, it's automatically deployed to staging.mysite.com
• main: when you push to this branch (usually by merging from staging), the code is deployed to your live site

This separation gives you full control. You develop and test on staging, and you publish to production only once everything is approved.

GitHub secrets

For GitHub Actions to connect to your server, it needs your credentials (server address, username, password). This sensitive information must never appear in your code. GitHub provides a system of “secrets”: encrypted variables stored in your repository settings, accessible only to the deployment scripts.

SFTP: secure file transfer

To transfer your files to the server, always choose SFTP (Secure File Transfer Protocol) over plain FTP. The difference is simple: SFTP encrypts all traffic, including your credentials. With standard FTP, your passwords travel across the network in plain text. Most modern hosts offer SFTP by default.

Security basics

A few fundamental principles will spare you serious problems, with no need to become a cybersecurity expert.

Never publish passwords in your code

This is rule number one. No password, no API key and no credential should appear in your code files. If you use GitHub, everything you push is potentially visible (even in a private repo, one wrong move can expose everything). Use GitHub secrets for deployment, and .env files (added to .gitignore) for local development.

Security headers

On Apache hosting, the .htaccess file lets you configure HTTP security headers. 3 of them are especially important:

• CSP (Content Security Policy): defines which external resources your site is allowed to load. This prevents malicious scripts from being injected
• HSTS (HTTP Strict Transport Security): forces browsers to use only HTTPS to access your site
• X-Frame-Options: prevents your site from being embedded in an iframe on another domain, which protects against clickjacking

Claude Code can help you configure these headers. Just ask it to generate a secure .htaccess suited to your project.

HTTPS

The SSL certificate (which enables HTTPS and the padlock in the address bar) is essential today. Most hosts provide it for free through Let's Encrypt. If your site isn't on HTTPS, Google penalizes it in search results and browsers show your visitors a “Not secure” warning.

Audit security with the Security Review plugin

My favorite tip: Claude Code has a /security-review plugin that automatically analyzes your code and identifies potential vulnerabilities. Run this command before every production release. It checks for common flaws (exposed credentials, missing headers, sensitive files deployed by mistake) and gives you concrete recommendations to fix them. That's exactly how I identified and fixed the security flaws on jessem.fr before launch.

Updates

If your project uses dependencies (JavaScript libraries, plugins), remember to update them regularly. Known security flaws are fixed in new versions. Claude Code can help you identify outdated dependencies and update them safely.

Conclusion

Setting up a structured development environment takes a few hours of initial investment. That's a modest effort given what you get in return: a complete history of your work, a safety net before every production release, automated deployment and solid security practices.

To recap the steps: install Node.js and Claude Code, create a GitHub repository, set up a protected staging environment, put automatic deployment in place with GitHub Actions, and apply the security basics. That's exactly the workflow I use for jessem.fr and set up with my clients. To avoid rebuilding everything for each project, I've also captured this stack in a public starter: claude-site-starter, which you can fork in one click with all the GitHub Actions workflows and security settings preconfigured.

AI makes development accessible to everyone. It still takes rigor. With the right environment, you'll work as cleanly as an experienced developer, while keeping the speed and flexibility Claude Code gives you. For more on building the site itself, see my complete method for building a website with Claude Code, or check out the 5 AI tools I recommend in 2026. And if you're considering your first AI integration project, I've detailed where to start.