Как быстро создать красивый личный блог (полная конфигурация и исходный код)

адрес блогаРуководство программиста по ростуВот как это было построено!Вы можете испытать это первым.

Почему выбирают vuepress

Раньше я использовал docsify для развертывания своего личного блога, а также раньше использовал gitbook.В этот раз я использовал vuepress для доработки версии.По собственному опыту, я сравню три

• Из опыта чтения (личное ощущение): gitbook > docsify = vuepress

• С точки зрения настройки docsify проще, чем vuepress и gitbook.

• С точки зрения производительности: vuepress > docsify

  Хотя docsify также основан на vue, docsify запускается при синтаксическом анализе, vuepress — это предварительно обработанный HTML.

• С точки зрения гибкости, vuepress также весьма доминирует.Друзья, знакомые с vue, могут писать компоненты vue для достижения желаемого функционального стиля.

функции vuepress

• Встроенные расширения Markdown, оптимизированные для технической документации
• Возможность использовать компоненты Vue в файлах Markdown
• Пользовательская система тем на базе Vue
• Автоматически генерировать Service Worker (поддержка PWA)
• Интеграция с Google Аналитикой
• «Время последнего обновления» на основе Git
• Многоязычная поддержка
• Адаптивный макет
• Поддержка режима PWA

В общем, у vuepress есть много преимуществ, особенно сайт, который я создал с помощью docsify раньше, вообще не индексировался браузером.

фактическиОфициальный сайт vuepressНаписано очень хорошо, но у моей статьи есть и плюсы, она научит строить шаг за шагом, чтобы не пришлось ходить туда-сюда в поисках какой-либо конфигурации в документе (конечно, если вы хотите учиться непосредственно через официальный сайт, вы можете напрямую проверить официальный сайт, нажмите на ссылку.)

Строительство проекта

Установить vuepress

Первый шаг — установить vuepress: если вы используете npm для установки, версия Node.js должна быть >=8.

yarn global add vuepress # 或者：npm install -g vuepress

Уведомление

Если ваш существующий проект зависит от webpack 3.x, рекомендуется использовать Yarn вместо npm для установки VuePress. Потому что в этом случае npm сгенерирует неправильное дерево зависимостей.

Инициализировать проект

Создать каталог проектовblog

mkdir blog
cd blog

инициализация

yarn init -y # 或者 npm init -y

После инициализации будет создан package.json

{
  "name":"blog",  
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
  "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
  }
}

В package.json настройте команду запуска

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

Стартовый проект:npm run docs:devЭта команда эквивалентнаvuepress dev docs

Упакованные предметы:npm run buildЭта команда эквивалентнаvuepress build docs

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

mkdir docs

Затем создайте в папке docs.vuepressпапка

cd docs
mkdir .vuepress

Этот файл в основном связан с vuepressнастроить

На данный момент общая структура нашего проекта построена, и на очереди конфигурация.

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

базовая конфигурация

Далее, чтобы страница отображала содержимое, вам необходимо настроить ее и создать новый файл общей конфигурации.config.js, имя этого файла фиксировано.

cd .vuepress
touch config.js

config.jsСамое основное содержимое файла конфигурации выглядит следующим образом:

module.exports = {
    title: 'koala的博客',
    description: '专注 Node.js 技术栈分享，从前端到Node.js再到数据库',
}

Если вы запуститеnpm run docs:devилиyarn docs:dev, появится страница 404, vuepress по умолчанию открывается в документахreadme.mdфайл, так как вы его не создавали, вы нашли страницу 404, предоставляемую vuepress по умолчанию.Для этого мы используем помощьvue-devtoolsИнструменты для просмотра структуры vue

Создано в каталоге документовREADME.mdфайл, а затем запустить, вы можете увидеть эффект запуска, как показано на следующем рисунке:

• blog001.jpg

Настроить титульную страницу

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

---
home: true
heroImage: /home.png
actionText: Get Started →
actionLink: /node/
features:
- title: day day up
  details: 记录每一天的进步, 一分耕耘，一分收获.
- title: 程序员成长指北
  details: 专注 Node.js 技术栈分享，从 前端 到 Node.js 再到 后端数据库，祝您成为优秀的高级 Node.js 全栈工程师
- title: koala
  details: 一个有趣的且乐于分享的人。座右铭：今天未完成的，明天更不会完成。
footer: MIT Licensed | Copyright © 2018-present Evan You

---

Схема эффекта выглядит следующим образом:

Настроить панель навигации

существуетconfig.jsДобавлен:

themeConfig:{
  nav: [{text: "主页", link: "/"      },
      { text: "node", link: "/node/" },
      { text: "前端", link: "/webframe/"},
      { text: "数据库", link: "/database/"   },
      { text: "android", link: "/android/"   },
      { text: "面试问题", link: "/interview/" }
    ],
}

Эффект следующий:

Если вы хотите отобразить вторичную навигацию, вы можете настроить это:

themeConfig:{
  nav: [{text: "主页", link: "/"      },
      { text: "node", link: "/node/" },
      { text: "前端", 
        items: [ 
          { text: "html", link:"/web/html/"},
          { text: "css", link:"/web/css/"},
          ]
      },
      { text: "数据库", link: "/database/"   },
      { text: "android", link: "/android/"   },
      { text: "面试问题", link: "/interview/" }
    ],
}

Эффект показан на рисунке:

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

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

Настройте слайдер боковой панели

1. Автоматически получать содержимое боковой панели

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

// .vuepress/config.js
module.exports = {
  themeConfig:{
    sidebar: 'auto',
    // sidebarDepth: 1 
  }
}

2. Отображение боковой панели каждой страницы

Если вы хотите, чтобы для разных групп страниц отображались разные боковые панели, как на официальном сайте, нажмите指南Отображается соответствующая боковая панель, а текущий каталогnode \ database \ webИ т. д., в этих каталогах хранится несколько файлов md:

module.exports = {
  themeConfig:{
    sidebar:{
      "/node/":[
        ["", "node目录"],
        ["path", "作为前端也需要知道的路径知识"],
        ["stream", "node核心模块-stream"]
      ],
      "/web/":[
        ["", "前端"],
        {
          title: "css",
          name: "css",
          collabsable: false,
          children: [
            ["css/", "目录"],
            ['css/1', "css常考面试题"]
          ]
        }
      ]
    }
  }
}

Эффект настройки следующий: существуетnodeПод навигацией:

существует前端Эффекты при навигации:

В приведенном выше примере используются два способа настройки боковой панели, одна из которыхnodeВ каталоге прямо написаны уцененные статьи, а вwebПод ним есть несколько категорий, все из которых были настроены в столбцах, На самом деле, эти два метода относительно распространены в нашем блоге.

Настроить содержимое макета

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

Создайте папку компонентов в папке .vuepress, а затем создайте ее в компонентах.fixed.vueдокумент

<template>
  <div class="fixed_container">
    <div class="tencent_code">
      <h4>关注作者公众</h4>
      <p>和万千小伙伴一起学习</p>
      <img src="/ggh.jpg" alt="">
    </div>
    <div class="group_code">
      <h4>加入技术交流群</h4>
      <p>扫描二维码 备注
        <span> 加群</span>
      </p>
      <img src="/wechat.jpg" alt="">
    </div>
  </div>
</template>
<script>
export default {
  name: 'fixed'
}
</script>
 ....
 // 这里省略了部分样式代码, 想看全部的小伙伴点开github地址就可以了
 

Затем настройте его в виде плагина в конфигурационном файле:

  // 插件
  plugins:[
    {
      name:"page-plugin",
      globalUIComponents:["fixed"], 
    }
  ]

globalUIComponentsОн используется для внедрения глобального UI, получает имена параметров в виде массива, имена здесь должны быть такими же, как в папке компонентов..vueфайл с таким же именем,Глобальный пользовательский интерфейс — это компонент Vue.; Фактически, vuepress также предоставляет некоторые встроенные глобальные компоненты пользовательского интерфейса, такие как:back-to-top, popup, nprogressЖдать.

Настроить плагин

Плагин пользовательского интерфейса

Чтобы настроить встроенный глобальный пользовательский интерфейс, вам сначала понадобится плагин:

yarn add -D @vuepress/plugin-back-to-top @vuepress/plugin-nprogress
# OR npm install -D @vuepress/plugin-back-to-top  @vuepress/plugin-nprogress

Настройте в config.js:

  plugins:[
   ["@vuepress/back-to-top"], // 返回顶部
   ["@vuepress/nprogress"],   // 加载进度条
  ]

Здесь следует отметить одну вещь: проверьте, установлен ли он в вашем проекте.vuepress, Поскольку я установил его по всему миру раньше, он не был установлен под проектом, а плагин зависит отvuepressДа, все плагины, которые не установлены, должны быть установлены до того, как плагин начнет действовать.

Поддержка PWA

Vuepress также имеет преимущество, которое я ценю больше, то есть он поддерживает PWA, Когда у пользователей нет сети, они могут продолжать посещать наш сайт.

существует0.xВ версии нам нужно только настроитьserviceWorker: true, но мы сейчас используем1.2.0Версия, эта версия убрала эту функцию как способ использования виджета ниже, чтобы посмотреть на особенности того, как использовать:

Сначала нужно установить плагин:

yarn add -D @vuepress/plugin-pwa
# 或者 npm install -D @vuepress/plugin-pwa

существуетconfig.jsСредняя конфигурация:

module.exports = {
  plugins: ['@vuepress/pwa', {
    serviceWorker: true,
    updatePopup: true
  }]
}

будь осторожен:

Чтобы сделать ваш сайт полностью совместимым с PWA, вам необходимо:

• Предоставьте манифест и значки в .vuepress/public
• существует.vuepress/config.jsдобавить правильныйhead links

// 配置
module.exports = {
  head: [
    ['link', { rel: 'icon', href: `/favicon.ico` }],
    //增加manifest.json
    ['link', { rel: 'manifest', href: '/manifest.json' }],
  ],
}

файл manifest.json

{
  "name": "koala_blog",
  "short_name": "blog",
  "version": "1.0.0",
  "description": "程序员成长指北博主, koala的博客",
  "manifest_version": 2
}

Настроить комментарии

Как сказал друг ранее, вы не можете комментировать официальный аккаунт "Programmer Growth Guide North", поэтому в этот раз я добавил функцию комментирования в блог. Изначально я планировал использовать gitTalk, но мой блог был развернут на себя. сервер, не развернутый как страницы GitHub, все, что я использую, этоvaline, в дополнение к функции комментариев, он также может подсчитывать количество чтений, см.:

Но я также позже напишу метод настройки gitTalk, который удобен для друзей, которые используют gitTalk.

использование валина

нажмите, чтобы войтиофициальный сайт валина, вам необходимо зарегистрироваться, прежде чем вы сможете использовать его.

Затем создайте приложение, получите идентификатор приложения и ключ приложения.

После создания приложения войдите в только что созданное приложение и выберите设置 > 应用Key, а затем вы можете увидеть свой идентификатор приложения и ключ приложения

• Установить:

yarn add vuepress-plugin-comment -D

• Быстрое использование

существует.vuepressВ конфигурации плагина config.js в разделе:

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'valine', 
        // options选项中的所有参数，会传给Valine的配置
        options: {
          el: '#valine-vuepress-comment',
          appId: 'Your own appId',
          appKey: 'Your own appKey'
        }
      }
    ]
  ]
}

appid и appkey — это идентификатор приложения и ключ приложения, которое вы создали.

использование gitTalk

Изменение стиля темы

Цвет темы vuepress по умолчанию — зеленый, если он вам не нравится, вы можете изменить его.Если вы хотите сделать простую замену цвета для стиля по умолчанию или настроить некоторые цветовые переменные для последующего использования, вы можете.vuepress/stylesСоздать подpalette.stylдокумент.

Цветовые переменные, которые вы можете настроить:

// 颜色
$textColor ?= #2c3e50
$accentColor ?= #1e90ff
$grayTextColor ?= #666
$lightTextColor ?= #999
$borderColor ?= #eaecef
$codeBgColor ?= #282c34
$arrowBgColor ?= #ccc
$navbarColor ?= #fff
$headerColor ?= #fff
$headerTitleColor ?= #fff
$nprogressColor ?= $accentColor
// 布局
bannerHeight ?= 12rem
// 响应式 breakpoints
MQNarrow ?= 1024px
MQMobileNarrow ?= 480px

будь осторожен:

В этот файл следует записывать только цветовые переменные. потому чтоpalette.stylбудет представлен в конце файла конфигурации корневого стилуса, как config, он будет использоваться несколькими файлами, поэтому, как только вы напишете здесь свои стили, ваши стили будут скопированы несколько раз.

Если вы хотите добавить дополнительные стили, vuepress также предоставляет удобный метод, если.vuepress/stylesсоздать файл подindex.styl, Просто пропишите в нем стиль css, обратите внимание, что имя файла фиксированное.

развертывать

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

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

Шаг 1. Убедитесь, что вы соответствуете следующим условиям.

• у тебя есть сервер
• Nginx был установлен, если нет, пожалуйста, смотритеКак установить нгинкс
• разрешает доступное доменное имя

Шаг 2: упакуйте свой проект

бегатьnpm run docs:buildУпакуйте проект, файл пакета по умолчанию находится вdocs/.vuepress/distПод содержанием

Шаг 3: Настройте nginx

Перейдите в каталог конфигурации nginx, найдите файл conf.d и добавьте следующую конфигурацию:

server {
    listen       80;
    server_name  www.inode.club;

    root     /usr/web/inode/dist;

    error_log   /var/log/nginx/inode-error.log;
    access_log  /var/log/nginx/inode-access.log;

    #        deny all;
    index  index.php index.html index.htm;
}

• server_name — адрес доменного имени, который вы разрешаете
• Путь к файлу статического ресурса, к которому будет обращаться корневой профиль.

**Шаг 4. Загрузите файлы статических ресурсов **

Поместите файл статического ресурса на сервер с настроенным путем/usr/web/inode/dist, Вы можете загрузить с помощью инструмента xftp или клонировать через git, просто выберите способ, который вам подходит

**Шаг 5: Перезапустите nginx**

# 重启之前务必检查配置是否正确
sudo nginx -t  // 检查配置
sudo nginx -s reload  // 重启

Тогда вы сможете получить доступ к своему сайту через доменное имя!

развертывание на гитхабе

Чтобы развернуть код на Github Pages, вы можете посмотреть документацию vuepress:развертывание vuepress, также обратитесь к шагам, которые я написал здесь, чтобы развернуть

Шаг 1: Сначала убедитесь, что ваш проект соответствует следующим условиям:

• Документация размещена в каталоге docs
• Использование расположения вывода сборки по умолчанию
• vuepress устанавливается в ваш проект как локальная зависимость в корневом каталогеpackage.jsonФайл содержит следующий код:

// 配置npm scripts
"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
 }

// VuePress 以本地依赖的形式被安装
"devDependencies": {
  "vuepress": "^1.2.0"
}

Шаг 2: Создайте репозиторий на github

Создайте репозиторий с именем blog на github и отправьте код на github.

Шаг 3: Настройте имя репозитория

настроитьdocs/.vuepress/config.jsбазу в файле, если собираетесь публиковать наhttps://<USERNAME>.github.io/<REPO>/(Это означает, что ваш репозиторий находится по адресу:https://github.com/<USERNAME>/<REPO>), вот мой склад: блог, то базу можно настроить так:

module.exports = {
  base: "/blog/"
}

Шаг 4: В корневом каталоге проекта создайте файл сценария следующим образом.deploy.sh

#!/usr/bin/env sh

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

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

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

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

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# 例如 git push -f git@github.com:koala-coding/blog.git master:gh-pages 
cd -

Шаг 5. Дважды щелкните файл deploy.sh, чтобы запустить скрипт.

автоматически создаст ветку с именем gh-pages в нашем репозитории GitHub, и именно эту ветку мы хотим развернуть на GitHub Pages.

Шаг 6: Настройка страниц GithubЭто последний шаг.Нажмите кнопку «Настройка» в проекте GitHub, найдите GitHub Pages — Source, выберите ветку gh-pages, нажмите кнопку «Сохранить» и дождитесь завершения развертывания.

адрес проекта

мой веб-сайтРуководство программиста по ростуВот как это было построено!

Контент, реализованный в этой статье, был загружен на github, если вы не хотите настраивать его шаг за шагом, вы можете скачать его напрямую и использовать, вам не нужно повторять колесо!

Небольшие партнеры, которым нужен исходный код блога, могут напрямуюобщественное закулисьеОтвечать【блог] или свяжитесь со мной напрямую.

Справочная статья

• https://juejin.cn/post/6844903805088186375

В этой статье используетсяmdniceнабор текста

Подписывайтесь на меня

Об авторе: koala, сосредоточив внимание на совместном использовании полного стека технологий Node.js, от JavaScript до Node.js, до серверной базы данных, я желаю вам стать отличным старшим инженером Node.js. [Руководство по развитию программиста] Автор, блог Github с открытым исходным кодомGitHub.com/koala-co Nth…

• Добро пожаловать, чтобы добавить меня на WeChat 【ikoala520 】, привлекать васNode.jsПродвинутая продвинутая группа, долгосрочный обмен и обучение...
• Добро пожаловать, чтобы обратить внимание на «Руководство по развитию программиста на севере», общедоступную учетную запись, которая поможет вам расти с душой...