1. Project Setup

The initial setup steps to create a new project using JAMStart are:

1. Choose a project name and domain name
2. Start the new project by cloning JAMStart repo
3. Update Project to your project name
4. Examine and Update the NPM dependencies

Philosophy

JAMStart is not meant to be an evergreen foundation layer for your web sites. Instead is a quick starting point for creating the scaffolding and framework for a new Nuxt Markdown static site. No need to 'synch' to the JAMStart repo later. You own your code going forward, warts 😦 and wonders 😍 both.

Project Name

You should decide on your project name early. The project name that will be used in your git repo, the package.json, README.md, and other places in the code. It should be a short, memorable name that reflects the purpose of your project, ideally you want it to be unique and available as a domain name as well.

Project Domain Name

You should also obtain your project web domain early. The domain name is the web address that users will use to access your site. Further you will want to create unique email names based on that domain to service each site. If you obtain the foobar.biz domain name, you will want to create email accounts like info@foobar.biz and help@foobar.biz, etc. It should be easy to remember, spell, and type. While you can use any domain registrar to purchase a domain name, I recommend using AWS Route 53 since the JAMStart project will discuss how to build, deploy, host, and manage your site on AWS as well and having it already in Route 53 makes it easier. If you don't have an AWS account, you should create one. If you already have a domain from somewhere else, you should transfer it into Route 53 as well.

Clone Start

In the following steps, NewProject is the name of your new repo but you would substitute your real project name instead.

1. Create NewProject repo at GitHub, GitLab, BitBucket, etc.
   • do not create any files, READMEs, etc. Leave blank.
   • collect your new repo url to your repo => <NewProject git_url>
2. Clone from the JAMStart repo
   • git clone https://github.com/PennockProjects/JAMStart.git {NewProject DirName}
     • the NewProject directory, will get created during this step.
3. Change into your {NewProject DirName} directory
   • cd {NewProject DirName}
4. Install Dependencies
   • npm install or yarn install depending on your package manager
5. Run the project locally to verify it works
   • npm run dev or yarn dev
   • open browser to http://localhost:3000 to verify it works
6. Set your remote to your <NewProject git_url>
   • git remote set-url origin <NewProject git_url>
7. Push it
   • git push

Example

As an example, here is the command-line for how I did this for a new Repo called TestCloneCopy. The GitHub url I created looked like this https://github.com/PennockProjects/TestCloneCopy.git

PS C:\dev> git clone https://github.com/PennockProjects/JAMStart.git TestCloneCopy    
Cloning into 'TestCloneCopy'...
remote: Enumerating objects: 668, done.
remote: Counting objects: 100% (668/668), done.
remote: Compressing objects: 100% (329/329), done.
remote: Total 668 (delta 323), reused 653 (delta 311), pack-reused 0 (from 0)
Receiving objects: 100% (668/668), 7.97 MiB | 10.13 MiB/s, done.
Resolving deltas: 100% (323/323), done.
PS C:\dev> cd .\TestCloneCopy\
PS C:\dev\TestCloneCopy> git remote set-url origin https://github.com/PennockProjects/TestCloneCopy.git
PS C:\dev\TestCloneCopy> git push
Enumerating objects: 668, done.
Counting objects: 100% (668/668), done.
Delta compression using up to 8 threads.
Compressing objects: 100% (317/317), done.
Writing objects: 100% (668/668), 7.97 MiB | 3.27 MiB/s, done.
Total 668 (delta 323), reused 668 (delta 323)
remote: Resolving deltas: 100% (323/323), done.
To https://github.com/PennockProjects/TestCloneCopy.git
 * [new branch]      main -> main
PS C:\dev\TestCloneCopy>

Customize Your Project

Now that you have cloned the repo, you should update the placeholder names, such as a project name, copyright year, etc. to reflect your new project.

Global

This placeholders are found in various files throughout the project. They should be updated using a global find and replace in your text editor or IDE. You can go through them manually, but a global find and replace is much faster.

package.json file

Now that you have cloned the repo, you should update the package.json file in the root of your repo to reflect your new project. Typically, I keep my package.json file simple since most of my content sites are held in private repos and not published to NPM. At a minimum, you should update the following fields:

Description Fields

See Cheat sheet: NPM package.json for more details on each field and an example to use.

Project Scripts

In the scripts section of the package.json file, there are some project specific scripts that have placeholders that you you will need to update, although it is probably best to wait to replace them during the Build Deploy Pipeline setup. The placeholders to replace are:

nuxt.config.ts file

There are several placeholders in the nuxt.config.ts file that you should be updated to reflect your new project.

The site and socialShare sections should be updated to reflect your new project URL and name. These are used for SEO and social sharing metadata.

  site: { 
    url: 'https://JMSTprodURL',
    name: 'JMSTprodName'
  },

  socialShare: {
    baseUrl: 'https://JMSTprodURL'
  }

README.md file

Replace the contents of README.md with your new project information.

app.vue file

In the app.vue file, there are several placeholders that you should be updated to reflect your new project. You should replace all the placeholders in the metaDefaults object that have JMST in the name. This variable is used to set the default SEO and social sharing metadata for your site.

const metaDefaults = {
  isProdEnv: process.env.NODE_ENV === "production",
  siteName: 'JAMStart',
  title: 'JMSTseoTitle',
  description: 'JMSTseoDescription',
  author: 'JMSTseoAuthor',
  creator: 'JMSTseoCreator',
  rootUrl: "https://JMSTsiteURL.com",
  robots: 'index, follow',
  copyright: '© 2026 JMSTseoCopyright',
  ogType: 'article',
  imageRoot: '/images',
  image2x1: '/images/JMSTimage2x1.jpg',
  image2x1Width: 1200,
  image2x1Height: 600,
  image1x1: '/images/JMSTimage1x1.png',
  image1x1Width: 1024,
  image1x1Height: 1024,
  imageAlt: 'JAMStart Logo',
  twitterCard: 'summary_large_image',
  twitterSiteHandle: '@JMSTsiteHandleX',
  twitterCreatorHandle: '@JMSTcreateHandleX'
}

There are two images used for social sharing, image2x1 and image1x1. You should replace these images in the /public/images folder with your own images that represent your project. The recommended sizes are:

Default Font

In the app.vue file, the Google font 'Roboto' is set to be the default font. To replace it, choose a font from Google Fonts or another font provider. Look for the embed codes or similar from the font provider. The head links are set using the Nuxt.js useHead composable. This means you will need to translate the html embed codes into the useHead format.

For example, the embed code from Google Fonts for Open Sans font looks like this:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

in the app.vue file in the useHead composable you would replace the 'Roboto' font href objects, demarcated by 'JMSTfont', to look like this:

  useHead({
    link: [
      // JMSTfont start default Font
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap' }
      // JMSTfont end default Font
    ]
  })

Next replace the global CSS font-family in the <style> section of app.vue file, marked with 'JMSTfont' to use your new font. For Open Sans, you would change the font-family line to look like this:

<style>
  body {
    font-family: 'Open Sans', sans-serif;
  }
</style>

FavIcon Images

Further there is a set of FavIcon images in the /public folder that you should replace with your own FavIcon images. Create an icon for your site and then you can use a tool like Fav Icon Suite generator - favicon.io or RealFaviconGenerator to generate a set of FavIcon images for your project.

1. Remove these files at /public:
   • android-chrome-192x192.png
   • android-chrome-512x512.png
   • apple-touch-icon.png
   • favicon-16x16.png
   • favicon-32x32.png
   • favicon.ico
   • site.webmanifest
2. Add your new FavIcon files to the /public folder. For example, when I used https://realfavicongenerator.net to create my FavIcons, I downloaded a zip file that contained all the FavIcon files. I extracted the files and copied them into the /public folder (which should be empty after you removed the previous FavIcon files). The files I added were:
   • favicon.ico
   • favicon.svg
   • favicon-96x96.png
   • site.webmanifest
   • web-app-manifest-192x192.png
   • web-app-manifest-512x512.png
   • apple-touch-icon.png
3. Your FontProvider should also provide you with some a set of <head><link> elements . In my example, it was:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

4. Within the app.vue file in the useHead() composable, replace FavIcons there, bracketed with JMSTfavIcon comment. with the equivalent links.

  useHead({
    link: [
      // JMSTfavIcon start favicons
      { rel: 'icon', type: 'image/png', href: '/favicon-96x96.png', sizes: '96x96' },
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'shortcut icon', href: '/favicon.ico' },
      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
      { rel: 'manifest', href: '/site.webmanifest' }
      // JMSTfavIcon end favicons
    ]
  })

Summary

You have now created your new project by cloning the JAMStart repo and updating the project names and files to reflect your new project.

You have provided the following inputs to customize your project:

1. Your Project Name
2. Your Project Domain Name
3. Your Project Git Repository
4. Your Project FavIcons
5. Your Project Default Social Sharing Images - 2x1 and 1x1 images.
6. Your Project Default Font

You have updated the following placeholders in your project files:

1. JAMStart to your Project Name in PascalCase
2. jamstart to your Project Name in lowercase
3. 2026 to the current year
4. all placeholders that start with JMST in package.json, nuxt.config.ts, and app.vue files (except for build deploy placeholders in package.json)

You should smoke test your project again to verify it still runs locally.

> npm run dev

You are now ready to move on to the next step of using Nuxt.js features in your JAMStart project.

Next Using Nuxt

Learn how to use Nuxt.js framework features in your JAMStart project.

• Nuxt usage