предисловие
Для создания личного веб-сайта мы обычно выбираемWordPress, из-за его широкого спектра использования (говорят, что 80% веб-сайтов в мире созданы с его помощью), богатого темами и простого в использовании.
В последние годы,markdownФорматы контента становятся все более популярными, и мы предпочитаем использоватьmarkdownФорматируйте для написания статей и используйте инструменты создания статических веб-сайтов для преобразования содержания статей вhtmlформат, а затем опубликовать его на личном веб-сайте. Среди инструментов для создания статических веб-сайтов лучшими являютсяJekyll,Hexo,Hugoнесколько.
Простое сравнение фреймворков динамических веб-сайтовWordPressГенерация скелетов со статическими веб-сайтамиHexo,HugoРазница:
| проект | Язык разработки | Преимущество | неудобство |
|---|---|---|---|
| WordPress | php | 1. Есть визуальная подоплека для написания статей; 2. Широкий спектр использования; 3. Богатые темы и плагины. |
1. Слишком много зависимостей приводит к медленной загрузке; 2. Требуется развертывание сервера и зависит от базы данных; 3. Необходимо регулярно создавать резервные копии данных. |
| Hexo | nodejs | 1. Статическая генерация, дружественная к SEO; 2. В экосистеме npm есть множество плагинов, которые можно использовать для расширения функций. |
1. Локальная компиляция и генерация статических файлов выполняются медленно; 2. Отладка хлопотная, часто встречаются ошибки js. |
| Hugo | go | 1. Самая быстрая скорость компиляции; 2. Очень удобно развивать темы. |
1. Текущее количество тем небольшое. |
В целом, я все еще рекомендую использоватьHugoдля создания персонального сайта.
Установить Хьюго
В системе MacOS вы можете использоватьbrewустановить.
brew install hugo
После установки его можно использовать глобальноHugoЗаказ
hugo version
Создать личный веб-сайт
hugo new site myblog
войти в созданныйmyblogкаталог, вы можете видеть, что сгенерированная структура каталогов выглядит следующим образом:
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
выберите тему
После создания сайта мы можемHugoОфициальныйтематический магазинВыберите понравившуюся тему и загрузите ее для использования.
здесь сhugo-notepadiumВозьмите эту тему в качестве примера, войдите в личный веб-сайт, созданный на предыдущем шаге, и клонируйте тему вthemesпапка:
git clone https://github.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
└── hugo-notepadium
Изменить конфигурацию веб-сайта
Изменить файл конфигурации сайтаconfig.toml, введите информацию о своем веб-сайте и используемое название темы, или вы можетеОписание темыИнформация о конфигурации в примере здесь для настройки содержимого веб-сайта.
baseURL = "https://example.com"
title = "MyBlog"
theme = "hugo-notepadium"
copyright = "©2020 my name."
Создать статью
Далее мы можем начать писать статьи:
hugo new posts/helloworld.md
Создайте новую статью. использовать в сгенерированном файлеmarkdownформат для написания содержания статьи.
---
title: "Helloworld"
date: 2020-04-19T23:56:47+08:00
draft: true
---
## 说明
> HelloWorld
这是内容
предварительный просмотр сайта
воплощать в жизньserverкоманда для предварительного просмотра всех опубликованных и редактируемых статей:
hugo server -D
Опубликовать контент
После написания статьи и предварительного просмотра вы можете изменить статус черновика статьи.draft: false, а затем скомпилируйте и создайте статический контент веб-сайта:
hugo -t hugo-notepadium
Как видите, компиляция происходит почти мгновенно. Сгенерированный статический контентpublicНиже каталога:
public
├── 404.html
├── categories
├── css
├── index.html
├── index.xml
├── page
├── posts
├── sitemap.xml
└── tags
развернуть онлайн
Самый простой способ развернуть, просто поставитьpublicСодержимое каталога загружается вGithubи использоватьGithub PagesЧтобы создать сайт, вы можете сделать это:xxx.github.ioПосле посещения вы также можете привязать собственное доменное имя.
Вы также можете написать свой собственныйshellСкрипт, для автоматической синхронизации после каждой компиляции статьиpublicсодержимое каталога дляGithubИли собственный сервер для своевременного обновления содержимого онлайн-сайта.
Суммировать
Через предыдущие шаги мы видим, что черезHugoОчень удобно создавать статические сайты, да и скорость компиляции перед публикацией тоже очень высокая. По сравнению с традиционными динамическими веб-сайтами возможным недостатком является отсутствие визуального фона, который можно добавить или изменить в любое время.markdownконтента, но на самом деле это можно сделать. Мы можем разработать собственную тему. В процессе разработки темы мы можемgetJSONполучитьAPIС помощью этой функции передаваемые динамические данные могут хорошо сочетать преимущества динамических веб-сайтов и статических веб-сайтов. Я расскажу о том, как разрабатывать собственные темы позже.
Ссылаться на
Добро пожаловать в мою официальную учетную запись или оставьте мне сообщение в области комментариев.
Оригинальный адрес чтения:я лучше, чем Cao Cao/posts/build…