Эта статья была впервые опубликована вмой блог, Добро пожаловать в гости и оставьте сообщение для обсуждения 😊
скажи это прямо
Долгое время в моем блоге размещались статические страницы моего блога дляGithub pagesРендеринг, но как всем известно, если мы посетим GitHub в Китае, если мы не зависнемчерез стенуЕсли да, то скорость доступа очень низкая ☹️ Хотя мой блог никогда не получал большого трафика, как человек, который гонится за максимальным опытом, как я могу это терпеть 🤟.
Найти решение
Поэтому я искал в Интернете наиболее оптимизированное решение, которое, как я думал, было структурой рендеринга для создания блога или использованияHexo, но мне нужно найти нового хостинг-провайдера для хостинга страниц, поэтому я нахожусь на официальном сайте vue и знаюNetlifyЧто это за артефакт.Netlify:
Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites and web apps.
Я прочитал введение официального веб-сайта, чтобы подвести итог, он имеет следующие функции:
- Может размещать статические ресурсы
- Можно развернуть статический веб-сайт в CDN
- Непрерывное развертывание Непрерывное развертывание, когда вы отправляете изменения в репозиторий git, он автоматически запускает команду сборки для автоматического развертывания.
- Можно добавить собственное доменное имя
- Можно включить бесплатный сертификат TLS, включить HTTPS
Боже мой!!, это намного лучше, чем страницы Git 👏 Давайте сравним страницы Github:
-
Хотя github не заблокирован, скорость доступа очень низкая, а опыт для домашних пользователей крайне плохой.
-
Baidu не может его просканировать. Как мы все знаем, в Китае по-прежнему много пользователей Baidu. Если статьи, которые вы пишете, не могут быть просканированы и включены в Baidu, это все равно что-то вроде ямы.
-
Конфигурация громоздка и неудобна в использовании.Настройка сертификата HTTPS проблематична.
-
Не удается выполнить ускорение CDN. Сервер доменных имен не зарегистрирован, нельзя использовать внутреннюю службу ускорения cnd.
Итак, я собираюсь использовать Netlify в качестве хостинга своей страницы Теперь мы собираемся начать создание блога!
начать
Первый шаг, нам нужно установитьHexo
Перед установкой hexo необходимо установить следующую среду:
Установите npm после установки узла:
$ npm -g install npm
Студенты, которые не могут взобраться на стену, могут использовать зеркало npm Taobao cnpm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
Примечание. После установки зеркала исходного кода cnpm Taobao используются все команды в начале npm.
cnpmзаменить
Затем давайте установим Hexo:
$ npm install -g hexo-cli
Проверьте, прошла ли установка успешно:
$ hexo version
Затем на нашем компьютере выбираем каталог:
$ hexo init "博客目录" #使用hexo命令在指定的<folder>文件夹下初始化创建一个博客项目
$ cd "博客目录" #进入创建好的项目目录
$ npm install #使用npm安装所需依赖.
Этот недавно созданный «каталог блога» используется в качестве каталога, в котором вы будете хранить свой блог в будущем, включая конфигурацию блога, статьи и т. д. После завершения создания мы можем использовать любой редактор кода, чтобы открыть вновь созданный каталог, есть Структура каталога выглядит следующим образом:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
Примечание: будут некоторыеhexo cliПожалуйста, изучите его сами, вы будете использовать его в будущем.
Затем мы пытаемся запустить его, чтобы увидеть, может ли он успешно запуститься:
$ hexo clean #清理各种缓存和旧文件
$ hexo g #生成静态文件
$ hexo s #开启服务器预览
законченныйhexo sОкно командной строки предложит вам следующую информацию:
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
Откройте http://localhost:4000, чтобы просмотреть свой первый пост в блоге hexo.
развертывать
Далее самое интересное: введите ссылку для развертывания.Перед официальным развертыванием позвольте мне рассказать о том, что такое развертывание:
когда мы используемhexo gа такжеhexo sПосле того, как команда сгенерирована и служба запущена, тестовое доменное имя, к которому мы обращаемся локально —http://localhost:4000На самом деле он указывает на общедоступный каталог в нашем текущем каталоге, то естьhexo gКоманда создаст общедоступный каталог, который содержит файлы наших статических страниц и связанные с ними зависимости Процесс развертывания заключается в размещении файлов в этом общедоступном каталоге на нашем сервере для завершения развертывания.
Хорошо, давайте развернем его:
Синхронизировать с GitHub
Сначала перейдите на GitHub, чтобы создать новый репозиторий:
Скопируйте адрес только что созданного репозитория, например:
https://github.com/xieyezi/your-Repository.git
Вернитесь в корневой каталог проекта и свяжите свой локальный проект с вновь созданным репозиторием:
git remote add origin https://github.com/xieyezi/your-Repository.git
Создайте новый файл .gitignore в текущем корневом каталоге. Запишите файлы и каталоги, которые не нужно синхронизировать, в .gitignore:
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
themes/
.deploy*/
После этого перейдите в корневой каталог:
git add ./
git commit -m 'commit information'
Затем нажмите на GitHub:
git push --set-upstream origin master
На данный момент мы отправили наш проект в основную ветку GitHub, Далее нам нужно настроить hexo:
Открыть шестнадцатеричный корневой каталог_config.ymlФайл находит элемент развертывания:
deploy:
type: git #部署方式
repository: git@github.com:xieyezi/your-Repository.git #关联github仓库
branch: run-page #部署分支
Здесь мы создадим новый в этом репозитории проекта.run-pageВетка, а чем она полезна, я объясню позже, а сначала следуйте за мной.
После завершения настройки сохраните и выйдите, давайте выполним ее снова:
$ hexo clean #清理各种缓存和旧文件
$ hexo g #生成静态文件
Наконец, мы синхронизируем публичный каталог с Github:
$ hexo d #部署应用
При выполнении этой команды мы можем получить следующую ошибку:
$ ERROR Deployer not found: git
Это потому, что нам не хватает зависимости, давайте установим ее:
npm install hexo-deployer-git --save
Затем выполните его снова, после завершения выполнения мы найдем еще один проект в нашем проекте, когда мы зайдем на Githubrun-page, эту ветвь мы будем использовать позже для создания наших статических страниц.
Хостинг на Netlify
мы прибываем первымиNetlifyЗарегистрируйте учетную запись на официальном сайте, потому что мы размещаем проект на GitHub, поэтому для входа выбираем GitHub:
Войдите на официальный сайт и нажмите New:
Выберите источник GitHub:
Затем выберите проект, который мы только что создали:
Введите один шаг для настройки:
Затем немного подождите, Netlify автоматически сгенерирует для нас URL:
Когда он создается в первый раз, он случайным образом генерирует доменное имя второго уровня Netlify, Мы можем настроить доменное имя второго уровня и нажать «Изменить имя сайта», чтобы установить его, например:
Нажмите Сохранить и подождите, пока Netlify выполнит горячее развертывание.
Затем нажмите на созданное доменное имя второго уровня, чтобы успешно получить доступ к ✌️! ! !
После того, как мы напишем блог, мы можем напрямую выполнить:
$ hexo clean
$ hexo g
$ hexo d
Наш личный блог будет обновляться автоматически, разве это не удивительно! !
идеи
После завершения развертывания у некоторых студентов может закружиться голова.Я нарисовал блок-схему развертывания:
Вот почему мы используем две ветки, мы размещаем нашу ветку проекта вmaster, то сгенерированныйpublicкаталог, размещенный наrun-pageBranch, после того, как мы сможем написать блог, мы можем напрямую ввести:
$ hexo clean
$ hexo g
$ hexo d
Чтобы продвинуть наш блог, как только мы нажмем наrun-pageBranch, Netlify обнаруживает, что наш склад изменился, и будет извлекать и развертывать в режиме реального времени в соответствии с изменениями в этой ветке.
Привязать собственное доменное имя
Под этим пунктом на официальном сайте Netlify войдите в Настройки домена, чтобы установить:
После настройки он напомнит, что настроить разрешение доменного имени.Мой провайдер доменного имени — Alibaba Cloud, поэтому я иду в Alibaba Cloud, чтобы сделать записи разрешения:
Установите две записи, запишите значение записи как доменное имя второго уровня, предоставленное netlify, и вернитесь в netlify для просмотра результата:
Успешно отображает доменное имя, которое вы привязываете, и вы уже можете получить доступ к своему блогу через свое собственное доменное имя.
Настроить HTTPS-сертификат
Мы можем выбрать сертификат, автоматически созданный для нас netlify, он поможет вам подать заявку на бесплатный сертификат от Let's Encrypt, мы также можем использовать наш собственный сертификат, я использую бесплатный сертификат Alibaba Cloud, сначала загрузите сертификат Apache:
Затем перейдите в настройки домена Netlify, чтобы установить:
Нажмите «Установить сертификат» и дождитесь результата.
Готово (〃'▽'〃)! ! Зайдите на сайт еще раз, браузер пометил наш сайт как безопасный.
Как же вы научились этому, поторопитесь и управляйте им!!!