handmade blog

✍️

Блог ручной работы

Прочтите этот документ на другом языке: ?? ?? ?? ?? ?? ?? ??

Handmade Blog — это легкий статический генератор блогов для людей, которые хотят быстро создать блог. Он поддерживает документ типа статьи для публикации в блоге, документ типа работы для портфолио, выделение кода, синтаксис KaTeX, сноски и многое другое.

Демо: Здесь

Витрина

• betty-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

Результаты маяка

Article/0.html на мобильных устройствах

Article/0.html на рабочем столе

Начиная

1. Нажмите кнопку «Использовать этот шаблон» над списком файлов, чтобы создать новый репозиторий. Если вы хотите использовать домен github.io, укажите репозиторию {YOUR_ID}.github.io . (например, betty-grof.github.io ). Не забудьте включить опцию «Включить все ветки».

   

   

2. Перейдите на вкладку «Настройки» в своем репозитории и установите исходную ветку для страниц GitHub на ветку gh-pages . GitHub Pages разместит ваш сайт на основе ветки gh-pages . Вы сможете получить доступ к веб-сайту через https://{YOUR_ID}.github.io/ через несколько минут.

   

   

3. Клонируйте репозиторий и установите пакеты узлов.

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. Настройте некоторые тексты, такие как заголовок навигации (в app/templates/navigations.ejs ), и запустите npm run build .

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. Запустите сценарий npm start , чтобы запустить локальный сервер, прослушивающий http://localhost:8080/ . Локальный сервер основан на каталоге dist .

   $ npm run build
   $ npm start

   

6. Зафиксируйте и отправьте изменения из вашего рабочего каталога в удаленный репозиторий.

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. Запустите сценарий deploy если вы готовы разместить веб-сайт. Этот сценарий создает локальные файлы в каталоге dist и отправляет их в ветку gh-pages , которая содержит только файлы из каталога dist . GitHub Pages автоматически разместит ваш веб-сайт по адресу https://{YOUR_ID}.github.io/ на основе ветки gh-pages .

   $ npm run deploy

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

Живая перезагрузка

1. Запустите npm run watch чтобы отслеживать изменения в режиме реального времени.
2. Запустите npm start , чтобы запустить локальный сервер. ( npm run watch все еще должен работать в фоновом режиме, на другой вкладке или в другом сеансе.)
3. Теперь он создается автоматически всякий раз, когда вы вносите изменения в любые файлы в каталогах app/templates , app/styles и _articles .

Написание и публикация документа

1. Напишите документ в каталоге _articles или _works .
2. Запустите npm run publish article или npm run publish work чтобы преобразовать документы уценки в HTML.
3. Предварительный просмотр преобразованного документа на локальном сервере с помощью npm start .
4. Зафиксируйте и отправьте изменения в репозиторий, а затем запустите npm run deploy для развертывания.

Редактирование шаблона

Измените шаблон ejs, чтобы изменить содержимое существующей страницы. Например, если вы хотите поместить изображение на целевую страницу, откройте файл app/templates/index.ejs и добавьте тег img в элемент main-container .

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

Затем запустите сценарий npm run build , чтобы опубликовать измененную целевую страницу и просмотреть изменения на локальном сервере с помощью сценария npm start .

$ npm run build
$ npm start

Если вы готовы к развертыванию, запустите сценарий npm run deploy . Таким образом вы можете изменить не только целевую страницу, но и любые подобные страницы. (Возможно, вам потребуется понять структуру проекта.)

Добавление личного домена

Создайте файл CNAME в корневом каталоге. Процесс сборки автоматически выберет для вас CNAME, и вы сможете обслуживать свой блог из своего личного домена.

Чтобы узнать больше о том, как Github управляет CNAME, ознакомьтесь с документацией.

Структура проекта

• _articles — файлы Markdown для публикаций в блоге.
• _works — файлы Markdown для портфолио.
• app
  • assets — любые файлы, которые будут импортированы с помощью HTML-файлов, такие как изображения, шрифты и т. д.
  • public — HTML-файлы, созданные сценарием publish . каталог server и dist основан на этом каталоге. Не изменяйте файлы в этом каталоге напрямую.
    • article — HTML-файлы, конвертированные из каталога _articles .
    • work — HTML-файлы, конвертированные из каталога _works .
  • styles — исходный код CSS, который будет импортирован в HTML-файлы.
  • static — любые статические файлы, которые не скомпилированы сценарием build , например robots.txt , sitemap.xml или файлы SEO. Сценарий build копирует все файлы из этого каталога в каталог dist .
  • templates — файлы шаблонов EJS. сценарий publish преобразует шаблоны в этом каталоге в файлы HTML.
• dist — файлы, скомпилированные сценарием build . Сценарий start открывает локальный сервер на основе этого каталога, а сценарий deploy развертывает веб-сайт на страницах GitHub на основе этого каталога. Не изменяйте файлы в этом каталоге напрямую.
• services — Исходный код, реализующий сценарий publish .
  • classes
  • models
• tools — исходный код, реализующий различные сценарии npm.

Доступные скрипты

npm start

Запускает локальный сервер разработки, прослушивающий http://localhost:8080/.

npm run publish

Преобразует шаблоны в файлы HTML.

$ npm run publish article

Конвертирует все статьи.

$ npm run publish works

Конвертирует все работает.

$ npm run publish article 5

Преобразует статью с идентификатором 5.

$ npm run publish work 3

Конвертирует произведение с идентификатором 3.

$ npm run publish page

Конвертирует все страницы.

npm run watch

Автоматически перестраивает файлы шаблонов в каталоге templates , файлы CSS в каталоге styles и файлы уценки в каталоге _articles при каждом изменении файлов.

npm run build

Создает файлы с помощью пакета пакетов.

npm run deploy

Создает и развертывает файлы.

Лицензия

Этот проект лицензируется по лицензии MIT — подробности см. в файле LICENSE.