Hugo + Firebase: как быстро и бесплатно создать статический сайт

February 2018

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт

На­вер­ня­ка каж­дый из вас за­ду­мы­вал­ся о том, что­бы со­здать сайт, на ко­то­ром мож­но бы­ло бы раз­ме­стить своё порт­фо­лио, ре­зю­ме или да­же свой блог. Про­чи­тав эту ста­тью, вы смо­же­те сде­лать се­бе та­кой сайт.

Во­об­ще для раз­ра­бот­ки сай­та необ­хо­ди­мо знать HTML, CSS и немно­го JavaScript. В на­шем слу­чае вы мо­же­те не знать ни­че­го из это­го. До­ста­точ­но про­сто уве­рен­но поль­зо­вать­ся ком­пью­те­ром.

Для раз­ме­ще­ния веб-сай­та, необ­хо­ди­мо «про­стран­ство» (веб-хо­стинг), ку­да бу­дут за­гру­же­ны фай­лы ва­ше­го сай­та. И ко­гда кто-ни­будь вве­дёт ад­рес сай­та и на­жмет «ввод», эти са­мые фай­лы бу­дут за­гру­же­ны в его бра­у­зер.

Итак, что вам необ­хо­ди­мо:

Учёт­ная за­пись Google

Ес­ли у вас есть по­ста на Gmail, зна­чит она у вас есть. Ес­ли нет, со­здай­те учёт­ную за­пись.

До­мен

Это по же­ла­нию. В ми­ре есть мно­же­ство про­вай­де­ров до­мен­ных имён, най­ти та­ко­го про­вай­де­ра мож­но в Google. В от­крыв­шем­ся по­ис­ке мо­же­те клик­нуть на лю­бой ва­ри­ант, это так же про­сто, как ку­пить то­вар в ин­тер­нет-ма­га­зине.

Hugo

Hugo это ути­ли­та, со­зда­ю­щая ста­ти­че­ские сай­ты. Вы мо­же­те ис­поль­зо­вать мно­же­ство тем оформ­ле­ния для сай­та, есть спе­ци­аль­ные те­мы для бло­га, порт­фо­лио и т.п.

Ска­чать её мож­но от­сю­да.

Firebase

Firebase это плат­фор­ма для мо­биль­ных и веб-при­ло­же­ний от Google. Од­на из функ­ций Firebase это хо­стинг. Раз­ра­бот­чи­ки та­к­же мо­гут ис­поль­зо­вать Firebase для со­зда­ния ана­ли­ти­ки, уве­дом­ле­ний, со­об­ще­ний об ошиб­ках в сво­их при­ло­же­ни­ях. Ну а мы бу­дем раз­ме­щать там свой сайт.

Node.js

Node.js это сре­да вы­пол­не­ния JavaScript, по­стро­ен­ная на ос­но­ве движ­ка V8 JavaScript из Chrome.
Для на­шей за­да­чи необ­хо­ди­мо про­сто уста­но­вить её для ра­бо­ты ути­лит Firebase. Ска­чай­те её здесь.

Шаг 1: Уста­но­вим Hugo

Windows: у вас бу­дет про­стой ис­пол­ня­е­мый файл, ко­то­рый вы мо­же­те раз­ме­стить где угод­но и за­пус­кать впо­след­ствии из ко­манд­ной стро­ки. Вы мо­же­те до­ба­вить этот путь в пе­ре­мен­ную «PATH» в пе­ре­мен­ных сре­ды Windows для за­пус­ка из лю­бо­го ме­ста.

Mac: мож­но уста­но­вить его с по­мо­щью Homebrew. Ес­ли у вас не уста­нов­лен brew, ска­чай­те его здесь.

Шаг 2: Со­зда­дим шаб­лон­ный сайт

Пе­рей­ди­те в ко­манд­ной стро­ке в пап­ку, где вы хо­ти­те раз­ме­стить свой сайт и вве­ди­те сле­ду­ю­щую ко­ман­ду:

$ hugo new site <путь_до_папки>

По­сле это­го вы долж­ны уви­деть в пап­ке при­мер­но сле­ду­ю­щую кар­ти­ну:

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт
Не пу­гай­тесь, в этих пап­ках бу­дет хра­нит­ся ваш сайт и сей­час бу­дет по­нят­но — ка­кая за­чем нуж­на. К при­ме­ру, в пап­ке content бу­дет хра­нит­ся весь тек­сто­вый кон­тент сай­та.

Для до­бав­ле­ния кон­тен­та вы­пол­ни­те сле­ду­ю­щую ко­ман­ду:

$ hugo new about.md

Для со­зда­ния по­ста в бло­ге, мож­но со­здать пап­ку “blog” в пап­ке “content” и в неё до­бав­лять кон­тент. Фай­лы име­ют рас­ши­ре­ние “.md” т.к. это фай­лы фор­ма­та Markdown.

Markdown это фор­мат раз­мет­ки тек­сто­вых фай­лов. Он очень про­стой и кра­си­вый. Та­к­же по фор­ма­ту Markdown есть ку­ча ин­струк­ций и шпар­га­лок в ин­тер­не­те, вот од­на из них (ан­гл.).

Шаг 3: Уста­но­вим те­му сай­та

У Hugo огром­ное со­об­ще­ство и сайт тем для него со­дер­жит мно­же­ство ка­те­го­рий тем оформ­ле­ния сай­тов. Най­ди­те там те­му, ко­то­рая под­хо­дит вам.

Я вы­брал те­му Introduction. Для её за­груз­ки бра­у­зер пе­ре­бро­сит нас на GitHub.

Каж­дая те­ма на­стра­и­ва­ет­ся по-раз­но­му. В на­шем слу­чае про­сто ска­чай­те и рас­па­куй­те её в пап­ку themes и ско­пи­руй­те файл config.toml в кор­не­вую пап­ку сай­та.

Шаг 4: На­стро­им сайт

От­кро­ем файл config.toml в тек­сто­вом ре­дак­то­ре. За­да­дим в нём ва­ше имя и дру­гую ин­фор­ма­цию, ко­то­рую вы хо­ти­те опуб­ли­ко­вать на сай­те. Неко­то­рые те­мы под­дер­жи­ва­ют ана­ли­ти­ку Google Analytics и вы смо­же­те от­сле­жи­вать раз­ные мет­ри­ки, та­кие как, на­при­мер, ко­ли­че­ство поль­зо­ва­те­лей сай­та. Для это­го в на­строй­ках нуж­но бу­дет ука­зать иден­ти­фи­ка­тор Google Analytics.

Шаг 5: Со­зда­дим про­ект хо­стин­га Firebase

Как я го­во­рил, Firebase это очень мощ­ная плат­фор­ма с ку­чей воз­мож­но­стей. Но я ис­поль­зую толь­ко хо­стинг Firebase для раз­ме­ще­ния сай­та, со­здан­но­го Hugo.

Для ис­поль­зо­ва­ния служб Firebase, необ­хо­ди­мо зай­ти в них с учёт­ной за­пи­сью Google.

По­сле это­го на­жми­те «ПЕ­РЕЙ­ТИ К КОН­СО­ЛИ» (“Go to console”). Со­здай­те про­ект, за­дав ему имя. По­сле это­го вы ока­же­тесь на стра­ни­це про­ек­та и да­лее нуж­но пе­рей­ти к эле­мен­ту Hosting (“getting started on Hosting”)

Шаг 6: На­строй­те ути­ли­ты Firebase на ло­каль­ном ком­пью­те­ре

От­крой­те ко­манд­ную стро­ку и вве­ди­те ко­ман­ду:

$ npm install -g firebase-tools

Эта ко­ман­да уста­но­вит па­кет Firebase-tools. Для раз­ме­ще­ния сай­та по­тре­бу­ет­ся вве­сти ещё немно­го ко­манд.

$ firebase login

Эта ко­ман­да со­еди­нит ваш ком­пью­тер с про­ек­том Firebase. Вам бу­дет дан вы­бор про­ек­та для на­шей за­да­чи.

$ firebase list

Этой ко­ман­дой вы смо­же­те вы­ве­сти в кон­соль имя со­здан­но­го ра­нее про­ек­та. Оста­лось ини­ци­а­ли­зи­ро­вать пап­ку про­ек­та Firebase.

$ firebase init

Да­лее от­веть­те на во­про­сы:

  • Ка­кие функ­ции Firebase вы хо­ти­те на­стро­ить? (Which Firebase CLI features do you want to setup?) От­вет: Хо­стинг/Hosting.
  • Вы­бе­ри­те про­ект Firebase для этой пап­ки (Select a default Firebase project for this directory) От­вет: Вы­бе­ри­те про­ект Firebase, со­здан­ный на ша­ге 5.
  • Вы хо­ти­те ис­поль­зо­вать её как об­ще­до­ступ­ную пап­ку? (Do you want to use as your public directory?) От­вет: Да/Yes.
  • На­стро­ить как од­но­стра­нич­ное при­ло­же­ние? (Configure as a single-page app?) От­вет: Да/Yes.

Я сде­лал скрин­шо­ты всех ша­гов этой ко­ман­ды, что­бы вы не за­пу­та­лись:

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт

От­лич­но! Ини­ци­а­ли­за­ция Firebase окон­че­на.

Шаг 7: Про­ве­рим ра­бо­ту сай­та ло­каль­но

Для за­пус­ка ло­каль­ной про­вер­ки ва­ше­го сай­та, вы­пол­ни­те сле­ду­ю­щую ко­ман­ду:

$ hugo server -w

Вме­сте с Hugo идёт лёг­кий и мощ­ный веб-сер­вер, ко­то­рый поз­во­ля­ет пол­но­цен­но про­ве­рить ре­зуль­тат ра­бо­ты сай­та. Убе­ди­тесь, что все изоб­ра­же­ния сай­та раз­ме­ще­ны в пап­ке static/img. Про­верь­те на­строй­ки в фай­ле config.toml. За­тем от­крой­те свой сайт в бра­у­зе­ре http://localhost:1313

Шаг 8: Раз­ме­ще­ние сай­та

Вве­ди­те сле­ду­ю­щую ко­ман­ду для со­зда­ния сай­та и вы­груз­ки его в Firebase:

$ hugo && firebase deploy
Шаг 9: При­вя­жем свой до­мен (необя­за­тель­но)

В Firebase есть функ­ция при­вяз­ки до­ме­на к при­ло­же­нию Firebase. На­ж­жми­те на connect domain, за­тем вве­ди­те имя до­ме­на и до­бавь­те TXT-за­пи­си для про­вер­ки вла­де­ния до­ме­ном.

Разработка: Hugo + Firebase: как быстро и бесплатно создать статический сайт Это де­ла­ет­ся в лич­ном ка­би­не­те ре­ги­стра­то­ра до­ме­на.

Шаг 10: Со­зда­дим пост в бло­ге

Это очень про­сто. Hugo по­ни­ма­ет фай­лы markdown. Пе­рей­ди­те в пап­ку content->blog (её раз­ме­ще­ние мо­жет за­ви­сеть от на­строй­ки те­мы). Со­здай­те файл markdown. По­вто­ри­те шаг 8 для про­вер­ки ре­зуль­та­та.

От­пи­ши­тесь в ком­мен­та­ри­ях, ес­ли у вас есть во­про­сы/по­же­ла­ния :)

По ма­те­ри­а­лам «Hugo + Firebase: How to create your own static website for free in minutes»

comments powered by Disqus