Een Site voor Front-End Ontwikkeling Conferenties (Gebouwd met 11ty op Netlify)

0
56

Ik bouwde een nieuwe kleine site! Het is een site voor het overzicht komende conferenties in de wereld van de front-end web design en ontwikkeling. In de afgelopen jaren (zoals 2017), Sarah Drasner pakte deze ontmoedigende taak. We hebben een formulier voor een nieuwe conferentie inzendingen, maar het was nog steeds een vrij handmatige taak in principe is het handmatig bewerken van een blog post. Ik wilde dit blijven doen, omdat ik denk dat het waardevol is voor een eenvoudige referentie pagina voor conferenties in onze niche segment van het web, maar ik wilde de site te kunnen leven op, jaar na jaar, met een lagere onderhoud-gerelateerde technische schuld.

Dus dit is wat ik heb!

Ik wilde om het te krijgen op GitHub.

Dus ik zet het er. Een deel van de schoonheid van GitHub is dat het opent het idee van de samenwerking door te trekken verzoeken om echt iedereen in de wereld. U moet een GitHub-account, maar dat is gratis, en je moet begrijpen Git ten minste op een aantal kleine niveau (dat is een barrière die ik wil verhelpen in de tijd), maar het nodigt meer samenwerking dan iets als mensen vragen naar je e-mail content en ideeën.

Ik wilde de inhoud in Markdown in de Repo.

De voorpagina-indeling, die wordt Markdown met enkele gegevens van de de top, is een handige en toegankelijke indeling. Je hebt bijna nul kennis, ook niet van HTML, het creëren/bewerken van een bestand als volgt aan:

Het hebben van de werkelijke conferentie gegevens in de repo betekent dat trek verzoeken zijn niet alleen voor design of functies; meer in het algemeen, zij zullen worden voor de eigenlijke conferentie gegevens. Het werk van het maken van deze site, vol van alle de beste conferenties is het werk van ons allemaal, niet alleen van ons.

Op het moment van dit schrijven zijn er al 30 gesloten trek aanvragen.

Ik gebruikte 11ty naar de site te bouwen.

11ty is bijna fascinerend eenvoudig. Het ziet er in één map voor wat het nodig heeft om te verwerken of te verplaatsen naar een andere directory. Het ondersteunt mijn favoriete template systeem uit de doos: Nunjucks. Plus voorpagina Markdown zoals ik hierboven heb genoemd.

Ik was in staat om in wezen het ontwerpen van een kaart dat toont de gegevens die we krijgen van de Markdown-bestanden, en dan bouwen de homepage van de site door de looping over die Markdown-bestanden en het toepassen van de sjablonen kaart.

11ty is gebaseerd op Node.js dus terwijl ik wat learning-curve momenten, het was goed voor mij om in te werken. Er is zeker een configuratie voor het doen van de dingen die ik wilde doen. Bijvoorbeeld, dit is hoe ik het moest een “verzameling” van conferenties om te loop over hen:

config.addCollection(“conferenties”, function(collectie) {
laat allConferences = collectie.getFilteredByGlob(“site/conferenties/*.md”);
laat futureConferences = allConferences.filter(conf => {
terug conf.de gegevens.datum >= new Date();
});
terug futureConferences;
});

De website is gehost op Netlify.

Een reden om het gebruik van Netlify hier is dat het ongelooflijk eenvoudig. Ik maakte een site in Netlify door het te verbinden met de GitHub repo. Ik vertelde het hoe te bouwen van de site (het is een enkelvoudige opdracht: eleventy) en waar het gebouwd bestanden van de site zijn (dist), en dat is het. In feite is dat zelfs een deel van het archief:

Nu als ik het druk op de master branch (of accepteer een pull verzoek in master), automatisch van de site bouwt en implementeert. Duurt slechts enkele seconden. Het is echt geweldig.

Beter, voor elk van pull verzoek, Netlify zorgt ervoor dat alles in orde is eerste:

Mijn favoriet is de implementatie voorbeeld. Het geeft je een (obscure) URL die letterlijk zal eeuwig duren (onveranderlijke) en dat dient als een blik op de ingebouwde versie van deze site is met die van pull verzoek.

Dus, het is niet alleen zeer eenvoudig te gebruiken Netlify, maar ik krijg een heleboel dingen voor gratis, zoals het feit dat de site is smokin’ snel op hun Cdn ‘ s en dergelijke.

Ik ben ook blij dat ik heb nauwelijks aangeboord Netlify de functies hier, dus er is een heleboel dingen die ik kan graven in de loop van de tijd. En ik ben van plan!

Ik gebruik Zapier opnieuw bouwen van de site elke dag.

Er is een beetje van een tijd-gevoelige karakter van deze site. De bedoeling van deze site is de referentie voor het komende conferenties. Het is minder interessant om te zien voorbije conferenties (hoewel misschien kunnen we een blader-archief kunnen in de toekomst). Ik hou van het idee van het rippen uit het verleden conferenties voor de homepage. Als dit PHP (of wat dan ook), dan zouden we dat bij de uitvoering, maar dit is een statische site (op doel). Het doen van iets als dit bij het bouwen is geen big deal (zie dat codefragment boven dat geeft alleen conferenties verleden de datum van vandaag). Maar kunnen we niet gewoon wachten voor een trek aanvragen bij het opbouwen van de site, noch wil ik maken er een handleiding wat ik moet doen, elke dag.

Gelukkig, dit is makkelijk als taart met Zapier:

Phil Hawksworth nam dit tot in het extreme eens en bouwde een klok website herstelt elke minuut.

Deze site was niet alleen een experiment. Ik zou graag keep it going! Als je deel uitmaakt van het runnen van een conferentie, ik ben er vrij zeker van dat het geen kwaad om deze toe te voegen jouwe toe te voegen, net zo lang als het heeft een afdwingbare en uitvoerbare Code of Conduct, en is binnen de wereld van de front-end web design en ontwikkeling.