abdulrahman.id

---

Abdulrahman.id

Я решил открыть источник своего последнего веб-сайта портфолио! Он имеет динамическое управление контентом для добавления проектов и постов с использованием Cettinful CMS, и был построен с использованием hale.js и чакры пользователя.

См. Далее.

Не стесняйтесь раскошелиться на этот репозиторий, чтобы сделать свой собственный портфель, и если вам понравился репо, пожалуйста, поддержите его, дав ему звезду!

? Начните

Получение ключей API

Создайте .env.local и следуйте имени переменной на основе .env.example и получите клавиши API на основе шагов ниже

Каленый клавиш API

1. Создайте удовлетворительную учетную запись
2. Добавьте пространство сообщества (это бесплатно!)
3. Выберите "Я создаю контент"
4. Перейдите в модель контента и начните добавлять тип контента

? На этом веб -сайте портфолио он имеет 5 типа контента, который:

1. Блог -посты
После обновления ⚡2.0.0 я использую проблемы GitHub в качестве контента блога!
Более подробная информация об этом на: https://abdulrahman.id/blog/unleash-your-dev-brog-write-more-with-github-issue-as-your-cms

2. InfeedProjects
3. Проекты
4. Введение
5. ContactMe

Вы должны добавить это точное имя, так как это идентификатор, который используется в коде.

5. Добавьте тип контента в соответствии с этими полями:
   

6. Перейдите к настройкам -> API -клавишам -> Доставка контента / предварительные токены -> «Ваше пространственное имя». Скопируйте идентификатор пространства и токен API -api -контент.
   

7. Поместите его в переменные среды в соответствии с .env.example , и все готово!
   

Ключи API Firebase

1. Создайте проект Firebase
2. После настройки вещей вы получите клавиши API, сохраните их.
3. Перейдите в базу данных Firestore
4. Добавить коллекцию с именем views
5. Затем поместите эти клавиши API раньше в соответствии с .env.example , и все!

Google Analytics API -ключи

1. Создать учетную запись Google Analytics, в части настроек свойств , не забудьте включить Universal Analytics
2. После этого вы увидите код, начиная с UA-
3. Скопируйте этот код и поместите его в переменные среды в соответствии с env.example и сделано!

Запуск проекта

Установите зависимости с npm i или yarn
Начните проект от npm run dev или yarn dev

Развертывание

Вы можете легко развернуть, используя Vercel?

? Обзор

pages/index.js = домашняя страница
pages/projects/index.js = страница архива проектов
pages/blog/index.js = страница списков блога
pages/blog/[slug].js = страница сообщения в блоге
pages/api/views = API для получения просмотров в блоге из Firebase

⚙ Технический стек

• Next.js
• Чакра UI
• Conture CMS
• MDX (Next-MDX-Remote)
• Пожарная база
• Google Analytics (React-GA)