Как правильно вынести header и footer во внешний файл в HTML шаблоне?
1) Шаблонизаторы - например Jade
2) Плагины для сборщика - например gulp-rigger
Когда я был полным новичком, то использовал для этого PHP, как в WordPress. Создаются нужные файлы : footer.php, header.php, index.php и т.д.  Потом подключаются  через инклюды <?php include 'header.php';?> Code goes here... <?php include 'footer.php';?>. Разумеется, это все должно быть запущено через веб-сервер. Плюс такого подхода, что не нужно изучать что-то новое. Gulp и jade требуют времени (и желания) хотя  и немного. 
Если время есть, то ответ Serj-One в  самую точку. Сам пользуюсь Jade, рекомендую.

UPD 2022 : Сейчас использую gulp-file-include.
1) Есть возможность передать данные в виде JSON.
2) Кроме того этот плагин "клеит"  не только HTML, но и JS скрипты.