Изучаем Hexo и рассуждаем об услугах по рекламе

Hexo - движок для блогов. Продолжаем разбираться, как он работает, но пытаемся разобраться и втом, что же мне надо для фронтенда. Update: Это все от того, что здесь я еще не знал, как его совместить с Gulp

Ищем простые инструменты для Frontend, но находим примеры gulpfile.js с Hexo API

Постановка задачи¶

Что я намарен "производить"? Услуги по рекламе. Туда входят
1. Лэндинги (под Direct, AdWords...)
2. Статические связки страниц (лэндинги с вариациями, шарп таргет лэндинги)
3. Анимация (баннеры, презентации, впечатление, настроение). Лэндинг-анимация.
4. Баннерокрутилки
5. Тексты (например, самопиар - мои статьи по рекламе, психологии, статистике..., datamining, программированию). Надо подумать о франшизах для копирайтеров.
6. Медиа (видео, аудио)
7. Статические сайты (блог, мануал, статьи, disqus-комментарии, импорт баннеров)
8. Dashboard для статистики (отрасли, рекламы, конкуренции)

Добавим сюда услуги с неочевидной трудоемкостью.
Управление рекламными кампаниями -
Настройка Direct, AdWords, обучение..., обслуживание, оптимизация
Настройка статистики Wordstat, обучение..., обслуживание, оптимизация
Выбор рекламной стратегии, координация, контроль выполнения (вся реклама на предприятии) - по сути, помощь в бюджетировании...

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

In [ ]:

# Шаблон EJS (+Hexo helpers)
# Фреймворк (Bootstrap, foundation, MDL-light)
# Движок - Hexo (с последующей заменой на Express)

Очевидно, что всего сразу не предусмотришь. Потому поставим галочку напротив пункта Выбираем оптимальный вариант движка - 1)понять, что же мне надо... и начнем с того, что влепим в папку темы свою первую сборку gulpfile.js

Где не обойтись без Hexo¶

При конструировании и отладке фалов шаблона в папке темы, например themes/landscape/Layout, нужно будет отслеживать процесс компиляции из ejs => html. Сделать это можно только с Hexo, поскольку в файлах шаблонов несколько десятков helpers

Используем вот эту возможность Hexo

In [ ]:

E:\stradorusite\hexo\t1\themes\corporate>hexo render themes/corporate/_source/index.ejs --cwd ../../

Здесь мы запускаем hexo из директории themes\corporate (в ней расположен gulpfile.js, package.json, node_modules - все для для работы с gulp). А для Hexo есть свои ( package.json, node_modules) - они на два уровня выше...

In [ ]:

# Если не указать рабочую директорию
--cwd ../../
## То Hexo просто не найдет _config.yml , пути к темам ...

Вспомним структуру каталогов:

В папке Hexo¶

In [ ]:

#  Содержимое папки F:\hexoforgulp\h1

15.10.2016  14:37    <DIR>          .
15.10.2016  14:37    <DIR>          ..
15.10.2016  14:37                71 .gitignore
15.10.2016  14:37             1 554 _config.yml
15.10.2016  14:37               461 package.json
15.10.2016  14:37    <DIR>          scaffolds
15.10.2016  14:37    <DIR>          source
15.10.2016  14:37    <DIR>          themes
15.10.2016  14:38    <DIR>          node_modules
               3 файлов          2 086 байт
               6 папок   6 680 772 608 байт свободно

F:\hexoforgulp\h1>

В папке themes\landscape¶

In [ ]:

 Содержимое папки F:\hexoforgulp\h1\themes\landscape

15.10.2016  14:37    <DIR>          .
15.10.2016  14:37    <DIR>          ..
15.10.2016  14:37                28 .gitignore
15.10.2016  14:37             1 259 Gruntfile.js
15.10.2016  14:37             1 059 LICENSE
15.10.2016  14:37             2 222 README.md
15.10.2016  14:37               517 _config.yml
15.10.2016  14:37    <DIR>          languages
15.10.2016  14:37    <DIR>          layout
15.10.2016  14:37               274 package.json
15.10.2016  14:37    <DIR>          scripts
15.10.2016  14:37    <DIR>          source
               6 файлов          5 359 байт
               6 папок   6 653 116 416 байт свободно

F:\hexoforgulp\h1>

In [ ]:

# Содержимое папки F:\hexoforgulp\h1\themes\landscape\layout

15.10.2016  14:37    <DIR>          .
15.10.2016  14:37    <DIR>          ..
15.10.2016  14:37    <DIR>          _partial
15.10.2016  14:37    <DIR>          _widget
15.10.2016  14:37                77 archive.ejs
15.10.2016  14:37                78 category.ejs
15.10.2016  14:37                64 index.ejs
15.10.2016  14:37               665 layout.ejs
15.10.2016  14:37                62 page.ejs
15.10.2016  14:37                62 post.ejs
15.10.2016  14:37                73 tag.ejs
               7 файлов          1 081 байт
               4 папок   6 629 392 384 байт свободно

In [ ]:

# Содержимое папки F:\hexoforgulp\h1\themes\landscape\source\css

15.10.2016  14:37    <DIR>          .
15.10.2016  14:37    <DIR>          ..
15.10.2016  14:37             1 111 _extend.styl
15.10.2016  14:37    <DIR>          _partial
15.10.2016  14:37    <DIR>          _util
15.10.2016  14:37             1 466 _variables.styl
15.10.2016  14:37    <DIR>          fonts
15.10.2016  14:37    <DIR>          images
15.10.2016  14:37             1 815 style.styl
               3 файлов          4 392 байт
               6 папок   6 629 392 384 байт свободно

F:\hexoforgulp\h1>

По команде hexo server создаются временные файлы HTML (из данных в .md при помощи шаблонов .ejs) и CSS (из .styl). На лету срабатывает и шаблонизатор и препроцессор, но отслеживать изменения в файлах нт необходимости - это же движок для верстки блогов.

Что делает Hexo с HTML и CSS¶

In [ ]:

# Итак, пути относительно landscape
# 1. Берет файлы из папки                      ../../source/_posts
# 2. Для каждого их них находит шаблон в       layouts 
# 3. Результат хранит в памяти в "невидимом"   /css/style.css

In [ ]:

#  По команде hexo generate создается          ../../public
#  В ней все:
# 1. Посты из                                  ../../_posts
# 2. Css (скомпилированные из .styl) из        source/css
# 3. Папки с Assets из                         source  

Возьмем,сначала, что попроще¶

Приложение 1¶

In [ ]:

F:\hexoforgulp\h1>hexo -h
Usage: hexo <command>

Commands:
  clean     Removed generated files and cache.
  config    Get or set configurations.
  deploy    Deploy your website.
  generate  Generate static files.
  help      Get help on a command.
  init      Create a new Hexo folder.
  list      List the information of the site
  migrate   Migrate your site from other system to Hexo.
  new       Create a new post.
  publish   Moves a draft post from _drafts to _posts folder.
  render    Render files with renderer plugins.
  server    Start the server.
  version   Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/

F:\hexoforgulp\h1>

Приложение 2¶

In [ ]:

var gulp        = require('gulp'),
    browserSync = require('browser-sync'),
    sass        = require('gulp-sass'),
    bower       = require('gulp-bower'),
    notify      = require('gulp-notify'),
    reload      = browserSync.reload,
    bs          = require("browser-sync").create(),
    Hexo        = require('hexo'),
    hexo        = new Hexo(process.cwd(), {}),
    clean = require('gulp-clean');

var src = {
    scss: './scss/',
    css:  './source/css',
    ejs: 'layout'
},
watchFiles = [
    './scss/*.scss',
    '*/*.ejs'
];


// Static Server + watching scss/html files
gulp.task('serve', ['sass:watch'], function() {

    hexo.init.then(function(){
      return hexo.call('generate', {watch: true});
    }).catch(function(err){
      console.log(err);
    });

    // init starts the server
    bs.init(watchFiles, {
        server: {
            baseDir: "../../public"
        },
        logLevel: "debug"
    });

    hexo.init.then(function(){
      return hexo.call('generate', {watch: true});
    }).catch(function(err){
      console.log(err);
    });

});



gulp.task('build', ['clean', 'copy']);

gulp.task('copy', function (cb) {
    gulp.src(['../../public/**/*'])
        .pipe(gulp.dest('public'));

});

gulp.task('clean', function () {
    return gulp.src('public', {read: false})
            .pipe(clean({force: true}))
});



// Compile sass into CSS
gulp.task('sass', function() {
    // gulp.src(src.scss + "/*/*.scss")
    gulp.src(src.scss + "{,*}/*.scss")
        .pipe(sass({}))
        // .pipe(gulp.dest(src.css))
        .pipe(gulp.dest('../../source/css/'))
        .pipe(reload({stream: true}));
});

gulp.task('sass:watch', function () {
  gulp.watch('./scss/**/*.scss', ['sass']);
});


gulp.task('bower', function() {
  return bower()
    .pipe(gulp.dest('source/lib'))
});

gulp.task('default', ['serve']);

Посты чуть ниже также могут вас заинтересовать