- Nuxt 3 (in "universal mode", where both SEO and speed is great)
- Vue 3
- Vuex (supported by adding to
/store
, but not implemented) - PostCSS (no SCSS)
- Tailwind 3
- Dark mode & ColorModePicker (Set to "dark mode first")
- Netlify CMS (no need for a separate server)
- Prettier
- Nuxt-content (w/ exensible support for markdown and code-blocks)
- 📦 Install dependencies.
npm install
- 🏗 Run the project for local dev. This will start a hot-reloading server at
localhost:3000
.
npm run dev
- 🌌 Build the app for server-side rendered deployment. See more about Universal SSR in the Nuxt.js docs.
npm run build
# And to serve that deployment...
npm run start
- ⚡️ Generate a fully pre-rendered static site. See more in the docs.
npm run generate
-
Copy and change the .env-file
cp .env-example .env
- Then change the values
-
Change the value on these lines
public/admin/config.yml
—site_url
&logo_url
content/site/info.json
—sitename
,sitedescription
&sitelang
package.json
—name
,description
,author
&repository.url
pages/index.vue
— The start page of your new website!
-
Change colors, favicon, content & content collections
- Colors are managed in
assets/css/_vars.pcss
&tailwind.config.js
- Favicon is generated by @vite-pwa/assets-generator. You should change the
public/icon.png
to something new, and thennpm run generate-pwa-assets
. Replace the preview.jpg as well. - Content is managed mainly in local Netlify CMS by going to your
/admin
, in development mode by double-clicking on a post or by hand in/content
- Content collections are managed in
public/admin/config.yml
- Colors are managed in
-
Change font
- Add/change your font link in
nuxt.config.js
underhead.link
. You can add a<link rel="stylesheet" href="font.css">
aslink: [{ rel: 'stylesheet', href: 'font.css' }]
, like this - Then append your font name in
tailwind.config.js
undertheme.extend.fontFamily.sans
(or other). - Then if you've uncommented the included netlify plugin "Subfont" in
netlify.toml
, it will automatically post-processes your web page to use an optimal font loading strategy.
- Add/change your font link in
This project was bootstrapped with
create-nuxt-app
. There are more detailed explanations of how everything works in the Nuxt.js docs.
Originally based on Henry Desroches' nuxt-netlify-cms-starter.
-
I can’t log in to
/admin
on localhost and use my local git as CMS -
Open up a new terminal and run
npx netlify-cms-proxy-server
, the login again. -
I tried logging into/saving in Netlify CMS, but I can't
-
It may be that you haven't enabled Netlify Identity or setup the Git Gateway correctly, check the docs
-
I get Netlify emails but can't use them to login etc.
-
It is probably because the 'netlify-identity-widget' is only included in the
/admin
-page. Follow the advice here or enable the included email-templates’ paths in Netlify, under Site Settings > Identity > Emails and there you can set/public/emails/THE_TEMPLATE_NAME.html
for each template. This will make sure to use the correct links inside the emails. Look at @audetcameron’s screenshot here.
git config --global core.quotePath false