ПОЛУЧАЙТЕ НОВЫЕ НАВЫКИ! Внезапно ваш сайт не работает

На собственном веб-сайте Songge есть две категории:

Один из них — www.javaboy.org, который видят все. Этот веб-сайт основан на страницах GitHub. Используемый стек технологий — hexo+icarus. Все статьи в официальном аккаунте будут синхронизированы с этим веб-сайтом.

Еще один тип — сайт электронных книг, это все больше и больше:

• maven.javaboy.org
• spring.javaboy.org
• springmvc.javaboy.org
• mybatis.javaboy.org
• springboot.javaboy.org
• vhr.javaboy.org

Этот тип стека технологий веб-сайта электронной книгиJekyll + jekyll-TeXt-theme, Этот Songge был представлен в предыдущей статье, конкретные друзья могут относиться к:Не тратя ни копейки, организуйте свои разрозненные знания в систему и превратите их в онлайн-книгу..

Недавно я видел, как другие используют vuepress для создания веб-сайта блога, и внезапно я почувствовал, что мой веб-сайт не имеет запаха. . .

Тогда хватай другой!

1. Введение в Vuepress

Подобно хорошо известному HEXO, Vuepress также можно использовать для создания статической веб-страницы. Если вы занимались разработкой Vue или понимаете микролюдей, изучивших Matsogo (github.com/lenve/vhr), вы обнаружите, что vuepress очень удобен, и его очень легко настроить, не так непривычно, как настройку hexo.

Согласно представлению официального веб-сайта vuepress, VuePress состоит из двух частей: первая часть представляет собой минималистичный генератор статических веб-сайтов, который включает в себя систему тем и плагин API, управляемый Vue, а другая часть представляет собой тему по умолчанию, оптимизированную для написания технических документов. , который был создан для поддержки потребностей в документации Vue и его подпроектов.

Каждая страница, созданная VuePress, поставляется с предварительно обработанным HTML, поэтому она имеет очень хорошую производительность загрузки и оптимизацию для поисковых систем (SEO). В то же время, как только страница загружена, Vue возьмет на себя статическое содержимое и превратит его в полноценное одностраничное приложение (SPA), а другие страницы будут загружаться только по запросу, когда пользователь просматривает их. Поэтому вам не нужно беспокоиться о том, что поисковые системы не смогут просканировать ваш сайт.

Будь то hexo или vuepress, основная цель состоит в том, чтобы позволить нам сосредоточиться на содержании, а не на создании веб-сайта.С этой точки зрения оба хороши, но для небольших партнеров с опытом разработки vue vuepress проще в использовании и настройке.

По сравнению с другими веб-сайтами электронных книг, vue, очевидно, имеет больше преимуществ, таких как:

Nuxt

Какой Vuepress может сделать, NUXT может теоретически сделать это, но NUXT построен для построения приложений, в то время как Vuepress фокусируется на компонентах, ориентированных на статические веб-сайты, при этом предоставляя некоторые пользовательские настройки для используемых функций технической документации.

Docsify / Docute

Оба проекта также основаны на Vue, однако они полностью управляются средой выполнения и, следовательно, не оптимизированы для SEO. Если вы не заботитесь о SEO и не хотите устанавливать много зависимостей, они по-прежнему являются отличным вариантом!

Hexo

Hexo всегда был основой документации Vue — на самом деле, нам, вероятно, еще предстоит пройти долгий путь, прежде чем мы перенесем наш основной сайт с Hexo на VuePress. Самая большая проблема с Hexo заключается в том, что его система тем слишком статична и слишком сильно зависит от чистых строк, и мы действительно надеемся эффективно использовать Vue для обработки нашего макета и взаимодействия В то же время конфигурация рендеринга Hexo Markdown не является самая гибкая..

GitBook

Документация нашего подпроекта использовалась GitBook. Самая большая проблема с GitBook заключается в том, что когда файлов много, время перезагрузки после каждого редактирования становится невыносимо долгим. Его структура навигации по темам по умолчанию также довольно ограничительна, и система тем не управляется Vue. Команда GitBook также теперь больше сосредоточена на том, чтобы сделать его коммерческим продуктом, а не инструментом с открытым исходным кодом.

2. Построить

2.1 Создание проекта

Конкретная конструкция на самом деле очень проста.

Сначала убедитесь, что nodejs установлен локально на компьютере (если локальная среда разработки vue завершена, дополнительная подготовка не требуется. Если вы не знакомы с vue, вы можете взглянуть на Songge’sВидеоурок по микроперсоналу).

После того, как среда будет готова, вы приступите к созданию проекта.

Сначала подготовьте новый каталог:

mkdir java-guide
cd java-guide

Затем инициализируйте каталог:

npm init

Во время процесса инициализации будет несколько запросов. Если вам нужно настроить его, вы можете настроить его. Если вам не нужно настроить его, просто нажмите Enter и, наконец, выберите Да.

Затем установите зависимости vuepress:

npm install -D vuepress

Теперь, когда мы готовы, мы готовы создать нашу первую статью.

Создайте каталог docs в каталоге java-guide, созданном в начале (имя каталога необязательно), а затем создайте файл README.md в каталоге, который будет домашней страницей нашего сайта, и напишите случайную строку в README.md в качестве тестового контента.

Затем измените package.json и добавьте две строки скрипта:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
},

docs:dev предназначен для запуска в среде разработки, а docs:build — для компиляции проекта.

После того, как вся работа будет готова, можно приступать к следующему проекту, команда запуска следующая:

npm run docs:dev

После успешного запуска проекта войдите в адресную строку браузераhttp://localhost:8080/Вы можете увидеть эффект запуска. Конечно, теперь эффект относительно прост, просто привет, javaboy!

2.2 Конфигурация домашней страницы

Текущая страница слишком проста, мы можем настроить домашнюю страницу проекта, открыть файл docs/README.md и добавить следующее содержимое:

---
home: true
heroImage: https://open.weixin.qq.com/qr/code?username=a_javaboy
heroText: 江南一点雨
tagline: Java 修炼手册
actionText: 开始学习 →
actionLink: /springboot/
features:
- title: 纯原创
  details: 不做互联网的搬运工，松哥纯手敲，纯原创教程。
- title: 成系列
  details: 成系列的教程合集，告别碎片化学习，Java 学习一步到位！
- title: 有案例
  details: 文章都有配套案例，部分系列有配套视频，扫码关注微信公众号【江南一点雨】，及时获取文档更新通知！
footer: 关注微信公众号【江南一点雨】，回复 888 ，领取 Spring Boot+Vue 项目实战资料！

---

После завершения модификации проект не нужно перезапускать.Как и vue, он будет автоматически обновлен, и браузер будет автоматически обновлен.В это время эффект отображения домашней страницы выглядит следующим образом:

2.3 Конфигурация страницы навигации

Для конфигурации навигационной страницы требуется новый профиль DOCS/.VuePress/config.js, содержимое файла следующее:

module.exports = {
    title: '江南一点雨',
    head: [
        ['link', {rel: 'icon', href: 'https://open.weixin.qq.com/qr/code?username=a_javaboy'}]
    ],
    themeConfig: {
        logo: 'https://open.weixin.qq.com/qr/code?username=a_javaboy',
        nav: [ 
            {text: '首页', link: '/'},
            {text: '国际站', link: 'http://www.javaboy.org'},
            {text: '国内站', link: 'http://www.itboyhub.com'}
        ],
        sidebar: 'auto'
    }
};

Угловой логотип браузера настраивается в шапке, а логотип — это логотип панели навигации браузера.

После завершения настройки эффект отображения выглядит следующим образом:

Как вы можете видеть, выше есть больше навигационных панелей.

Настройте панель навигации в themeConfig.nav, ссылка — это адрес ссылки панели навигации, вы можете заменить ссылку на элементы, элементы — это массив, элементы будут отображаться в виде раскрывающегося списка, например:

nav: [
    {text: '首页', link: '/'},
    {text: '国际站', link: 'http://www.javaboy.org'},
    {text: '国内站', link: 'http://www.itboyhub.com'},
    {text: '其他', items: [
        {text: '国际站', link: 'http://www.javaboy.org'},
        {text: '国内站', link: 'http://www.itboyhub.com'}
    ]}
],

2.4 Конфигурация боковой панели

Конфигурация боковой панели на самом деле является конфигурацией левого меню.

Использование Vuepress, мы пишем статьи могут классифицировать файлы, такие как следующее:

Статьи о Java помещаются в каталог java, а статьи о python — в каталог python. Мы случайным образом помещаем несколько статей в каталог.

Структура каталогов следующая:

java-guide
├─package-lock.json
├─package.json
├─docs
|  ├─README.md
|  ├─python
|  |   ├─README.md
|  |   ├─python-1.md
|  |   └python-2.md
|  ├─java
|  |  ├─README.md
|  |  ├─java-1.md
|  |  └java-2.md
|  ├─.vuepress
|  |     └config.js

В каталогах python и java пути доступа к соответствующим статьям:

• http://localhost:8080/java/java-1
• http://localhost:8080/java/java-2
• http://localhost:8080/python/python-1
• http://localhost:8080/python/python-2

Обратите внимание, что заголовок статьи должен быть отмечен вверху каждой статьи (конечно, есть и другие способы настроить заголовок статьи, Сонг Гэ рекомендует этот метод). Верхнее содержание статьи следующее:

---
title: Java01
---

При этом в каталогах java и python также находится файл README.md, путь доступа к этому файлу

• http://localhost:8080/java/

или:

• http://localhost:8080/python/

Сначала пусть все узнают путь доступа к каталогу файлов.

Затем мы настраиваем боковую панель навигации в docs/.vuepress/config.js следующим образом:

sidebar: [
    {
        title: 'Java',
        path: '/java/',
        collapsable: false,
        sidebarDepth: 2,
        children: [
            '/java/java-1',
            '/java/java-2'
        ]
    },
    {
        title: 'Python',
        path: '/python/',
        collapsable: false,
        sidebarDepth: 2,
        children: [
            '/python/python-1',
            '/python/python-2'
        ]
    },
]

После завершения настройки эффект следующий:

Конечно, существует много конкретных методов настройки.Сначала Сонге представит один из своих собственных методов использования.Чтобы узнать о других методах настройки, друзья могут обратиться к официальному сайту.

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

3.1 Универсальный

Как и hexo, vuepress в конечном итоге компилируется в статические файлы и выбрасывается на сервер, поэтому, если вы являетесь своим собственным сервером, это очень просто, сначала выполните следующую команду для компиляции:

npm run docs:build

Следующая структура каталога генерируется после успешной компиляции:

java-guide
├─docs
|  ├─.vuepress
|  |     ├─dist
|  |     |  ├─404.html
|  |     |  ├─index.html
|  |     |  ├─python
|  |     |  |   ├─index.html
|  |     |  |   ├─python-1.html
|  |     |  |   └python-2.html
|  |     |  ├─java
|  |     |  |  ├─index.html
|  |     |  |  ├─java-1.html
|  |     |  |  └java-2.html
|  |     |  ├─assets
|  |     |  |   ├─js
|  |     |  |   | ├─10.fd63f6ac.js
|  |     |  |   | ├─11.919333a2.js
|  |     |  |   | ├─2.5618c3b9.js
|  |     |  |   | ├─3.01385c65.js
|  |     |  |   | ├─4.7d5f245c.js
|  |     |  |   | ├─5.5e19538d.js
|  |     |  |   | ├─6.6523d9fe.js
|  |     |  |   | ├─7.6182cc1a.js
|  |     |  |   | ├─8.5aa56f7e.js
|  |     |  |   | ├─9.c492a2c2.js
|  |     |  |   | └app.803870cb.js
|  |     |  |   ├─img
|  |     |  |   |  └search.83621669.svg
|  |     |  |   ├─css
|  |     |  |   |  └0.styles.3f949b7f.css

Файлы в каталоге dist — это статические файлы, которые мы хотим закинуть на сервер, которые можно напрямую закинуть в каталог, соответствующий nginx.

3.2 GitHub Pages

Конечно, вы также можете использовать GitHub Pages для развертывания, избавьте себя от проблем!

Я не буду слишком много рассказывать о GitHub Pages.Для тех, кто не знает, вы можете обратиться к этим двум статьям:

• Не потратив ни цента, Сонг Гэ научит вас вести личный блог.
• Не тратя ни копейки, организуйте свои разрозненные знания в систему и превратите их в онлайн-книгу.

После подготовки репозитория GitHub создайте файл сценария Deploy.sh в корневом каталоге проекта со следующим контентом:

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
echo 'docs.javaboy.org' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:onedocs/onedocs.github.io.git master

cd -

Есть два места, которые необходимо изменить в соответствии с вашей реальной ситуацией: одно — если вам нужно настроить доменное имя, измените его на свое собственное доменное имя, а другое — учетная запись GitHub, измените ее на свое собственное.

Наконец, выполните скрипт. После выполнения проект запускается.

Если это система Windows, вы можете выполнить ее самостоятельно по командам в этом скрипте, все они относительно простые команды, поэтому я не буду их повторять.

4. Резюме

Ну а сегодня я в основном познакомил друзей с vuepress.До и после в личном блоге каждого уже познакомили всех с тремя стеками технологий:

• hexo+icarus
• Jekyll + jekyll-TeXt-theme
• vuepress

Заинтересованные друзья могут попробовать ~

Если вы чувствуете себя вознагражденным, я помню, как в какой-то момент хотел подбодрить Сун Гэ ~

Ссылаться на:

1. vuepress.vuejs.org/zh/guide