Web site development is not easy. It is difficult, time consuming, and expensive. Optimizing the web development environment is critical.
Developing web software using local development workstations and software is advantageous. The development environment is not locked into cloud vendor services. It can be updated with new and improved hardware and software quicker than relying on cloud vendor service to update
This overview diagram depicts the web development stack used to build and deploy this web site
VSvode text editor is used to create, edit, and store web site source files in the Local GitHub Repository.
Nextra is a Next.js based static site generator. It reads source files from the Local GitHub Repository and creates a live preview local Development web site. Any source file edits updates the live preview.
Git commits the Local GitHub Repository file changes to the remote GitHub Repository.
Next.js builds a web site image ready to deploy to the Internet.
Netlify deploys the web site image to the Internet
The web development stack uses local and web-based services to create, deploy, and manage web sites. It abstracts other technologies, help making developing web sites faster, more robust, and cost less.
Versions of edited web project files are stored locally and in a remote repository. The web site is deployed to the Internet using vendor cloud-based web services, eliminating the need for local web services.
Developers using Visual Studio Code as Central Command and Control enables developing, managing, and deploying web sites.
VScode, is a lightweight open source code editor that runs on local development computers, and is available for Linux, macOS, and Windows. It may be the best text editor in years
There are a wealth of extensions Visual Studio Code to customize
VScode look and feel. Several color themes, programming language specific intelligence code completion, snippets, color coding, error checking, spelling, and many more are available.
Vscode is the command and control framework for building web component web site. Development time is spent editing and managing source code files.
Git is a key development stack source control component. It is built-in to
MDX Extension dramatically speeds up development. Some
MDX features are:
Syntax highlighting quickly detects errors while typing or building, and may give hints about problems
Frequent snippets of code can be quickly inserted
Section builder provides a quick way for setting section header levels
Live preview compiles source code being edited showing how the file will be displayed on the web
Git source control is built-in to
Git is a key development stack component. It is a distributed version control system designed to track project file changes. Its attributes are using a local file repository, speed, data integrity, and support for distributed, non-linear workflows and keeping track of file changes among multiple developers.
Gitis responsible for everything
GitHub-related that happens on local development computers. The developer pushes changes stored in the local file repository to
GitHub for safe keeping and sharing with other project developers.
GitHub is an online web hosted repository for
git projects. It is a platform for hosting versions of project files in a remote repository that is a unified source of truth. It helps software teams collaborate and maintain the entire history of projects file changes. Developers can view history of changes and go back to a previous version. It helps answer the questions who changed what, where, when, and why?
A local copy of the project
GitHub repository is stored on development computers.
Git is responsible for everything
GitHub-related on local development computers.
Git is used to locally stage edited project files. Developers are required to write a why message before committing changes to the
GitHub project repository.
Next.js is a web site generator based on abstracting React and Node component frameworks creating fast websites.
Next.js plugin components and React components are chosen for building a web app structure, and then are welded together with JSX and MDX.
Netlify is a popular Application Delivery Network (ADN). It provides continuous web deployment. When
Netlify is notified of a commit initiated by
VScode to a shared
GitHub repository, or by the
Netlify CLI command program running on development computers,
Netlify builds the web site and deploys it worldwide to every major cloud provider. Developers instruct
Netlify to deploy previews of the web site enabling stake holders to view the state of the project on a preview web site, before deploying to the production web site.