Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/longrun/tech-blog-vue3-nuxt3
Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful
https://github.com/longrun/tech-blog-vue3-nuxt3
blog contentful markdown nuxt3 vue3
Last synced: about 1 month ago
JSON representation
Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful
- Host: GitHub
- URL: https://github.com/longrun/tech-blog-vue3-nuxt3
- Owner: longrun
- License: mit
- Created: 2022-04-07T12:38:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-16T23:53:55.000Z (over 1 year ago)
- Last Synced: 2024-10-01T03:24:24.831Z (about 1 month ago)
- Topics: blog, contentful, markdown, nuxt3, vue3
- Language: Vue
- Homepage:
- Size: 218 MB
- Stars: 48
- Watchers: 3
- Forks: 4
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Tech blog starter-kit with Vue 3, Nuxt 3 and Contentful
- Vue 3
- Every .vue files are written in [setup script](https://vuejs.org/api/sfc-script-setup.html)
- Nuxt 3
- Using latest version, v3.0.0-rc.8
- Compliance the Nuxt 3 standard directory structure
- You can choose SSR or SSG, whichever you prefer!
- TypeScript
- Contentful for BFF
- Tools: Vite, Yarn 3, Volar
- Styles: [Primeflex](https://www.primefaces.org/primeflex/), [Primeicons](https://github.com/primefaces/primeicons), [markdown-it](https://github.com/markdown-it/markdown-it)
## Features
Minimal features.
- Simple and clean markup and styling
- Article is can wrote Markdown
- Responsive layout for PC, Tablet, Smartphone
- Image optimization - support WebP format / image lazy load
- Lighthouse Hi-score
- Perfect OGP resources setup
- Support i18n
- Support Google Analytics 4
- of course, No Ad!
Top Page | Article Page
-- | --
| 
| 
# Init
- Install Node.js (recommend v16.17.0^)
- Install VSCode extenstion of `Volar`
- Do `yarn install`
# Set up Contentful
Content model setting example in this project.
Tag setting example in in this project. Navigation sort order can controlled by `:order=NUM`.
# Setup env and configuration
Make sure to rename file `.env.template` to `.env` and write Contentful Identify and Token.
```
CONTENTFUL_CONTENT_KEY=
CONTENTFUL_SPACE_ID=
CONTENTFUL_ACCESS_TOKEN=
```
If you want Google Analytics, write GA_ID.
```
GA_ID=
```
# Change your site setting
Change site settings in the nuxt.config.ts to yours.
```
runtimeConfig: {
private: {
...
},
public: {
compression: true,
DEFAUTL_LANGUAGE: 'ja',
HOST: process.env.NODE_ENV === 'production' ? 'https://longrun-engineer-blog.web.app' : 'http://localhost:3000',
APP_NAME: 'tech-blog-vue3-nuxt3',
APP_URL: 'https://github.com/longrun/tech-blog-vue3-nuxt3',
SITE_TITLE: 'LongRun Engineering',
SITE_TOP_DESCRIPTION: 'Our story begins here.',
TEAM_NAME: 'LongRun Inc.',
TEAM_WEBSITE_URL: 'https://longmayyou.run',
TEAM_STATEMENT: 'Creating a world where runners don\'t have to give up',
TEAM_LOGO_IMAGE_ON_FOOTER: '/images/logo-white-bg_transparent-465x195.png',
TEAM_LOGO_BLACK: '/images/longrun-logo-black-600x315.png',
GITHUB_ORGANIZATION_URL: 'https://github.com/longrun',
GA_ID: process.env.GA_ID,
GA_APP_NAME: 'LongRun Blog',
},
},
```
# Start dev server
```
yarn dev
```
Conguraturation 🎉
Don't forget change `favicion.ico` and `appletouch-icon.png` in the ~/public directory to yours.
# Build for SSG
Check config is equals to `ssr:true` and `target:static` in `nuxt.config.ts`.
```
export default defineNuxtConfig({
ssr: true,
target: 'static',
...
```
Generate of files.
```
yarn generate
```
And you can find more deployment information from https://nuxtjs.org/deployments/
# Build for SSR
Check config is equals to `ssr:true` and `target:server` in `nuxt.config.ts`.
```
export default defineNuxtConfig({
ssr: true,
target: 'server',
...
```
Build and start local server.
```
yarn build
yarn start
```
# Package upgrade
```
yarn upgrade-interactive
```
# LICENSE
- [MIT LICENSE](./LICENSE)