Intention here is to save yourself from just doing more config and set up over and over and over. It takes a lot of time It’s really not that valuable and it’s not really want to be doing.
The goal is to crank out sites not do mindless config over and over and over again.
Creating and maintaining a starter project takes time. It’s really have as many referenced variables as possible including things like the website name.
My current one would be like type script next styled components and would include variable for the website name, defaults for colors, breakpoints, favicon. You should have some basic features like a menu with an about page and a form. I’m basically anything that I would allow you to clone install make some minor changes and deploy.
Two versions: A basic non-wp-webpack-enabled site and a wp-webpack-enabled site.
Copy the starter site folder in desktop-projects folder. I use this folder as my base because it already has a file and folder structure I like. It has stylesheets, JavaScript files, google fonts, and font-awesome already linked. Webpack is also configured which makes this folder different from starter-site-basic.
Once the new project folder is copied and renamed run NPM install from the command line and confirm that your webpack configuration is working including hot module reload. Should be able to see the site at localhost:3000
If you want to use version control create a new private git repo, initialize git in the project folder, set the remote URL, make your first commit to your newly created git repository.
When you’re ready to deploy upload your build files to a server and that’s it.
Note: For a non-webpack version use starter-site-basic.
To Use WordPress create a fresh install on local, copy over the starter-site-basic theme folder from a previous project and update the webpack.config.js file, package.json, style.css, functions.php. Then npm install and git init.
Update a few settings in the local WP admin (site title, tagline, blog pages show count, disable comments, disable link notifications, image sizes if applicable, and uncheck the organize uploads into month-year folders).
Create a new page (resources) and a couple test posts and *important: create a menu with name of primary-nav? to get the mobile nav JavaScript to work.
Forms will need to be configured as well but do that later.
Activate new theme.
For local to live deployment install ai1wp on local and add a code snippet (below) to functions.php to exclude the node-Modules folder (if applicable). This took a very basic site from 136mb down to 13mb. Export site as file when ready to deploy.
When creating a new site from scratch on your host create an FTP user on your host and securely store your login credentials to save your future self the headache.
Install a fresh copy of WP on your host (Siteground has an app manager that makes this super easy) and install the wp-all-in-one-migration plugin. Import your local site using all-in-one-wp-migration.
Set up SSL with host (super easy with Siteground). Any subsequent builds can be manually ftp but that is not recommended for non-personal projects. You can also deploy with a service like deployhq which offers continual deployments via git.
//excludes node_modules folder from ai1wpm (plugin) exports
add_filter('ai1wm_exclude_content_from_export', 'ignoreCertainFiles');
function ignoreCertainFiles($exclude_filters) {
$exclude_filters[] = 'themes/cheesemynoodle-2021/node_modules';
return $exclude_filters;
}Logo
Favicon
Mobile Menu & Desktop Menu
“Go To Top” button
Google Fonts
Font Awesome
Linked JS and CSS
Styled Backend Login (WP)
All in One WP Migration (WP) Plugin
Form Integration
SSL Enabled