Как стать автором
Обновить

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

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.9K

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

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

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

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

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

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

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

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

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

Google Таблица

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

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

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

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

  • Просмотры

  • Комментарии

  • Закладки (если доступно)

  • Рейтинг (если доступно)

Скрипты иногда переписываю, когда что-то идёт нет так с парсингом и вот ссылка на мою последнюю актуальную таблицу 2023 года: 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 файлы
Вставка автоматической подписи на все 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 из ссылок - настало время вставить всё это в шаблон сайта-визитки.

Сайт-визитка https://shardin.name/
Сайт-визитка https://shardin.name/

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

Вставка готовых кусков кода в html
Вставка готовых кусков кода в html

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

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

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

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

Хостинг GitHub Pages
Хостинг GitHub Pages

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

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

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

Итоги

Собственный сайт-визитка выгоден по многим причинам:

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

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

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

  4. Веб-сайт портфолио позволяет вам создать и укрепить свой личный бренд. Вы можете настроить дизайн, макет и содержимое, чтобы отразить свой уникальный стиль, ценности и опыт.

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

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

Автор: Михаил Шардин,

19 июня 2023 г.

Теги:
Хабы:
Рейтинг0
Комментарии0

Публикации