245 lines
21 KiB
HTML
245 lines
21 KiB
HTML
---
|
|
title: Creating Your Own Website
|
|
author: xandra
|
|
aliases:
|
|
- /cyowebsite
|
|
---
|
|
<h2>Creating Your Own Website</h2>
|
|
<blockquote>Lovingly written and submitted by <a href="https://xandra.cc" target="_blank">Xandra</a>.</blockquote>
|
|
|
|
<section>
|
|
<ul>
|
|
<li><a href="#0">0. What kind of website do you want to make?</a></li>
|
|
<li><a href="#1">1. Find a host</a></li>
|
|
<li><a href="#2">2. Decide if you want a domain or not</a></li>
|
|
<li><a href="#3">3. Learn how to code while building your site</a></li>
|
|
<li><a href="#4">4. Join webrings and get involved in communities</a></li>
|
|
<li><a href="#5">5. Keep your website alive</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<h3>You can do this!</h3>
|
|
|
|
<section>
|
|
<p>Yes, you <strong>can build a website, and using nothing but your keyboard and a text editor</strong>! Anyone can learn how to code a website, and thanks to the many tutorials and documentation around on the web, you can get started for free as you learn. The best part about building your own website is that you have complete control over how you want it to look, behave, and everything is up to you.</p>
|
|
|
|
<p>Building a website can seem difficult, but half the battle is just getting started! We wanted to put this guide together as an easy compilation of tutorials and places to learn exactly what you need to get started.</p>
|
|
|
|
<p>Here are some common misconceptions about coding your own website:</p>
|
|
<ul>
|
|
<li>You need a website builder</li>
|
|
<li>You have to use WordPress, Wix, Weebly, or Squarespace to make your own website</li>
|
|
<li>Your website has to make money in some way to be worth it</li>
|
|
<li>Coding is hard and requires a professional</li>
|
|
<li>Creating your own website is expensive</li>
|
|
</ul>
|
|
|
|
<p><strong>None of these are true!</strong></p>
|
|
|
|
<p>We hope this guide helps make everything feel more accessible to you, because it is! The internet belongs to all of us, so be sure to stake your claim in it.</p>
|
|
</section>
|
|
|
|
<h3 name="0" id="0">0. What kind of website do you want to make?</h3>
|
|
<section>
|
|
<p>There is a whole hobby surrounding building websites for personal use. Websites can cover, display, or talk about anything you're interested in, and building a website can be a great way to supplement your already-existing hobbies. Before you start down the path of building your own website, think about what type of content would be the most motivating to build or maintain. For instance, what is missing from social media profiles? Human context. You're more than just posting images to Instagram or funny statuses on Twitter. Having a website can fully encompass all different types of media all in one place, showcasing the full breadth of your interests.</p>
|
|
|
|
<p>What can a website be about? Here's some ideas from the community:</p>
|
|
|
|
<ul>
|
|
<li>A digital art gallery to show off photography</li>
|
|
<li>A compilation of university notes to be referenced</li>
|
|
<li>A business card to compile your digital presence</li>
|
|
<li>Published essays, papers, and other writings</li>
|
|
<li>A custom homepage to see whenever you launch a browser</li>
|
|
<li>A digital journal or daily planner completely owned by you</li>
|
|
<li>A customized library of topics you're interested in</li>
|
|
<li>An interactive log of all the countries or places you've visited</li>
|
|
<li>A dated log for dreams, food, or anything you want to keep track of</li>
|
|
<li>A capsule of all the information you know about your favorite things</li>
|
|
<li>Reviews of books, movies, and other media you enjoy</li>
|
|
<li>Digital scrapbooking of your life, displayed however you want</li>
|
|
<li>Playlists of music you enjoy, mixing different platforms and media</li>
|
|
<li>A reading list of interesting articles alongside your thoughts on them</li>
|
|
</ul>
|
|
|
|
<p>Or your website can just be all about you, which could include <em>all of these things</em>!</p>
|
|
</section>
|
|
|
|
<h3 name="1" id="1">1. Find a host</h3>
|
|
<section>
|
|
<p>While I'm sure you've heard of services like Wix and Squarespace from your favorite podcasts, what you want for this is a <strong>webhost</strong> or a <strong>hosting provider</strong>. Most likely, what you're looking for is <em>static hosting</em>. Services like Wix and Squarespace are good options for professional portfolios, business websites, and stores, but as far as individualized and unique websites go, these are not good options for expressive, hand-coded, personal websites.</p>
|
|
|
|
<p>If you want a standard blog that looks like every other website out there, then sure, maybe give those hosts a try with standard templates. If you want to learn skills that not only help you create a website for you to display whatever you want and express yourself but also help you expand your skillset that could be used for jobs, projects, or a hobby all on its own, then let's keep going!</p>
|
|
|
|
<p>Webhosts have been around for a long time, and because of this, we've generally figured out who the better ones are (spoiler: the ones that have been around for a long time). The good news is, depending on the webhost, you might not even have to buy a domain to start coding, which is perfect for a beginner. Many free webhosts offer an included subdomain and some paid webhosts offer an included domain, so you will have a URL ready to go that you can begin linking and sharing.</p>
|
|
|
|
<h4>Free Webhosts</h4>
|
|
<ul>
|
|
<li><a href="https://mmm.page" target="_new">mmm.page</a> (free tier, drag & drop web builder!)</li>
|
|
<li><a href="https://neocities.org" target="_new">Neocities</a> (free tier, up to 1GB)</li>
|
|
<li><a href="https://pages.github.com" target="_new">Github Pages</a></li>
|
|
<li><a href="https://ichi.city" target="_new">Ichi.city</a></li>
|
|
<li><a href="https://leprd.space" target="_blank">Leprd.space</a> (application-based, up to 1GB)</li>
|
|
<li><a href="https://www.w3schools.com/spaces/index.php" target="_blank">W3Schools' Spaces</a></li>
|
|
</ul>
|
|
|
|
<p>💡 <em>More might be listed on the <a href="https://discuss.32bit.cafe/wiki/resources#free-webhosts" target="_blank">32-Bit Cafe's Resource List</a>.</em></p>
|
|
|
|
<h4>Paid Webhosts</h4>
|
|
<ul>
|
|
<li><a href="https://dreamhost.com" target="_blank">Dreamhost</a> (starts at $4.95/month)</li>
|
|
<li><a href="https://nearlyfreespeech.net" target="_blank">NearlyFreeSpeech</a> (pay-as-you-go)</li>
|
|
<li><a href="https://porkbun.com" target="_blank">Porkbun</a> (starts at $3/month)</li>
|
|
<li><a href="https://www.hetzner.com" target="_blank">Hetzner</a> (starts at €2.09/month)</li>
|
|
<li><a href="https://uberspace.de" target="_blank">Uberspace</a> (starts at €5/month)</li>
|
|
</ul>
|
|
|
|
<p>Your host will likely either have a web interface system to upload your site, but if not, you'll need to dig into the host's documentation about how to upload your files. The best way to learn is to jump in and try!</p>
|
|
|
|
<h4>How to upload your site</h4>
|
|
|
|
<p>The below table is a compilation of methods to upload your site using the hosts suggested above, ranked in level of difficulty. None of these are <em>hard</em>, but some may require some additional learning to understand. Ultimately, you want to make sure you're reading and understanding how things work to better learn how to use these methods to your advantage.</p>
|
|
|
|
<p>A <strong>web interface</strong> means that the uploading process is entirely accessible from your browser, usually through an upload form or a button to find files on your computer. <strong>FTP</strong> (File Transfer Protocol) means transferring (often dragging and dropping) files from one server to another. A <strong>repository</strong> is using Git to push your files to the published site, but this tends to be a more <a href="https://www.gitkraken.com/learn/git/tutorials/what-is-a-git-repository" target="_blank">advanced method</a>.</p>
|
|
|
|
<table style="overflow-x:auto; width: inherit;">
|
|
<thead>
|
|
<th>Level</th>
|
|
<th>Method</th>
|
|
<th>Host</th>
|
|
<th>Tutorial</th>
|
|
</thead>
|
|
|
|
<tr>
|
|
<td>Easy</td>
|
|
<td>Web Interface/FTP</td>
|
|
<td>Neocities</td>
|
|
<td><a href="https://sadgrl.online/learn/articles/beginners-guide-neocities" target="_blank">Absolute beginner's guide to Neocities</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Easy</td>
|
|
<td>Web Interface/FTP</td>
|
|
<td>Dreamhost</td>
|
|
<td><a href="https://help.dreamhost.com/hc/en-us/articles/215613657-How-do-I-upload-my-site-to-DreamHost" target="_blank">How do I upload my site to Dreamhost?</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Intermediate</td>
|
|
<td>FTP</td>
|
|
<td>NearlyFreeSpeech.NET</td>
|
|
<td><a href="https://www.nearlyfreespeech.net/about/start" target="_blank">NearlyFreeSpeech.NET Getting Started Guide
|
|
</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Intermediate</td>
|
|
<td>FTP</td>
|
|
<td>Most</td>
|
|
<td><a href="https://www.wikihow.com/Upload-Files-to-an-FTP-Server" target="_blank">How to Upload Files to an FTP Server</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Advanced</td>
|
|
<td>Repository</td>
|
|
<td>GitHub Pages</td>
|
|
<td><a href="https://medium.com/@svinkle/publish-and-share-your-own-website-for-free-with-github-2eff049a1cb5" target="_blank">Publish and share your own website for free with GitHub</a></td>
|
|
</tr>
|
|
</table>
|
|
</section>
|
|
|
|
<h3 name="2" id="2">2. Decide if you want a domain or not</h3>
|
|
<section>
|
|
<p>A domain, such as <u>32bit.cafe</u>, can be a great way to have a catchy site name or have something short to share easily. And, if anything happens to any of your hosts, you can always transfer your domain to your new host. A domain is also good way to maintain a short URL, which can be easier to share or remember. The great news is that some webhosts can either give you a free domain with paid hosting or you can buy domains through the host. There's a couple of different routes to go, but it's completely up to you. Try not to use any of <a href="https://researchasahobby.com/full-list-eig-hosting-companies-brands/" target="_blank">EIG/Newfold Digital providers</a> if you can avoid it.</p>
|
|
|
|
<h4>Domain Providers</h4>
|
|
<ul>
|
|
<li><a href="https://namecheap.com" target="_blank">Namecheap</a></li>
|
|
<li><a href="https://porkbun.com" target="_blank">Porkbun</a></li>
|
|
<li><a href="https://dreamhost.com" target="_blank">Dreamhost</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<h3 name="3" id="3">3. Learn how to code while building your site</h3>
|
|
<section>
|
|
<p>You don't need images or a bunch of custom graphics to get you started. You can make a website entirely from text and coded shapes, just like the 32-Bit Cafe!</p>
|
|
|
|
<p>Think of a website as a clothed stick figure waving. The <em>stick figure</em> is the HyperText Markup Language (HTML), the <em>clothes</em> are the CSS (Cascading Stylesheets), and the <em>waving</em> is JavaScript (and totally optional!). These three layers come together to make a clothed stick figure waving, but you can just have the stick figure standing still. You can even just have a naked stick figure: a website made up completely of HTML only.</p>
|
|
|
|
<p>HTML and CSS are some of the easiest types of code to learn, because it's written in a way that's easier to remember and centered on the content that fills it. You can code a website entirely in HTML without CSS or JavaScript, but you have to have the stick figure first in order to have something appear in your browser.</p>
|
|
|
|
<p>With some webhosts, you are able to edit and save your <code>.html</code> files directly using their web interface. However, since it's always best to have a backup, you can have a built-in backup by creating and editing your <code>.html</code> files locally. You can access your local files and test your website as you go. Just open your <code>.html</code> file in your favorite browser and begin testing!</p>
|
|
|
|
<blockquote>Unsure how to structure your website files for easy reference and uploading? Check out our <a href="../folderstructure101/">Folder Structure 101</a> guide.
|
|
</blockquote>
|
|
|
|
<h4>Editors</h4>
|
|
<p>How do you make <code>.html</code> files? Since we're looking for ways to code our websites by hand, any plaintext editor (that makes <code>.txt</code> files) is what you're looking for here. If you're looking for a different way of creating your website, a drag-and-drop webhost is going to be the best course of action. The best kind of tool is one that you'll use, so be sure to try out different types of editors and builders that make sense for the way you digest, process, and convey information.</p>
|
|
|
|
<p>Coding it by hand is really the best way to completely control the look and feel of every aspect of your website. Here are a list of some favorites, but it may make sense for you to start with your operating system's default, such as Windows' Notepad, to get started.</p>
|
|
|
|
<ul>
|
|
<li><a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a></li>
|
|
<li><a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></li>
|
|
<li><a href="https://brackets.io/" target="_blank">Brackets</a></li>
|
|
</ul>
|
|
|
|
<p>You can just open your text editor, put in some HTML, and <em>Save As...</em> the file as an <code>.html</code> file instead of a <code>.txt</code> in a folder on your computer. Open it in your favorite browser—boom!</p>
|
|
|
|
<h4>Getting started with HTML</h4>
|
|
|
|
<p>There are so many tutorials across the web, so we want to link some here that will take you, from start to finish, how to code your website. Some tutorials here even have barebones website layouts, so you can have a framework to the content you want to have inside of it.</p>
|
|
|
|
<p>The list here might seem like a lot at first glance, but it's not meant to overwhelm you with a lot of information. The idea here is to give you options of the best voice, method, and style of learning specific to you. Most of the time, whether someone "gets" something depends on the teacher, not the student. There are tutorials here that will guide you from start to finish, starting with a complete blank slate about making your own website.</p>
|
|
|
|
<h5>Beginner Tutorials</h5>
|
|
<ul>
|
|
<li><a href="https://html.com/#tutorial" target="_blank">HTML.com's HTML For Beginners The Easy Way</a></li>
|
|
<li><a href="https://www.w3schools.com/html/html_intro.asp" target="_blank">W3Schools' HTML Tutorial</a></li>
|
|
<li><a href="https://webguide.neocities.org/" target="_blank">A Beginner's Guide to HTML and CSS</a></li>
|
|
<li><a href="https://thoughts.melonking.net/guides/introduction-to-the-web-revival-2-learn-about-websites" target="_blank">MelonKing's Learn about Websites</a></li>
|
|
<li><a href="https://www.dragonflycave.com/html-guide" target="_blank">The Cave of Dragonflies HTML Guide</a></li>
|
|
</ul>
|
|
|
|
<h5>HTML Documentation and References</h5>
|
|
|
|
<p>You might learn just by trying things out on your own, so included here is documentation for HTML and reference material so you can dive in by messing around in the playground you're creating.</p>
|
|
|
|
<ul>
|
|
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web" target="_blank">Mozilla's Web Docs</a></li>
|
|
<li><a href="https://brisray.com/web/" target="_blank">Ray's Web Stuff</a></li>
|
|
<li><a href="https://www.w3schools.com/cssref/index.php" target="_blank">CSS Reference</a></li>
|
|
</ul>
|
|
|
|
<p>💡 <em>More might be listed on the <a href="https://discuss.32bit.cafe/wiki/resources#beginner-html-guides" target="_blank">32-Bit Cafe's Resource List</a>.</em></p>
|
|
|
|
<p>If you have to pick an order of what to learn, understand HTML before diving into CSS. It's hard to put clothes on a stick figure you're not sure the size of yet! CSS heavily relies on understanding how different HTML elements work with each other, so learning how to structure your site with HTML first will put you at an advantage in learning CSS.</p>
|
|
|
|
<p>Don't get discouraged if you have trouble with coding. <em>Everyone</em> does, no matter the skill level or how long we've been doing it! Even professional web developers have to search online for the solution to their problems every once in a while. Compare your work to the work of others and see how other people accomplish the same things you want to. There's never just one way to code something.</p>
|
|
|
|
<p>It can be really helpful to use your favorite search engine to search for keywords like "how to do XYZ in HTML" if there's something specific you want to learn how to code. Learning how to research your problem by searching keywords like "how to make two-column layout html" or "make an image gallery in HTML and CSS only" will help you <em>so much</em> in the future. If you ever run into issues, searching online will often yield you the answer on forums and websites. If you're coding alongside a tutorial and don't really understand, try breaking apart the problem to get to the crux of it. Coding, sometimes, is a puzzle! That's why it's so, so satisfying when you finally fix a problem that's been holding up your website.</p>
|
|
</section>
|
|
|
|
<h3 name="4" id="4">4. Join webrings and get involved in communities</h3>
|
|
<section>
|
|
<p>The next step of having a website is having people see it! This part is totally optional, but knowing folks are visiting your site can be a real motivational push to maintain and keep your site up to date. On <a href="https://neocities.org" target="_blank">Neocities</a>, there is a built-in following/activity feed, where you can see sites that are being <a href="https://neocities.org/activity" target="_blank">updated in real time</a> and find websites to follow that you enjoy. You can also find directories of websites for "this side of the web" including personal sites, like <a href="https://indieseek.xyz/" target="_blank">Indieseek.xyz</a>, <a href="https://peelopaalu.neocities.org/" target="_blank">Peelopaalu</a>, <a href="https://list-me.com/" target="_blank">List-Me.com</a>, and <a href="https://www.linklane.net/" target="_blank">Link Lane</a>.</p>
|
|
|
|
<p>Webring directories, like <a href="https://brisray.com/web/webring-list.htm" target="_blank">Ray's Webring List</a>, highlight that webrings are the best way to be linked by a wide array of like-minded folks. Webrings aren't seen around the web as often anymore since the social web has taken over, but they've been steadily growing once more as a place for websites to interconnect. Once you've published your site, check out webrings and see which ones you or your site falls into. You very well might even make some friends!</p>
|
|
|
|
<h4>Web Visitor Etiquette</h4>
|
|
<p>In visiting a lot of sites, you might begin seeing that there's static ways of interacting with the website owner: guestbooks, shoutboxes (also known as Cbox), and comment systems. It's polite to comment on the site you're visiting; in particular, it'll make that person's day to give them a compliment about some aspect of their site! It's also a great way to get your site out there, since whoever is receiving your comment will likely come to your site to return the favor and browse yours. (And then you'll see how good it feels!)</p>
|
|
<blockquote>Want to learn more about interacting with other websites once you have yours built? Check out our <a href="../interactingontheweb/">Interacting with Other Websites</a> guide.
|
|
</blockquote>
|
|
</section>
|
|
|
|
<h3 name="5" id="5">5. Keep your website alive</h3>
|
|
<section>
|
|
<p>At some point, you feel like you've added everything you've thought of to your website. Struggling to come up with ideas and seeing websites that look "better" than yours, you might begin to slowly dedicate less and less time to this new hobby of yours. I implore you to <strong>keep at it</strong>!</p>
|
|
|
|
<p>Your website does not have to be updated every week in order to be a participant in the personal web. Change up your layout once a year or every season. Talk about something important to you every six months. Whatever level of activity you can fit into your life, the <em>consistency</em> is what is most important. Start a blog? Maintain it. Have a to-do list? Check off items. Show progression through your website as you journey through your life, so your website can reflect the person you are now.</p>
|
|
|
|
<blockquote>Need some more ideas for pages to add to your personal site or ways to improve? Our <a href="https://32bit.cafe/websiteideas/">Ideas for Your Personal Website</a> guide has you covered.</blockquote>
|
|
|
|
<p>Learning more about how HTML and CSS interact can eventually open you up to advanced methods of design, allowing you to experiment with new methods and ways to display your content. You'll learn different ways to design your site, and you might want to change up your layout! All it takes is for you to search for it and seek out code snippets, CSS tricks, and other ways to improve your coding.</p>
|
|
|
|
<p>Keep in mind that this isn't a competition, and there's no Hall of Fame here. People will enjoy your site because of what you put on it, not because it's the best-coded website ever (whatever that means). Nobody is comparing your site to someone else's, because they exist for different reasons. You might showcase your photography, which will look completely different from a site of someone displaying their pixel art.</p>
|
|
|
|
<p>We all started where you are now, regardless of where we are now. You are not alone, and a ton of communities like the 32-Bit Cafe exist because we want <strong>you</strong> to create the website <strong>you</strong> want. If you eventually outgrow the current iteration, change things up or start all over again. It's your world!</p>
|
|
</section>
|