Als je een front-end ontwikkelaar bent zoals ik, weet ik zeker dat je eerder in deze situatie bent beland. U hebt een eenvoudige statische site gebouwd, of u hebt een mooie statische sjabloon gedownload, en u hebt toen gedacht "Oh, als ik hier een contactformulier op kon zetten" of "Ik wil gewoon een betaalknop toevoegen". Dit zijn de soorten vragen die van een klein project een veel groter beest maken.
Maar het hoeft niet zo te zijn. Er zijn veel tools en functies die u kunt toevoegen aan een statische site zonder dat u PHP, Ruby of een andere vorm van back-endontwikkeling hoeft in te voeren. In dit artikel heb ik een aantal bronnen vermeld die uw site een beetje minder statisch maken.
Ja, ik besef dat dit niet echt een front-end resource of tool is, maar als u wilt dat iemand uw site ziet, moet u deze op internet zetten.
Voor statische site hosting is een van mijn twee favorieten zeker GitHub Pages. GitHub Pages is ontworpen om mensen websites te laten maken die overeenkomen met hun webprojecten op GitHub.com. Het doet dit ook geweldig, zo vaak dat mensen het gebruiken om hun hoofdportfolio of persoonlijke websites erop te hosten. Bekijk de volgende zelfstudies voor meer informatie:
Notitie: Als u een sjabloon van Envato Market hebt gedownload of gevoelig materiaal op GitHub-pagina's wilt hosten, moet u betalen voor een privé-repo. In deze situaties is het belangrijk dat mensen de code niet rechtstreeks van GitHub.com kunnen downloaden
Surge is een andere favoriet van mij en is geweldig voor statische hosting, vooral als je het leuk vind om sites live te pushen via de opdrachtregel. Het installatieproces is aangenaam eenvoudig.
Surge's walrusSurge plus, dat meer robuuste functies biedt dan het gratis prijsplan, zoals wachtwoordbeveiliging en HTTPS, zorgt ervoor dat u (op het moment van schrijven) $ 13 per maand terugzet.
Formulieren waren voor mij het kantelpunt waar ik zou toegeven dat "ik hier wat PHP nodig heb". Nou, niet meer, dankzij tools zoals Formspree, Disqus en zelfs Google Forms.
Formspree stelt u in staat om een statisch HTML-formulier om te zetten in een volledig functionerend contactformulier. Als je het zelf wilt uitproberen, heb ik een artikel geschreven over het toevoegen van Formspree-formulieren aan een statische site.
Als ik een commentaarsysteem aan elke site zou moeten toevoegen, zou ik meteen naar Disqus gaan; het ziet er geweldig uit en werkt perfect (zeer goed omgaan met spam). Daarnaast voegt het sociale en gamification-dynamieken toe aan opmerkingen, adviseert het discussies, verzamelt trends op internet en laat gebruikers punten verdienen door te stemmen op de community..
Het biedt zelfs inkomsten genereren door uitgevers toegang te geven tot het eigen advertentieplatform van Disqus.
Aan de andere kant is Google Forms weliswaar een minder bekende tool, maar het is redelijk goed in het beheren van feedback en het verzamelen van pollgegevens. Ik zou ook aanraden om de nieuwe Google-formulieren te bekijken terwijl ze de gebruikersinterface en formulieren hebben bijgewerkt om het nieuwe Material Design-systeem te volgen.
Mmmm ... marshmallowsSinds ik CloudFlare heb ontdekt, heb ik het gebruikt om het in te stellen allemaal mijn domeinen. Door uw domein in te stellen met CloudFlare ontgrendelt u tal van functies die u kunt inschakelen via de beheerdersinterface. Flexibele SSL, zoeken op de site, HTML-compressie en meer. Als u widgets en plug-ins van derden wilt toevoegen aan uw statische website, zorgen de optimalisatietools van CloudFlare ervoor dat uw site zo goed mogelijk presteert. Hier is een volledige lijst van beschikbare apps.
Betalingen uitvoeren op een statische website? Ben je kwaad!? Nou eigenlijk nee, zolang je het juiste SSL-certificaat hebt en alles op een veilige manier hebt ingesteld, kun je net zo gemakkelijk betalingen op een statische site doen als alle andere soorten.
Envato Market heeft honderden statische sjablonen met een statuut voor winkels, ideaal om online dingen te verkopen, zonder gebonden te zijn aan een dynamisch platform.
Als u alleenstaande betalingen voor een product wilt doen, raad ik u aan om Stripe Checkout te gebruiken. Het ontwerp van het dialoogvenster is van hoge kwaliteit, wat zorgt voor een schone gebruikerservaring, in plaats van de gebruiker naar een geheel andere website te leiden.
Omdat het gekoppeld is aan uw Stripe-account, kunt u ook hun officiële app gebruiken om betalingen bij te houden.
Op zoek naar iets krachtigers? Iets dat voor meerdere producten, een mand en een volledig afrekenproces kan zorgen? Geen probleem, Gumroad heeft je rug met hun Inline Purchases Widget.
Door dit aan elk product op uw statische site toe te voegen, kan de gebruiker meerdere producten aan zijn of haar winkelwagentje toevoegen en deze betalen via het Gumroad-betalingssysteem, dat u vanuit uw Gumroad-account kunt beheren. Kom meer te weten:
Er zijn een aantal andere tools die u mogelijk kunt gebruiken als u een website maakt met statische pagina's.
Als u een kaart aan uw site wilt toevoegen, zou ik MapBuildr aanbevelen. Dit geeft een relatief eenvoudige interface om uw eigen kaartinsluiting te maken met behulp van de Google Maps API.
Een andere functie die u misschien wilt toevoegen, is een blog. Zonder een generator zoals Jekyll te gebruiken, kun je een blog niet eenvoudig in een statische site implementeren, maar je zou een service kunnen gebruiken die specifiek is ontworpen voor bloggen. Medium is enorm populair geworden voor individuen en bedrijven om mee te bloggen, en er is eigenlijk een manier om middelgrote artikelen op een statische pagina in te sluiten.
De presentatie van de inbedding is elegant en schoon, dus het zou niet moeten botsen met uw siteontwerp.
Zoals u kunt zien, hoeft een statische site eigenlijk niet statisch te zijn. Er zijn tal van krachtige tools beschikbaar om je statische sjablonen tot leven te brengen, waarvan de meeste volledig gratis zijn in te stellen. Alle hierboven genoemde hulpmiddelen zijn met zorg en aandacht gebouwd en ontworpen. Als u de kans krijgt om een van deze tools te gebruiken, raad ik u aan ze uit te proberen.