Рубрики
Без рубрики

Создайте блог, используя генератор Nikola Static Generator

Вы также можете прочитать эту статью в моем блоге или на среде! Если вы не знаете, что такое Никола, это … С тегом блога, учебника, Python, Nikola.

Вы также можете прочитать эту статью о моей блог или же на средний !

Если вы не знаете, что такое Nikola, это статический генератор веб -сайтов/блога (например, Gatsby и другие инструменты). Он написан на Python, и он работает из коробки для отмены Markdown, RST, Latex Math Math Formula и файлов Notebook Jupyter.

Мне нравится понимать, что я использую, и подталкивать его к некоторым пределам, чтобы действительно получить от этого то, что я хочу, и создание блога с Николой не было исключением. Здесь я попытался подвести итог всех информаций, которые я нашел, и все эксперименты, которые я провел. Надеюсь, тебе понравится! 🙏 🏼

1) Монтаж

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

Как только вы создаете свою виртуальную среду:

pip install --upgrade pip setuptools wheel
pip install --upgrade "Nikola[extras]"

2) Создать блог

После установки Nikola создание вашего сайта будет очень простым, просто используйте команду nikola init Анкет Вы можете добавить -Демо Аргумент, если вы хотите, чтобы веб -сайт был построен с демо -контентом.

Все конфигурации сделаны в одном conf.py Файл, в корне папки вашего блога.

Теперь вы можете построить свой сайт и посмотреть, как он выглядит. Используйте команду Никола Авто Для использования сервера с автоматическими восстановлениями, когда в ваших файлах обнаруживается изменения. Посетите http://128.0.0.1:8000 Чтобы увидеть ваш сайт.

3) Добавить сообщение

Теперь, если вы хотите добавить пост в своем блоге, вы должны использовать команду Никола новый пост (По умолчанию используйте формат реструктурированного текста, добавьте -f Markdown Если я, как и я, предпочитает писать в Markdown). CLI запросит название вашего сообщения в блоге, а затем создаст файл в папке Сообщения/*. MD Анкет

4) Включить формат файла ноутбука Jupyter

Просто добавьте *.ipynb как узнаваемые форматы:

POSTS = (
    ("posts/*.rst", "blog", "post.tmpl"),
    ("posts/*.md", "blog", "post.tmpl"),
    ("posts/*.txt", "blog", "post.tmpl"),
    ("posts/*.html", "blog", "post.tmpl"),
    ("posts/*.ipynb", "blog", "post.tmpl"), # new line
)
PAGES = (
    ("pages/*.rst", "", "page.tmpl"),
    ("pages/*.md", "", "page.tmpl"),
    ("pages/*.txt", "", "page.tmpl"),
    ("pages/*.html", "", "page.tmpl"),
    ("pages/*.ipynb", "", "page.tmpl"), # new line
)

Вы можете создать сообщение в блоге с nikola new_post -f ipynb Или добавьте свою записную книжку Jupyter в свой Сообщения папка. Не забудьте добавить и настроить эту строку в метаданных файла ноутбука Jupyter, если вы не позволяете Nikola создать файл для себя:

"nikola": {
   "category": "",
   "date": "2020-03-28 16:27:51 UTC+01:00",
   "description": "",
   "link": "",
   "slug": "jupyter-notebook-test",
   "tags": "",
   "title": "Jupyter Notebook Test",
   "type": "text"
  }

5) Использование Markdown для вашего поста

Никола обрабатывает файлы разметки по умолчанию. Мета создается автоматически при использовании Nikola new_post Но я предпочитаю делать это по -другому. Добавьте markdown.extensions.meta к вашему conf.py файл.

MARKDOWN_EXTENSIONS =
 ['markdown.extensions.fenced_code',
  'markdown.extensions.codehilite',
  'markdown.extensions.extra',
  'markdown.extensions.meta']

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

Title: Test post in markdown
Date: 2020-04-01
Slug: test-post
Tags: markdown, test
Categories: Tutorial

В своей ситуации я решил использовать Pandoc Вместо компилятора Markdown по умолчанию. Я сделал это, потому что у меня часто есть кодовые блоки, вложенные в пронумерованный список или пули, а компилятор разметки по умолчанию не делает их должным образом. Это также теряет пронумерованный список иногда, тогда как Pandoc делает абсолютную отличную работу. Спасибо этому Отличный пост в блоге Это объясняло, как это сделать!

Использовать Pandoc Вместо отметки по умолчанию вам нужно сначала установить его. Вы можете использовать Заварите установить Pandoc Если у вас есть Mac или вы смотрите Здесь Для получения дополнительных инструкций. Тогда вы можете изменить эти строки в conf.py :

COMPILERS = {
    "rest": ('.rst', '.txt'),
    # "markdown": ('.md', '.mdown', '.markdown'),
    "textile": ('.textile',),
    "txt2tags": ('.t2t',),
    "bbcode": ('.bb',),
    "wiki": ('.wiki',),
    "ipynb": ('.ipynb',),
    "html": ('.html', '.htm'),
    # PHP files are rendered the usual way (i.e. with the full templates).
    # The resulting files have .php extensions, making it possible to run
    # them without reconfiguring your server to recognize them.
    "php": ('.php',),
    # Pandoc detects the input from the source filename
    # but is disabled by default as it would conflict
    # with many of the others.
    "pandoc": ('.md', 'txt'),
}
...
PANDOC_OPTIONS = ['-f', 'gfm', '--toc', '-s']

Посмотрите, как я прокомментировал компилятор Marckdown и некомментирован Pandoc для .md файлы Последние два Pandoc_options (–toc и -s) используются для автоматического генерации таблицы контента на выходе сгенерированного HTML.

После того, как вы используете Pandoc для составления файла Markdown, для создания нового сообщения в блоге в Markdown вам нужно использовать эту команду Nikola new _post -f pandoc И больше не отмечать.

Добавить исключительно Pandoc в качестве компилятора Markdown, к сожалению, недостаточно, потому что мы теряем способность использовать Code_color_scheme вариант в конфу.py. Одно решение – использовать Pandoc сгенерировал CSS для одной из его темы Code Hight (Kate в моем случае).

Создать Custom.css Файл в файлы/активы/CSS/ как объяснил здесь И добавьте этот код CSS:

code {white-space: pre-wrap;}
span.smallcaps {font-variant: small-caps;}
span.underline {text-decoration: underline;}
div.column {display: inline-block; vertical-align: top; width: 50%;}

a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; position: absolute; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; }
pre.numberSource a.sourceLine:empty
  { position: absolute; }
pre.numberSource a.sourceLine::before
  { content: attr(data-line-number);
    position: absolute; left: -5em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    background-color: #ffffff;
    color: #a0a0a0;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #a0a0a0;  padding-left: 4px; }
div.sourceCode
  { color: #1f1c1b; background-color: #ffffff; }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span. { color: #1f1c1b; } /* Normal */
code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */
code span.an { color: #ca60ca; } /* Annotation */
code span.at { color: #0057ae; } /* Attribute */
code span.bn { color: #b08000; } /* BaseN */
code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */
code span.cf { color: #1f1c1b; font-weight: bold; } /* ControlFlow */
code span.ch { color: #924c9d; } /* Char */
code span.cn { color: #aa5500; } /* Constant */
code span.co { color: #898887; } /* Comment */
code span.cv { color: #0095ff; } /* CommentVar */
code span.do { color: #607880; } /* Documentation */
code span.dt { color: #0057ae; } /* DataType */
code span.dv { color: #b08000; } /* DecVal */
code span.er { color: #bf0303; text-decoration: underline; } /* Error */
code span.ex { color: #0095ff; font-weight: bold; } /* Extension */
code span.fl { color: #b08000; } /* Float */
code span.fu { color: #644a9b; } /* Function */
code span.im { color: #ff5500; } /* Import */
code span.in { color: #b08000; } /* Information */
code span.kw { color: #1f1c1b; font-weight: bold; } /* Keyword */
code span.op { color: #1f1c1b; } /* Operator */
code span.ot { color: #006e28; } /* Other */
code span.pp { color: #006e28; } /* Preprocessor */
code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */
code span.sc { color: #3daee9; } /* SpecialChar */
code span.ss { color: #ff5500; } /* SpecialString */
code span.st { color: #bf0303; } /* String */
code span.va { color: #0057ae; } /* Variable */
code span.vs { color: #bf0303; } /* VerbatimString */
code span.wa { color: #bf0303; } /* Warning */

Теперь ваши кодовые блоки должны быть выделены. Вам решать, что это будет на заказ дальше, чтобы изменить цвет цвета или все такое.

Я также хотел стилизовать таблицу контента:

.p-summary.entry-summary #TOC {
  display: None; /* disable showing the TOC in my blog home page teasers */
}

#TOC {
  background-color: #e9f8f8;
  border-radius: 3px;
  padding: 18px 0px 1px 6px;
  margin-bottom: 20px;
}

6 ) Страницы против постов

У Никола есть два типа для записей на вашем веб -сайте, сообщения и страницы.

Посты

Это ваши сообщения в блоге. Сообщения добавляются в каналы, индексы, списки тегов и архивы.

Страницы

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

Например, на страницах у меня есть следующие страницы:

  • Резюме (HTML)
  • CheatSheet (HTML)

7) Настройка навигационной панели

Настройка верхней панели навигации выполняется, опять же, в conf.py файл.

NAVIGATION_LINKS = {
    DEFAULT_LANG: (
        ("/resume/", "Resume"),
        ("/cheatsheet/", "Cheatsheet"),
        ("/archive/", "Archive"),
    )
}

Это пример того, как я сделал свой.

8) Индексы в виде списка ссылок или списка сообщений

Никола позволяет вам классифицировать посты несколькими способами, такими как категория, теги, архивы и авторы. Для каждого способа категоризации генерируется связанная страница индекса, чтобы зрители могли видеть все доступные посты ( _Pages_are_Indexes ) или ссылки, связанные с этой категорией ( _Pages_are_indexes ).

Вы можете выбрать для этих индексов составить список полных сообщений (или Показатели тизеры вместо полного поста ) или список ссылок на каждый пост. В зависимости от ваших потребностей, вы можете изменить любые из следующих настройки индекса в conf.py к истинному.

CATEGORY_PAGES_ARE_INDEXES = False
TAG_PAGES_ARE_INDEXES = False
ARCHIVES_ARE_INDEXES = False
AUTHOR_PAGES_ARE_INDEXES = False

Это то, что делает Никола таким настраиваемым. Например, поскольку категорий меньше, и у вас может быть больше сообщений по каждой категории, вы можете захотить их в качестве списка ссылок. В качестве альтернативы, с тегами их обычно больше, поэтому по каждым тегам меньше сообщений, поэтому вам нужен список сообщений.

9) Включить систему комментариев

Поскольку статические сайты не имеют баз данных, вам необходимо использовать стороннюю систему комментариев, как задокументировано на официальном документе.

  1. Подпишитесь на учетную запись на https://disqus.com/ Анкет
  2. На Disqus выберите «Создать новый сайт» (или посетите https://disqus.com/admin/create/ ).
  3. Во время конфигурации обратите внимание на «ShortName», которое вы используете. Другие конфигурации не очень важны.
  4. В «Выберите план», выбрать базовый бесплатный план.
  5. На «Select Platform» просто пропустите инструкции. Нет необходимости вставлять «универсальный код» вручную, поскольку он встроен в Никола. Держите все по умолчанию и завершите конфигурацию.

В conf.py , добавьте свое короткое имя Disqus:

COMMENT_SYSTEM = "disqus"
COMMENT_SYSTEM_ID = "[disqus-shortname]"

Развернуть в GitHub, и теперь система комментариев должна быть включена.

10) Развертывание вашего сайта

Мой рабочий процесс разделен на две части:

  1. GitHub Pages
  2. NetLify

GitHub Pages

Я решил разместить свои файлы блога на GitHub и использовать их бесплатный сервис Github Pages, чтобы развернуть мой блог по этому адресу https://mattioo.github.io .

Для этого вам нужно будет иметь GitHub учетная запись и включить GitHub Pages Анкет После того, как вы создали свой репозиторий, как объяснено для страниц GitHub, инициализируйте GitHub в своем исходном каталоге

git init .
git remote add origin https://github.com//.github.io

conf.py должны иметь следующие настройки.

GITHUB_SOURCE_BRANCH = 'src'
GITHUB_DEPLOY_BRANCH = 'master'
GITHUB_REMOTE_NAME = 'origin'
GITHUB_COMMIT_SOURCE = True

Создать .gitignore Файл со следующими записями как минимум. Вы можете использовать gitignore.io Чтобы генерировать подходящий набор .gitignore Записи для вашей платформы, вводя в соответствующие теги (например, Mac, Никола , Jupyternotebooks).

cache
.doit.db
__pycache__
output
ipynb_checkpoints
*/.ipynb_checkpoints/*

С помощью Nikola github_deploy Команда, это создаст SRC ветвь, которая будет содержать ваше содержимое (то есть *.ipynb , *.md и а Мастер ветвь, которая будет содержать только ваши выходные страницы HTML, которые просматриваются браузером.

nikola github_deploy

NetLify дополнительные шаги

Из -за Все эти причины Я хотел использовать NetLify для развертывания моего блога с помощью пользовательских доменов, www.brainsorting.dev Анкет Я просто настроил триггер на NetLify, чтобы начать создавать свой блог, когда он обнаруживает какой -либо новый толчок в моем репозитории блога GitHub. Это так же просто, как сказано, все работает из коробки, а услуга, предоставляемая NetLify, была очень стабильной и дала мне очень хорошую статистику SEO.

11) Архив

У Николы есть много вариантов того, как вы отобразили свой архив постов. Я держал это довольно просто с моей стороны.

# Create per-month archives instead of per-year
CREATE_MONTHLY_ARCHIVE = False
# Create one large archive instead of per-year
CREATE_SINGLE_ARCHIVE = False
# Create year, month, and day archives each with a (long) list of posts
# (overrides both CREATE_MONTHLY_ARCHIVE and CREATE_SINGLE_ARCHIVE)
CREATE_FULL_ARCHIVES = False
# If monthly archives or full archives are created, adds also one archive per day
CREATE_DAILY_ARCHIVE = False
# Create previous, up, next navigation links for archives
CREATE_ARCHIVE_NAVIGATION = False
ARCHIVE_PATH = "archive"
ARCHIVE_FILENAME = "archive.html"

12) Контент нижний колонтитул

Я использую рекомендованную лицензию:

LICENSE = """

Creative Commons License BY-NC-SA"""

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

CONTENT_FOOTER = '''


''' + MAILCHIMP_SIGNUP + '''


Contents © {date} {author}   - Powered by Nikola {license} - favicon FlatIcon




'''

13) Рендеринг математических уравнений

Я включил Katex, потому что это красивее с $ ... $ Синтаксис как более похожий на латекс.

USE_KATEX = True
KATEX_AUTO_RENDER = """
delimiters: [
    {left: "$$", right: "$$", display: true},
    {left: "\\\\[", right: "\\\\]", display: true},
    {left: "\\\\begin{equation*}", right: "\\\\end{equation*}", display: true},
    {left: "$", right: "$", display: false},
    {left: "\\\\(", right: "\\\\)", display: false}
]
"""

14) Реализация инструментов Google

поиск Гугл

Я включил форму поиска Google для поиска на моем сайте.

SEARCH_FORM = """
 
""" % SITE_URL

Гугл Аналитика

Google Analytics может быть добавлена в нижнюю часть функционировать.

BODY_END = """



"""

15) Настройка вашего блога

Настройка темы и шаблона

Чтобы создать новую тему, мы можем использовать следующую команду, которая создаст новую папку в темах, называемых Бенсортинг Анкет Он использует механизм шаблона Mako, а родительская тема – Bootstrap4 . Мы не обязательно хотим создавать тему с нуля, поэтому мы основываем ее на теме Bootstrap4 (или любой теме, которую вы хотите) и вносим нужные изменения.

nikola theme --new=brainsorting --engine=mako --parent=bootstrap4

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

nikola theme --copy-template=base.tmpl

Если вы хотите изучить все компоненты родительской темы (то есть в моем случае Bootstrap4), следующая команда даст вам путь к родительской теме для вас.

nikola theme -g bootstrap4

Полный список шаблонов показан ниже:

.
├── authors.tmpl
├── base_helper.tmpl
├── base.tmpl
├── gallery.tmpl
├── index_helper.tmpl
├── listing.tmpl
├── pagination_helper.tmpl
├── post.tmpl
├── tags.tmpl
└── ui_helper.tmpl

Например, если вы хотите сделать навигацию липкой наверху, так что, когда читатели прокручиваются вниз, они все равно могут получить доступ к панели меню, вам нужно обновить base.tmpl Файл, как показано ниже, с помощью команды липкой. Чтобы получить base.tmpl Файл в папке шаблона используйте Nikola Theme.tmpl Анкет

Оригинал: “https://dev.to/mattioo/create-a-blog-using-nikola-static-website-generator-l71”

Читайте ещё по теме: