Если быть более точным эта статья про то, как разработать свой сайт-визитку и оказаться на первом месте в поисковой выдаче по запросу своего имени не только яндекса или гугла, но и в других поисковиках. А ещё статья расскажет про то, как именно при помощи гугл таблицы и гугл скриптов можно точно узнать всю статистику своих публикаций на других сайтах.

Если говорить о том какой опыт даёт мне написать эту статью, то начну с того, что я пишу статьи и публикую их на Хабре и в Тинькофф Журнале. По темам программирование, инвестиции, умные дома. В основном пишу только про то, с чем сам имел дело - например, мне нужно было постоянно искать ликвидные облигации, а инструмента который бы отвечал требованиям я так и не нашёл, поэтому написал свой open-source скрипт - эту статью потом выбрали победителем конкурса «Технотекст 2021» в номинации «Лучший кейс».

Зачем вам нужен сайт-портфолио? Он позволит вам отобразить свою работу в визуально привлекательной и организованной форме, а ещё может служить точкой входа о вас в интернете, потому что дает вам контроль над тем, как вы представляете себя и свою работу.

Мой опыт, который дает право писать эту статью - результат поиска по ФИО в 2024 году

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

Поиск в разных поисковиках по моему имени

На скриншоте выше можно видеть что при запросе моего имени мой сайт визитка находится на первом месте во многих поисковых системах:

В гугле: https://www.google.com/search?q=михаил+шардин
В яндексе: https://ya.ru/search/?text=михаил+шардин
В бинге: https://www.bing.com/search?q=михаил+шардин
В дакдакгоу: https://duckduckgo.com/?q=михаил+шардин

Рассмотрим все технические детали связки которую можно использовать как пример для достижения ваших целей:

Google Таблица → Node.js → Google Charts → Сайт-визитка → Топ-3 место в поиске по ФИО.

Google Таблица

В 2020 году когда только заинтересовался темой личного бренда, то написал статью про учёт собственных публикаций. Тогда я предлагал писать запрос XPath для формулы IMPORTXML чтобы импортировать цифры просмотров в таблицу.

Но как оказалось позже использовать несколько сотен IMPORTXML в одной таблице плохая идея - всё работает ужасно медленно и есть ограничения по количеству использованных формул.

Текущая версия таблицы учёта публикаций на гугл скриптах

Поэтому уже на следующий 2021 год переписал на использование гугл скриптов для того чтобы парсить сайты в поисках 4х интересных параметров:

Просмотры
Комментарии
Закладки (если доступно)
Рейтинг (если доступно)

Скрипты иногда переписываю, когда что-то идёт нет так с парсингом и вот ссылка на мою последнюю актуальную таблицу 2024 года: LynxReport: учёт публикаций [GAS] - она открыта к просмотру.

Вы можете скопировать, очистить статью и заполнить её своими данными - в статье уже настроена отчетность и сводные таблицы через QUERY.

Например, для того парсить Хабр, используются следующий код гугл скриптов:

 function habr_com(url) {
    try {
    var html = UrlFetchApp.fetch(url).getContentText();    
    let Views = +html.match(/<span class="tm-icon-counter__value">(.*?)K<\/span>/)[1]
        .replace(/\,/g, '.') * 1000
    // let Comments = `?`// +html.match(/class="tm-comments__comments-count">(.*?)<\/span>/)[1]
    var searchstringComments = '       Комментарии '
    var index = html.search(searchstringComments);
    if (index >= 0) {
        var pos = index + searchstringComments.length
        var Comments = html.substring(pos, pos + 70)
        Comments = +Comments
            .split('</span>')[0]
            .replace(/<\/sp/g, '');
        (!Comments || Comments === undefined) ? Comments = 0: Comments
    }
var searchstringBookmarks = 'bookmarks-button__counter'
var index = html.search(searchstringBookmarks);
if (index &gt;= 0) {
    var pos = index + searchstringBookmarks.length
    var Bookmarks = html.substring(pos, pos + 20)
    Bookmarks = +Bookmarks.match(/\d{1,4}/);
    (!Bookmarks || Bookmarks === undefined) ? Bookmarks = 0: Bookmarks
}
let Ratings = +html.match(/tm-votes-meter__value_appearance-article tm-votes-meter__value_rating\"&gt;(.*?)&lt;\/span&gt;/)[1]
Logger.log(`Для ${url}:\nПросмотры = ${Views} \nКомментарии = ${Comments} \nЗакладки = ${Bookmarks} \nРейтинг = ${Ratings}.`)
return `${Views}|${Comments}|${Bookmarks}|${Ratings}`
} catch (error) {
    Logger.log(`Ошибка чтения данных для ${url}.`)
    return `?|?|?|?`
}

}

Или интересный момент - у Тинькофф Журнала есть скрытый апи (как автор Т—Ж я не имею никакого отношения к разработке), но мне надо было скачивать свои показатели в таблицу, а простым подходом в лоб ничего не работало и пришлось разбираться. Оказалось, что у каждой статьи есть идентификатор, обратившись напрямую по которому можно без проблем скачать все четыре показателя из JSON. Вот ссылка на решение на гитхабе.

Скрипт обрабатывает около сотни ссылок за 2-3 минуты и собирает всю статистику прямо в мою таблицу.

Полностью весь код можно посмотреть на гитхабе.

Node.js

Поскольку на сайте-визитке всегда хочется иметь актуальные данные и не хочется заниматься копипастой предлагаю использовать Node.js - мне показалось что это будет хорошей идеей для того чтобы обеспечить трансформацию данных из одного формата в другой.

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

piece_publications.txt содержит данные для Timelines Google Charts на сайте-визитке в html виде.
piece_google_charts_vegachart.txt содержит данные для визуализации облака слов с помощью VegaChart.
piece_google_charts_timelines.txt содержит в форматированном html виде данные обо всех публикациях.

Более подробно о скрипте уже писал в этой статье.

Вставка автоматической подписи на все PDF файлы

Недавно добавил в код строки для добавления нижнего колонтитула footer на все pdf файлы со статьями, которые сохраняются автоматически при помощи Puppeteer. Вы можете видоизменить подпись в соответствии с вашими пожеланиями:

console.log(Генерация pdf по ссылкам из таблицы ${doc.title}, лист ${sheet1.title}.)
const browser = await puppeteer.launch();
for (var i = 2; i <= rows1.length + 1; i++) { //
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
await page.setDefaultNavigationTimeout(0);
type = sheet1.getCellByA1('B' + i).value
url = sheet1.getCellByA1('D' + i).value
const footer = `&lt;style&gt;#header, #footer { padding: 0 !important; }&lt;/style&gt;&lt;div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;"&gt;${url} | Михаил Шардин, https://shardin.name/ &lt;br /&gt; Страница &lt;span class="pageNumber"&gt;&lt;/span&gt; из &lt;span class="totalPages"&gt;&lt;/span&gt; &lt;/div&gt;`;
console.log(`Строка №${i} из ${rows1.length + 1} для ${url}.`)

if (type == 'Веб' &amp;&amp; url != null) {
    path = `./articles/${sheet1.getCellByA1('C' + i).formattedValue}_${url.split(/\/\//)[1].split(/\//)[0].replace(/\./g, '-')}_${sheet1.getCellByA1('F' + i).formattedValue}.pdf`

    await page.goto(url, {
        waitUntil: 'networkidle0'
    });
    await page.waitFor(20 * 1000)
    await page.emulateMediaType('screen');
    const pdf = await page.pdf({
        path: path,
        margin: {
            top: 40,
            bottom: 40,
            left: 20,
            right: 10
        },
        printBackground: true,
        displayHeaderFooter: true,
        footerTemplate: footer,
        format: 'A4',
    });
    console.log(`Создан файл ${path.split(/\//).pop()}.\n`)
    await page.close()
}

}

Полный код генерации PDF можно посмотреть на гитхабе.

Графики гугл и html

После того как все публикации заведены в таблицу, скриптом скачаны их данные о просмотрах и комментариях, подготовлено при помощи другого скрипта форматирование для гугл графиков и списка публикаций, созданы pdf из ссылок - настало время вставить всё это в шаблон сайта-визитки.

Можно вставлять готовые куски ранее сгенерированного кода через Visual Studio Code:

После этого страница сайта-визитки полностью обновлена.

Сайт-визитка на хостинге гитхаба

На мой взгляд, сайт-визитка является некоммерческим проектом и есть вариант не платить за хостинг вообще, а также не заморачиваться с его размещением на собственном сервере. Можно выбрать GitHub Pages - это бесплатно. Ежемесячная плата за хостинг равна нулю.

Вообще гитхаб предоставляет возможность не платить и за доменное имя, а использовать адрес вида username.github.io. На скришоте ниже гитхаб пейджес используется со своим доменным именем:

Мой опыт: топ-3 место в поиске ФИО

Прошло уже три года и примерно через полгода после начала размещения мой сайт визитка стал первым в поиске по запросу моего имени - никаких дополнительных действий по его продвижению или оптимизации не предпринимал.

Однако регулярно обновляю информацию на нём - если выходит моя статья на каком-нибудь ресурсе, то сразу добавляю её в таблицу и потом вся информация оказывается на сайте-визитке.

Итоги

Веб-сайт портфолио — это мощный инструмент для демонстрации вашей работы, установления вашего присутствия в Интернете и привлечения новых возможностей в вашей профессиональной сфере.

Автор: Михаил Шардин
🔗 Моя онлайн-визитка
📢 Telegram «Умный Дом Инвестора»

19 июня 2023 г.

Как сделать своё онлайн портфолио и продвинуть его на первое место в поиске без бюджета