О блоге
этот блогОн основан на Vuepress1.X для сборки. Запишите некоторые технические знания. Вот как создать технический блог с нуля с помощью Vuepress.
Введение в Вуперсс
VuepressЭто генератор статических веб-сайтов в экосистеме Vue.Он имеет хорошую поддержку технических блогов, меньше настроек, быстрый старт и приятный стиль пользовательского интерфейса. Этот блог-сайт создан с использованием Vuepress1.x. В дополнение к этому блогу следующие веб-сайты также используют vuepress.
Начинать
- По умолчанию на вашем компьютереNodeокружающая обстановка
- Node.jsверсия больше, чем8.6
- Если вы читали официальную документацию, то лучше
В этом руководстве мы создадим в общей сложности два проекта на github, один для написания блогов, а другой для отображения блогов. На самом деле, вы также можете синтезировать проект в зависимости от личных предпочтений.
Установить vuepress
В этом блоге используется vuepress1.X, поэтому при установке его нужно установить так:
yarn global add vuepress@next // OR npm install -g vuepress@next
Если вы хотите использовать vuepress0.X, следуйте приведенному ниже методу установки.
yarn global add vuepress // OR npm install -g vuepress
Между двумя версиями для начинающих создавать блоги небольшая разница, поэтому в этом блоге рекомендуется использовать vuepress1.X.
Создать блог-проект
Он разделен на четыре части
- Создайте первоначальный проект и сможете вести блог с помощью vuepress
- Настроить навигацию и боковую панель
- построить и опубликовать
- Автоматическое развертывание
Перед тем, как начать, я создал структуру каталогов своего блога:
Часть 1: Создание проекта
Создайте новую папку для записи блога и инициализируйте проект в первой части.
mkdir writ-blog
cd writ-blog
npm init -y
mkdir docs // 这个文件夹是放置所有博客的地方
cd docs
touch README.md //创建reademe文件，即首页
Инициализированная структура каталогов выглядит следующим образом:
.
├─ docs
│ └─ README.md
└─ package.json
Уведомление Папка docs — это папка, в которой находятся все ваши блоги.Файл README.md в корневом каталоге папки docs станет домашней страницей вашего веб-сайта блога после компиляции vuepress! ! !
Напишите следующее в файле README.md в папке docs и каталоге:
---
home: true
heroImage: /logo.png
actionText: 介绍 →
actionLink: /blog/
features:
- title: 框架
details: Vue、React、Abgular、Flutter的学习和实践。
- title: 工作笔记
details: 好记性不如烂笔头，记录平时工作中遇到的一些问题和解决方法。
- title: 前端可视化
details: 前端方面可视化的知识，包括webgl,canvas,glsl等。
- title: 后端
details: 前端怎么能不了解一些后端知识呢？ 一些个人对后端的学习和实践。
- title: 开发环境配置
details: 有时候开发环境的配置也是很头疼的，windows和mac下面又各不一样，工具的熟练程度直接决定开发速度，所以留文待查吧。
footer: MIT Licensed | Copyright © 2019-present chenfeng
---
Уведомление: Этот файл является домашней страницей (index.html) вашего блога, ````'home: true'```, обязателен
После инициализации добавьте в скрипт в package.json две команды:
"dev": "vuepress dev docs",
"build": "vuepress build docs",
затем выполнитьnpm run dev, открыть в браузереСлужить, появится страница, которая выглядит так
Часть 2. Настройка навигации и боковых панелей
Структура каталогов второй части выглядит следующим образом:
.
├─ .vuepress
│ └─ config.js
├─ docs
│ └─ README.md
└─ package.json
Вы заметите, что есть дополнительный.vuepresПапка, конфигурация Vuepress находится в этой папке, следующая описывает конфигурацию панели навигации и боковой панели..vuepress/configБазовая конфигурация в следующем:
module.exports = {
title: 'chenfeng\'s blog',
description: 'chenfeng的个人博客',
}
Когда вы выполните вышеуказанные шаги, ваша локальная среда разработки должна отобразить страницу с заголовком и описанием.
Следующее содержимое конфигурации является конфигурацией моего веб-сайта:
module.exports = {
title: 'chenfeng\'s blog',
description: 'chenfeng的个人博客',
head: [ // 注入到当前页面的 HTML <head> 中的标签
['link', { rel: 'icon', href: '/logo.png' }], // 增加一个自定义的 favicon(网页标签的图标)
['link', { rel: 'manifest', href: '/logo.png' }],
['link', { rel: 'apple-touch-icon', href: '/logo.png' }],
['link', { rel: 'mask-icon', href: '/logo.png', color: '#3eaf7c' }],
['meta', { 'http-quiv': 'pragma', cotent: 'no-cache' }],
['meta', { 'http-quiv': 'expires', cotent: '0' }],
['meta', { 'http-quiv': 'pragma', cotent: 'no-cache, must-revalidate' }]
],
serviceWorker: true, // 是否开启 PWA
base: '/', // 这是部署到github相关的配置
markdown: {
lineNumbers: true // 代码块显示行号
},
themeConfig: {
nav: [
{ text: '主页', link: '/' },
{
text: '基础', items: [
{ text: 'JavaScript', link: '/basis/JavaScript/' },
{ text: 'HTML', link: '/basis/HTML/' },
{ text: 'CSS', link: '/basis/CSS/' },
{ text: 'TypeScript', link: '/basis/CSS/' },
]
},
{
text: '框架', items: [
{ text: 'Vue', link: '/frame/Vue/' },
{ text: 'React', link: '/frame/React/' },
{ text: 'Angular', link: '/frame/Angular/' },
{ text: 'Flutter', link: '/frame/Flutter/' }
]
},
{ text: '工作笔记', link: '/work/' },
{ text: '前端可视化', link: '/visualization/' },
{ text: '环境配置', link: '/devconfig/' },
{ text: 'Github', link: 'https://github.com/soyomo' }
],
sidebar: {
'/blog/': getSidebar('blog'),
'/frame/': getSidebar('frame'),
'/basis/': getSidebar('basis')
},
sidebarDepth: 2, // 侧边栏显示2级
}
};
function getSidebar(barName) {
const sidebar = {
frame: [
'/frame/',
'/frame/Vue/',
'/frame/React/',
'/frame/Angular/'
],
blog: [
'/blog/'
],
basis: [
]
}
return sidebar[barName]
}
Если вы считаете, что файл слишком длинный, вы можете упомянуть навигацию и боковую панель в отдельном файле. мой.vuepressСтруктура файлового каталога выглядит следующим образом:
вnav.jsСодержание следующее:
module.exports = [
{ text: '主页', link: '/' },
{
text: '基础', items: [
{ text: 'JavaScript', link: '/basis/JavaScript/' },
{ text: 'HTML', link: '/basis/HTML/' },
{ text: 'CSS', link: '/basis/CSS/' },
{ text: 'TypeScript', link: '/basis/CSS/' },
]
},
{
text: '框架', items: [
{ text: 'Vue', link: '/frame/Vue/' },
{ text: 'React', link: '/frame/React/' },
{ text: 'Angular', link: '/frame/Angular/' },
{ text: 'Flutter', link: '/frame/Flutter/' }
]
},
{ text: '工作笔记', link: '/work/' },
{ text: '前端可视化', link: '/visualization/' },
{ text: '环境配置', link: '/devconfig/' },
{ text: 'Github', link: 'https://github.com/soyomo' }
]
Затем импортируйте этот файл вconfig.jsЭтого достаточно, в это время навигация еще не может работать, потому что вы не найдете путь. Поэтому необходимо установить соответствующие папки для навигации.Эти папки встроены вdocsВ следующем каталоге файлы, соответствующие каждой странице блога, находятся в следующем каталоге документов! ! ! После того, как эти папки установлены, необходимо создать файл README.md, потому что, когда ваш путь записывает только папку, этот файл соответствует пути по умолчанию в vuepress. Каталог файлов моих документов выглядит следующим образом:
При запуске проекта в это время страница, соответствующая каждой панели навигации, должна быть пустой страницей.
оdocs/.vuepress/publicэта папка:
Это для хранения публичных ресурсов.В эту папку я помещаю логотип своего блога.Рекомендуется размещать статические ресурсы каждого блога в каталоге блога вместо того, чтобы выкладывать их все в публичный доступ. Например: я поместил все изображения в этом уроке в каталог, соответствующий этой статье:
blogПуть к папке:write-blog/docs/blog;
оpwaизmanifestКонфигурацию также необходимо поместить в эту папку. Содержимое файла manifest.json:
{
"name": "chenfeng",
"short_name": "feng",
"start_url": "index.html",
"display": "standalone",
"background_color": "#2196f3",
"description": "个人网站",
"theme_color": "blue",
"icons": [
{
"src": "./logo.jpg",
"sizes": "144x144",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "web"
},
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
}
]
}
Пока вторая часть закончилась.
Часть 3: Сборка и выпуск
В этом разделе нужно создать новый проект на github, мой проектпроект, на самом деле этот проект так называемый GitHub Pages, после создания нового проекта он должен быть в настройках проекта,
{你的用户名}.github.io, а затем у вас есть gitpage, к которому вы можете получить доступ напрямую по этой ссылке.https://{username}.github.io/;
После этого вам нужно добавить следующую команду в package.json в вашем проекте записи блога:
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"deploy": "bash deploy.sh",
},
И вwrite-blogСоздайте новый в папке с файломdeploy.shфайл, содержание следующее:
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm install -g vuepress@next
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f https://${token}@${address} master:master
git push -f git@github.com:{你的用户名}/{你的用户名}.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
Затем выполнитеnpm run deploy, который затем будет опубликован в{username}.github.ioЭтот проект исчез и доступен через подключение. Таким образом, вы можете в основном вести блог, но вы должны идти каждый раз, когда заканчиваете писать.npm run deployЭто не очень удобно, тогда вам поможет автоматическое развертывание.
Часть 4: Автоматическое развертывание Travis
дляtravis, если не слышали, вот статьяНачало работы Учебное пособиедовожу до вашего сведения. Этот раздел разделен на три части:
- Войдите на сайт travis под своей учетной записью github.
- Подать заявку на получение токенов личного доступа на github
- Установка переменных окружения в travis
Подать заявку на получение токенов личного доступа
идтиgithub settingПодать заявку на токен личного доступа
Установите переменные среды: 100:
Перейдите к разделу «Дополнительные параметры» в вашем проекте на travis (справа вверху на изображении ниже):
Это "Дополнительные параметры" проекта записи блога. Проект soyomo.github.io - это просто пустая оболочка. Он полезен только в двух местах. Первое - создать его в соответствии со спецификациями gitpage; второе - установить среду в travis при развертывании.Адрес github этого проекта используется, когда используется адрес переменной. Нет другого времени.
github.com/soyomo/soyomo.github.io.git). После добавления измените содержимое git push в файле deploy.sh в проекте следующим образом:
!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm install -g vuepress@next
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
git push -f https://${token}@${address} master:master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
Затем создайте каталог в корневом каталоге проекта..travis.ymlфайл со следующим содержимым:
sudo: required
language: node_js
node_js: stable
script: bash ./deploy.sh
branches:
only:
- master
notifications:
email: false
Таким образом, когда вы отправите модификацию проекта Write-Blog, Трэвис автоматически создаст ваш{username}.github.ioпроект.
сообщить об ошибке
Когда я впервые развернулся, я не пошел на github, чтобы подать заявку на токен, что привело к ошибке на travis.Если вы столкнулись с этой ошибкой:
следовать за
После вышеуказанных шагов простым сайтом блога уже рождается в вашей руке. В это время вы должны пойти купить чашку кофе или есть большую еду, чтобы вознаградить себя: TADA :: TADA :: TADA :, Но это это место, где блог не комментирует?
Добавить комментарий Система
Перед добавлением комментариев нужно подготовить clientID и clientSecret, генерация этих двух вещей здесьRegister a new OAuth application,
Мой блог теперь использует: Vssue.VssueЭто Vue-управляемый плагин, основанный на задачах, который очень удобно использовать в vuepress.здесьЭто официальная документация по использованию VSSUE в Vuepress. Неважно, если вы не хотите его читать. На самом деле, в общей сложности всего два шага.
Первый шаг — установка плагина
npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3
Второй шаг — использовать плагин
существует.vuepress/config.jsДобавьте плагины к:
plugins: {
'@vssue/vuepress-plugin-vssue': {
// 设置 `platform` 而不是 `api`
platform: 'github',
locale: 'zh', // 语言设置
// 其他的 Vssue 配置
owner: 'OWNER_OF_REPO', // 你的github账户名称
repo: 'NAME_OF_REPO', // 你的Github博客仓库 我填的是soyomo
clientId: 'YOUR_CLIENT_ID', // 你在github上面申请的clientId
clientSecret: 'YOUR_CLIENT_SECRET', // 在github上面申请的clientSecret
},
},
Затем используйте его в документе MD в качестве компонента, то есть добавить это предложение в нижней части документа MD:
<Vssue title="Vssue Demo" />
Альтернатива системе комментариев
Первая редакция моего блога использовалаgittalkЧтобы реализовать комментарии, принцип gittalk заключается в использовании проблемы github для реализации блогов комментариев. Конкретная реализация находится в.vuepress/enhanceApp.jsв файле. оenhanceApp.jsКонтент может ссылаться на vuepressофициальная документация, в этом проекте блога вам нужно всего лишь ввести в файл следующий код:
function integrateGitalk(router) {
const linkGitalk = document.createElement('link');
linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
linkGitalk.rel = 'stylesheet';
document.body.appendChild(linkGitalk);
const scriptGitalk = document.createElement('script');
scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
document.body.appendChild(scriptGitalk);
router.afterEach((to) => {
if (scriptGitalk.onload) {
loadGitalk(to);
} else {
scriptGitalk.onload = () => {
loadGitalk(to);
}
}
});
function loadGitalk(to) {
let commentsContainer = document.getElementById('gitalk-container');
if (!commentsContainer) {
commentsContainer = document.createElement('div');
commentsContainer.id = 'gitalk-container';
commentsContainer.classList.add('content');
}
const $page = document.querySelector('.page');
if ($page) {
$page.appendChild(commentsContainer);
if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
renderGitalk(to.fullPath);
}
}
}
function renderGitalk(fullPath) {
const gitalk = new Gitalk({
clientID: '****', // 在github上生成的
clientSecret: '****', // 在github上生成的 come from github development
repo: '****', // 你的博客的仓库名称
owner: '****', // 你在githug上的用户名称
admin: ['****'], // 管理成员
id: 'comment',
distractionFreeMode: false,
language: 'zh-CN',
});
gitalk.render('gitalk-container');
}
}
export default ({Vue, options, router}) => {
try {
document && integrateGitalk(router)
} catch (e) {
console.error(e.message)
}
}
Следует отметить, что поскольку наш проект использует 'write-blog' в среде разработки, а репо в конфигурации заполнено именем проекта блога, это приведет к неудачному входу в среду разработки, но если разработка Среда есть Если часть про комментарии уже есть, значит конфигурация прошла успешно.