Meilleure réponse
Le GitHub Student Developer Pack fournit les ressources pour configurez votre propre firstnamelastname.me domaine sans frais. Dans le reste de ma réponse, je dis pourquoi il était difficile pour moi au départ, pourquoi cela aurait pu « avoir été un obstacle pour vous, de créer votre propre site Web. Jinclus un guide court, assez complet, destiné à un public étudiant avec peu ou pas de connaissances techniques pour créer un site Web personnel assez public (qui devrait apparaître lorsque quelquun recherche votre nom sur Google).
Pourquoi il « est vraiment difficile de créer votre propre site Web
Sur le fait de vouloir savoir comment fonctionnent les sites Web: En tant que passionné de technologie au lycée, jai toujours été curieux de savoir comment les sites Web fonctionnaient et vraiment impressionné par les personnes qui possédaient les leurs. Tout cela semblait si simple de lextérieur, mais chaque fois que je cherchais sur Google «comment fonctionnent les sites Web», et que je creusais plus profondément, je me perdais au milieu des abréviations étranges et des sons compliqués. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – la liste est longue. La tâche de mapper ces concepts abstrus à des choses palpables dans les ordinateurs que je connaissais était assez difficile et lune de ces choses qui demande énormément de motivation pour sasseoir et passer.
Sur la décision de créer simplement un site Web pour comprendre comment ils fonctionnent: Voici une question que vous pourriez poser à certaines entreprises technologiques pointilleuses et que vous trouverez dans le annales de Glassdoor –
Lorsque vous saisissez « google [dot] com » dans votre navigateur Web, que se passe-t-il? ( Question dentrevue Google: que se passe-t-il lorsque vous tapez …)
Même à mi-chemin de mes études dinformatique à luniversité, jétais un peu inquiet du peu quils mont dit sur tout cela. Dans la frustration, la solution de rechange à rechercher sur Google était « comment créer un site Web ». Avec les charges de marketing investies, je suis tombé sur une pléthore de sites Web et de termes que je ne pouvais toujours pas comprendre – domaines, hébergement, GoDaddy, HostGator, routage, CSS, HTML, Javascript, jQuery, WordPress , blogueur, etc. Voici ce que cela me montre maintenant:
Pour être honnête, tous ces noms semblaient très frauduleux- y pour moi, et leur incompréhensibilité a dépassé ma motivation. Je voulais juste avoir mon propre site Web avec mon nom – debarghyadas.com [ignorer lauto-promotion], et apprenez à y mettre du contenu.
Être trop bon marché pour acheter des choses sur Internet: Quand je me suis tourné vers certains ça a un peu de sens. Pour créer un site Web, je devrais acheter un « domaine », un nom de site Web et un « hébergement », un endroit qui contient le contenu de mon site Web et le donne, le « sert », à ce domaine. Achat. Pas un joli mot étant donné ma frugalité pas si profonde. étudiant qui vit du freeware, je nétais pas trop désireux de distribuer de largent pour acheter des choses abstraites. Il ma fallu des années pour payer 1 $ pour Whatsapp alors quil était trivial de dépenser 4 $ sur ce somptueux gâteau mousse au chocolat avec de la glace à la vanille.
Allez, pourriez-vous être plus darnaque? « Nous mangeons la concurrence »? Daccord, alligator.
Pour de nombreux étudiants (et personnes), largent est un obstacle à lentrée. Il en coûte environ 10 $ / an pour acheter un domaine (chez GoDaddy) et un montant similaire pour acheter un hébergement chez HostGator. Et il impliquait de travailler votre chemin à travers de nombreux produits que vous ne pouviez pas comprendre. Cela ma énervé que vous deviez payer sur une base annuelle aussi – ce nétait pas un achat unique.
Sur le recours à ne pas être bon marché pour me motiver: Finalement, à travers un long processus laborieux, jai distribué de largent, me convaincant que linvestissement me motiverait à acquérir les compétences nécessaires. Je veux dire, tout le monde a toujours dit que HTML était simple, et cest le cas, mais les sites créés avec du HTML ressemblent aussi à de la merde. Il y avait beaucoup de confusion.
Finalement, javais raison: linvestissement sur un domaine et lhébergement pendant 5 ans ma amené à comprendre comment les choses fonctionnaient et jai sorti un site Web personnel, et jy répétais chaque fois que jen avais quelques temps libre.
Un guide assez complet pour créer votre propre site Web gratuitement
Accéder au Pack de développement étudiant GitHub .Oui, il contient beaucoup de choses que je nai jamais utilisées, mais ce quil ne fait pas de publicité directe (et devrait probablement), cest quil fournit tous les outils pour que votre site Web sur votre domaine soit opérationnel gratuitement! Cela semble trop beau pour être vrai maintenant.
Les outils du métier Voici « un guide général. I Je nai pas essayé personnellement, mais jimagine que cest une bonne façon de faire les choses. Vous devez (ou devriez) utiliser les services payants suivants fournis par le Student Developer Pack (gratuitement):
1. Dépôts privés Github [facultatif]
2. Domaine Namecheap .me
3. Namecheap SSL [facultatif]
4. Hébergement DigitalOcean
Et en plus,
1. Bootstrap
2. Plusieurs didacticiels et outils en ligne – JSfiddle 3. Certains sites de modèles en ligne – StartBootstrap , BootstrapZero
Que faire avec lesdits outils Je vais essayer de garder ce mini-guide aussi simple que possible . Il est facile de laisser tomber les gros termes lorsque vous savez ce quils signifient, mais cela peut être un énorme dissuasif pour les lecteurs qui nont aucune idée. Je pourrais être plus explicite et développer ces termes si vous le souhaitez.
1. Configurer un Github span privé > référentiel [facultatif]
Lorsque vous êtes écrire beaucoup de code pour un projet, il y a beaucoup de choses qui peuvent mal tourner.
- Il peut être supprimé de votre machine et vous « êtes vissé
- Vous pouvez essayer dajouter une nouvelle fonctionnalité sans sauvegarder lancienne version et arriver à un état où vous oubliez le nombre de Ctrl + Z (annulations) dont vous avez besoin sur quels fichiers pour revenir à létat de fonctionnement.
- Vous pourriez avoir plusieurs personnes travaillant séparément sur leurs propres ordinateurs et ne savez pas comment intégrer vos deux version du projet.
Un codeur n00b pourrait suggérer dutiliser Dropbox pour partager et synchroniser des projets de code, et si vous « si vous travaillez vous-même, cela pourrait être une solution décente. Cependant, vous serez toujours confronté au deuxième problème de la liste ci-dessus et cela devient vraiment fou lorsque plusieurs personnes essaient de travailler simultanément sur la même base de code.
Git (et autrefois, SVN et Mercurial pour les hipsters) sont utilisés pour « version » votre code. Notez que git nest pas github. Autrement dit, vous pouvez apporter des modifications, les pousser « en amont » vers les interwebs, où ils sont stockés en permanence dans votre « référentiel » (gratuitement). Git est également purement un utilitaire de ligne de commande, ce qui signifie que vous devez ouvrir lun de ces écrans de hackers noirs effrayants sur votre bureau et taper des commandes Ce nest pas simple à utiliser. Github sintègre à git et vous permet de voir les dépôts que vous avez poussés en amont et fournit un tas dinterfaces graphiques pour faire des tâches git (se comportant comme une application normale sur votre ordinateur). Vous pouvez parcourir vos bases de code (référentiels) sur Internet à partir de votre navigateur, effectuer des modifications, annuler les modifications apportées au dernier point de contrôle (validation), etc.
Github fournissait toujours des référentiels gratuits qui étaient publics – ce qui signifiait que nimporte qui pouvait voir votre code et lutiliser (oui, il y a des licences Open Source, mais vous savez ce que je veux dire). Essentiellement, si vous deviez travailler très dur pour concevoir une merde incroyablement cool et réinventer linformatique, votre copain pourrait simplement prendre votre code et lutiliser pour son propre site Web. Maintenant, avec le pack éducatif, vous pouvez obtenir 5 référentiels privés gratuits (bien que Github ait également fourni ce service pour les étudiants .edu auparavant). Parcourez les didacticiels en ligne et découvrez comment configurer un référentiel github privé pour le code de votre site Web.
2. Obtenez votre Namecheap .me
Pendant très longtemps, le seul vendeur de domaine que je connaissais était GoDaddy. Le nom ma toujours semblé douteux, même si jai fini par céder pour acheter un domaine là-bas. Maintenant, à lère des startups, nous avons une meilleure alternative plus propre et moins chère – Namecheap.Namecheap a toujours été bon marché, mais vous pouvez maintenant obtenir un domaine gratuitement! Donc, obtenez votre domaine firstnamelastname.me maintenant gratuitement, avant que votre nom très courant ne soit volé (si ce nest pas déjà fait). Et essayez de ne pas revenir en arrière dans les années 90 et acheter un raj2kul4skul.me . Ne « t. Sil vous plaît. La seule personne qui impressionnera sont les amis sans lesquels vous êtes mieux.
Ai-je mentionné que cest gratuit?
3 . Obtenez Namecheap SSL [facultatif]
Ceci est facultatif, et je ne lai pas encore fait pour mon site Web (car cela coûte encore de largent sur GoDaddy). SSL (Secure Sockets Layer) est une chose sophistiquée cela signifie essentiellement que votre contenu Web peut être diffusé « en toute sécurité ». Vous obtenez également ce verrou vert sur votre site Web, vous avez un site Web https , au lieu de http, et se sentir vraiment cool et authentique:
Sans aller trop technique, ce que vous devez savoir cest que – ce nest pas strictement nécessaire pour votre site Web personnel où je doute que vous fassiez des choses qui exigent une sécurité aussi stricte. Cependant, si vous « apprenez des choses sur le Web, vous pourriez aussi bien. Cest gratuit après tout?
4. Configurer Digital Ocean hébergement.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap est à GoDaddy comme DigitalOcean est à HostGator – une startup plus légitime, moins chère, mieux conçue et plus facile à utiliser alternative. Lorsque vous achetez un domaine, que va-t-il servir (montrer) à lutilisateur? Votre site Web, non? Mais vous ne pouvez pas simplement dire de prendre ces fichiers sur mon ordinateur et de leur montrer. Eh bien, vous pouvez, et voici comment. Avec DigitalOcean, vous obtenez un «hébergement» gratuit. DigitalOcean appelle une instance dhébergement une «goutte».
Cela signifie que vous pouvez télécharger votre site Web sur une machine virtuelle (lire: un ordinateur), et indiquer votre domaine namecheap pour diffuser le contenu depuis cet ordinateur. Sans entrer dans les détails, il y a beaucoup de choses qui se passent au milieu dont DigitalOcean devrait soccuper – des choses comme la configuration et le choix dun serveur Web – nginx ou Apache , et acheminer les demandes sur votre domaine spécifiquement vers votre ensemble de fichiers.
5. Créer le site Web actuel.
En vient maintenant à la partie « écrire du HTML ». Créer un site Web présente différents degrés de difficulté – en affichant le envoyez « Hello World » en Arial pour créer un Facebook ou Google. Habituellement, un int Les applications actives qui nécessitent des données et contiennent un état sont difficiles à créer.
Ce que vous allez faire sera probablement de créer un site statique (un tas des mêmes textes / images qui sont servis à tout le monde à chaque fois). Cest beaucoup plus facile. Jai probablement gagné « t et ne peuvent pas écrire un tutoriel complet à ce sujet, mais ce que les étudiants font généralement, cest apprendre et utiliser les choses suivantes –
- HTML – il sagit du contenu réel du texte / liens / images / vidéos
- CSS – cela rend le contenu ci-dessus joli
- Javascript (JS) – cela permet des éléments dynamiques et de jolies animations. Supposons que vous vouliez créer un bouton qui charge une image qui n’était pas « t dans votre HTML, ou ajoutez du contenu de manière dynamique à votre HTML. Ensuite, vous utilisez JS. Une brève histoire – JS a été piraté dans la journée en 10 jours environ, et il contient beaucoup de bogues, et peut être très verbeux et compliqué si vous en écrivez beaucoup. En règle générale, un débutant utiliserait une bibliothèque comme jQuery pour la rendre moins verbeuse et facile (bien que jQuery puisse sembler intimidant au début aussi avec tous ses signes $).
- Bootstrap – Bootstrap est un framework Frontend de référence créé par Twitter. Le HTML brut est livré avec des éléments par défaut assez mauvais. Le bouton HTML nest pas représentable, et écrire du CSS pour cela prend du temps et de lexpérimentation (je veux dire, soyons réalistes – personne ne « connaît » VRAIMENT « CSS). Bootstrap implique le téléchargement de certains fichiers, lajout dune ligne à votre HTML et peut-être la lecture documentation, et en ajoutant quelques classes CSS quils fournissent – et voilà! Non seulement votre site est automatiquement tellement plus joli, mais il peut également être rendu compatible pour les mobiles (encore une fois, une entreprise non triviale).
6. Mise en ligne de votre site Web (déploiement) Une fois que vous avez « terminé de créer et de tester votre site Web localement (sur votre propre ordinateur) en activant votre hôte local (serveur Web local – google it.Vous naurez peut-être pas besoin de cela pour les sites statiques), et testez et mélangez avec votre CSS à laide des outils de développement Chrome très utiles, et êtes satisfait de votre sortie, vous pouvez accéder à Digital Ocean, compresser votre site et lenvoyer à votre serveur. Si vous avez tout fait correctement, attendez quelques secondes et accédez à votre firstnamelastname.me et vous devriez voir votre contenu. Et tout le monde devrait pouvoir le faire aussi.
7. Rendre votre excellent site Web consultable (SEO)
Une dernière étape est le référencement – loptimisation des moteurs de recherche. Lobjectif final est, espérons-le, davoir un nom inhabituel et de faire de votre site Web lun des meilleurs résultats lorsque quelquun recherche votre nom sur Google. Cela peut prendre un certain temps (mais cela peut être fait maintenant à un coût monétaire). Il existe de nombreuses façons de le faire, et vous pouvez toutes les utiliser sur Google. Il existe des méthodes pour y associer votre Facebook, votre ancien compte Google+ que vous nutilisez jamais, en ajoutant des métadonnées personnalisées à afficher dans votre recherche Google , etc. En fin de compte, dans quelques semaines, à moins que votre nom ne soit extrêmement commun ou malheureusement identique à celui dune personne célèbre, vous devriez être lun des meilleurs résultats sur Google.
Informations diverses que vous devez savoir
À propos des raccourcis pour créer une jolie page: Selon la quantité de travail que vous souhaitez effectuer sur votre site Web, vous pouvez toujours choisir un modèle de bootstrap pratique en ligne ou créer vos propres classes CSS si vous voulez un look unique, ou même restez simple et optez pour le HTML / CSS de base (ce que font un grand nombre duniversitaires). Par exemple, Page daccueil de Jon Kleinberg .
Ne pas avoir à connaître PHP et autres choses fantaisistes: Parce que vous concevez un site statique, vous ne savez pas comment créer un backend, créer de nombreuses pages et avoir des bases de données. Oui, je vous parle, tous les les personnes qui veulent utiliser PHP et MySQL sans raison valable (même si vous en aviez besoin, essayez de rester à lécart de PHP). Il existe « un tas dexcellents frameworks backend destinés à créer dautres types de sites Web complexes, de Ruby on Rails (en Ruby) à Django (en Python) à Play! (en Java et Scala) des modèles légers comme CherryPy (en Python) ou Flask (en Python). En fait, il existe des frameworks pour à peu près toutes les langues que vous pouvez imaginer – Comparaison des frameworks dapplications Web mais ne vous épuisez pas en les utilisant / en apprenant pour linstant.
Autres choses à ajouter à votre site Web: Autres choses que vous pourriez souhaiter faire pour votre site Web personnel –
- Compressez vos images si vous en utilisez beaucoup, votre site Web prendra beaucoup de temps à charger.
- Utilisez des plugins sociaux de Facebook / Quora / Twitter
- Ajouter Google Analytics (cest en fait presque un must). Google Analytics vous permet de voir, entre autres choses, combien de personnes visitent votre site Web, doù elles viennent, etc. Cest un bon élément de motivation (espérons-le) pour mettre à jour votre site et le maintenir à jour. De plus, cest très facile à utiliser – il sagit simplement de copier-coller quelques lignes de code dans votre page.
- Réduisez vos scripts. Un grand nombre de JS et CSS dun site peuvent toujours être visibles par toute personne visitant votre site. Si vous pensez vous avez fait quelque chose de terriblement intéressant que vous voulez cacher, réduire votre JS / CSS. Sinon, cela ruine lobjectif davoir un dépôt privé. De plus, cela rend votre site plus rapide.
- Cryptez votre HTML . Encore une fois, si vous vraiment ne voulez pas que les gens voient comment vous avez créé votre site Web, il y a façons de crypter votre HTML afin que même en cliquant sur le bouton « Afficher la source », votre page Web ne révélera rien dintéressant.
En écrivant cette réponse: Beaucoup de gens se demandent comment créer leur propre site Web. Jai pensé quil serait utile décrire un petit tutoriel court (discutable) et facile à comprendre pour aider tout le monde. Cest vraiment une de ces choses faciles à faire. Oh, et ai-je mentionné que cest désormais gratuit?